Introduction

Starting from v 6.9 via HTML (Portlet). The HTML Form provides a user interface to enter data in a form-based way.

It allows to add explanation text and validation error messages.

It is possible to define selection lists and compound input fields, e.g., a set of integers or a set of timestamps.

A full list of input options can be found here Data types in HTML Form

Core steps to setup HTML-Forms

Prepare an editable grid in a specific structure (described below) and build Portlet (with flag hidden - so it is not shown when user works on the page)

Create an HTML Portlet and make it a buddy of the editable grid portlet

The HTML Form is created from a definition that has to be provided in an Editable Grid portlet.
This definition is processed by a JavaScript script.

The portlet has to be referenced as "Buddy editable grid" in the settings of the HTML Portlet.

Columns of the Editable Grid

The Editable Grid contains the definition of the form items or sections as follows.
Columns indices are relevant rather than column names, so the column names can differ between applications.
More columns can be added for other purposes, e.g., error handling.

Column index	Common column names	Description	Screenshot
0	Title Frage	Header of the form items
1	ID Id	Identifier of the item for internal use.	n/a
2	Group Gruppe	Group name, if the item belongs to a group. The group name has to be defined in a separate row.
3	Value Bool or NullableBool using column JaNein	Boolean value that is read if data type in column "Variable ID" is "`Bool`".
3	Value Bool or NullableBool using column JaNein	Boolean value that is read if data type in column "Variable ID" is "`NullableBool`".	Then the box is empty at the beginning thereby allowing to distinguish, whether false=Nein was entered or no entry was made.
4	Value DateTime Datum	DateTime value that is read if data type in column "Variable ID" is `DateTime`.	n/a
5	Value Float Werte	Float value that is read if data type in column "Variable ID" is `Double`.	n/a
6	Value String or Selection using Eingabetext	String value that is read if data type in column "Variable ID" is `String`.	n/a
6	Value String or Selection using Eingabetext	String value that is read if data type in column "Variable ID" is "`Selection`" or any other data type listed in Data types in HTML Form with data column index 6. The chosen val_id (= nr) is - after a selection in the Column "Werte". See code below for generating the dictionaries easily out of a comma separated list.	Text in column "Eingabetext" as a python- list with dictionaries ^[ ^{{"val_id" : 1, "val_text" : "Woche"},} ^{{"val_id" : 2, "val_text" : "Monat"}} ^] leads to:
7	Infotext Hinweise	In `Output`, `Input` and `Label` rows: Information text that is shown in the rightmost column of the form.
7	Infotext Hinweise	For `Group` it produces an additional row spanning all columns just below the group Header, e.g. for longer Texts
8	Data type Variable_ID	Data type of the item.	n/a
9	Usage art_type	Usage of the item. One of `Output`: Value is displayed and cannot be changed `Input`: Value is displayed and can be changed `Group`: No value required, Name is displayed as Group header (before 7.1: `Gruppe`) `Group selected`: Same behavior as `Group`, is set as internal state after group is clicked (before 7.1: `Gruppe selected`) `Hidden`: Item is not displayed `Label`:Behaves like an `Input/Output` with an omitted input box column	`Label`: Value of
10	Error text	Text that is displayed in red letters below the info text of column 6
11	Row style	String which specifies the CSS class styling of a row.	Default styles: disabled (gray) warning (yellow) error (red) left (align text in input to the left) right (align text in input to the right) Value `“stylename"` adds the following CSS class to the table row, which allows for changing the color in `custom.css`: `.row-style-stylename {` `background-color: white !important;` `color: green !important;` `}` Multiple styles can be added when separated by a space, e.g. `disabled left` results in adding `row-style-disabled` and `row-style-left` to the table row.

Example Editable grid

That’s how it may look like
Paste it in an Edit TIS Table 4.0 (TIS-Tabelle bearbeiten)	`Title ID Group Bool DateTime Value Float String or Selection Infotext DataType Usage ErrorText RowStyle` `My first form` `0` `01.01.1900` `00:00:00` `Gruppe` `Name` `0` `01.01.1900` `00:00:00` `String Input` `Nr` `0` `01.01.1900` `00:00:00` `String Input`

Advanced Settings

The form in simple_form.html is delivered by TIS. It can be customized in TISBoard/portal/simple-form/custom.css for branding (added to tisconfig).

Additional Infos

Generate the code for Selection out of comma separated text

Generate dictionary out of comma separated list

""" Für Elearning Aufbau der spezifischen Spalten"""
#C:\Repository\calculex\AZR_220828_simple_mains_und_Reste\simple_main_EL_Selection aufbereiten.py
 
import json
 
SPALTE_SELECTIONSTEXT = 'Eingabetext'
SPALTE_GRUPPE = 'Variable_ID'
 
 
def simple_main(params, mylist, types, columns):
    """Baut Spalteninhalt für SELECTIONSAUSWAL HTML FORM auf."""
    
    col_gru = columns [SPALTE_GRUPPE]
    col_sel = columns [SPALTE_SELECTIONSTEXT]
    
    # Werte in entsprechende Spalte
    for row in mylist: 
        
        if row[col_gru] == 'Selection':
            txt = row[col_sel] 
            liste_werte = (txt.strip()).split(',')
            # liste_werte = ['-'] + (txt.strip()).split(',') # adds the value - at the beginning of the list, so nothing is selected automatically.
 
            res = json.dumps( [ { "val_id": f"{i}", "val_text": el} for (i, el) in enumerate(liste_werte, 1)])
            
            row[col_sel] = res
            
    return myl
 
""" ZIELFORMAT
[
{"val_id" : 1, "val_text" : "Woche"},
{"val_id" : 2, "val_text" : "Monat"}
]
[
{"val_id" : 1, "val_text " : "x08:00"},
{"val_id" : 2, "val_text " : "x05:30"},
{"val_id" : 3, "val_text " : "x09:00"}
]
 
"""