Data grid
The 'Data grid (list)' form element is available only in the form editor for portals.
It offers the possibility to visualize, search or evaluate sorted entries, which are available as list structure (e.g. array).
The following settings can be made for a data grid:
Load items from Datafield: Defines whether the entries for the individual columns of the grid are to be loaded via the data field of the columns defined under 'Common' (alternatively – if option not selected – the grid can be filled with data via the action 'Grid: Fill').
Allow multiple selection: Specifies whether it is allowed to select multiple rows in the table (see also 'Items selected' or 'Item selected' trigger).
Exportable: Specifies whether it is allowed to export the grid content as CSV or HTML. If the option is checked, the user gets access to the export functionality in the burger menu of the grid via the export icon (arrow):
Enable filters: Specifies whether filters for restriction and search can generally be used in the table. The type of filter component (text, date, etc.) can be configured in the column settings.
Enable paging: Specifies whether paging (splitting records across multiple pages) should be enabled for the table. If the checkmark is set, the input field is activated.
Page size: Number of records to be displayed per page. If paging is enabled, the corresponding footer is automatically displayed in the grid:
Columns: Columns can be added, removed and re-sorted via drag & drop. The re-sorting can also be done directly in the editor area with drag & drop of the grid columns.
Columns can be added, removed and re-sorted via drag & drop. The re-sorting can also be done directly in the editor area with drag & drop of the grid columns.
By double-clicking on a column in the list (7), the editor navigates directly to the corresponding column settings.
The column settings can also be accessed directly in the form by clicking on the settings icon (cogwheel):
Column settings
|
Data field |
The values of the column are obtained from the specified data field. |
||||||
|
Label expression |
The optional label expression allows to concatenate the values of multiple data fields into a new text. Example for "{id}_{name}": ►NOTE◄ id and name are references to the data field of the table and to the key in the JSON Struktur, respectively.
More auxiliary functions for text output and manipulation can be found in the following article: Calculation expression. |
||||||
|
Text align |
Defines the text alignment of the cells in a column. Possible options are: Left aligned (default)
Right aligned |
||||||
|
Header word wrap |
Controls the behaviour of how the column heading text is wrapped. The possible options are listed using the following text example:
|
||||||
|
Word wrap |
Controls the behavior of wrapping text in a cell of the column. For details, see 'Heading – wordwrap'. |
||||||
|
Filter component |
Defines the type of column filter. Available options are: Text – Full text search with wildcards (*,%,>,<) Date/Date range – To filter by time periods or specific days. Selection box – Lists all the different values that can occur in the column. Checkbox – For filtering binary values. |
||||||
|
Footer operation |
Defines a numeric footer function for the selected column. This will only be visible if the 'Footer visible' option has been activated in the data grid. The names of the functions are self-explanatory. If the field is cleared, no footer function will be activated for the column either. When the footer function is activated, additional parameters are automatically offered (see below). |
||||||
|
Footer operation: Thousands separator |
Activates/Deactivates the thousands separator for numbers greater than or equal to 1000 (example: 1,000) |
||||||
|
Footer operation: Precision |
Specifies the number of decimal places for the footer function result. The result is rounded up from half a decimal place, otherwise it is rounded up from. Example: 12.1453 with 2 decimal places 12.15 |
||||||
|
Allow HTML |
Defines whether the content of a cell should be evaluated as HTML markup. Security related parts, such as scripts, will be removed. ►NOTE◄ This option should only be activated if it is actually needed, because any content is parsed by the browser as HTML markup code. Application example:
Result:
|
||||||
|
Image column |
As soon as a column is defined as an image column, its cell value is interpreted as an image URL and the corresponding image is displayed for it. If the 'Image column zoomable?' option is also activated, the user can click on the image cell to display an enlarged version of the image. Example:
|
||||||
|
Content padding |
The option Content padding defines whether the cells of the column keep an inner distance to the grid. If this option is deselected, the content can completely fill the cell in the grid. This can be especially desirable for images or HTML content. Example: Images are to be displayed in an HTML column, which are created as HTML content: <image src="..."/>). The screenshots show the display on the left with and on the right without the option Content padding:
|
||||||
|
Is numeric |
Determines whether the column displays numeric values. If active, more related options will be available, such as "Thousands separator" and "Precision" |
||||||
|
Thousands separator |
Defines whether a thousands separator should be displayed in the rendered number (only available if "Is numeric" is set) |
||||||
|
Precision |
Defines the number of decimal digits of the rendered number (only available if "Is numeric" is set). If the value is empty, only the necessary digits will be displayed |
Clear a data grid
The action 'Grid: Clear' clears the linked data grid.
Add/remove row
The action 'Grid: Remove row' removes the row from the grid that corresponds to the input data of the action. e.g. In combination with the behaviour 'Selected item of grid'.
The action 'Grid: Add row(s)' adds a row to the grid. The row data corresponds to the input data of the action, e.g. in combination with the Validate element behaviour linked to a container.
Fill a data grid
A data grid can be filled via the action Populate element data and with the action 'Grid: Fill'.
Populate element data – Fills the grid using the JSON Struktur of a data field (see example below). The property 'Load items from Datafield' must be activated.
Grid: Fill – Fills the grid based on a list of entries independent of the grid's data field.
For both variants, the data fields of the columns are used to represent the corresponding data of a row.
Example with 'Populate element data'
A _data profile named "getListDetails" returns the data of the whole form in JSON format:
{ "list":{ "listname":"Autoteile", "listitems":[ { "id":"1", "name":"Auspuff", "description":"Durchmesser: 20mm", "image":"assets/examples/itemlist/exhaust.jpg" }, { "id":"2", "name":"Lenkrad", "description": "Minimalausführung", "image":"assets/examples/itemlist/steeringwheel.jpg" }, { "id":"3", "name":"Tür (Vorne links)", "description":"Farbe: rot; Türheber elektrisch", "image":"assets/examples/itemlist/cardoor.jpg" }, { "id":"4", "name":"Tür (Vorne rechts)", "description":"Farbe: rot; Türheber elektrisch", "image":"assets/examples/itemlist/cardoor.jpg" } ] }}In the file shown above, "listitems" contains the list of rows for the data grid. Thus, the data field of the grid is set to 'listitems' accordingly. The keys of the row objects, on the other hand, correspond to the data fields of the columns.
The following screenshot shows the configuration of the data grid for this example.
Image: Shows the configuration for this example (labels correspond to the data fields.)
The form now calls this profile via a behaviour triggered by the 'Form data loaded' event and executes the 'Populate element data' action without a linked element. Thus, the data shown above is applied to the entire form.
The screenshot below shows the result of the configuration when the portal is loaded.
Useful behaviour
|
Behaviour name |
Description |
|
Selected row of a grid |
Returns the object of the selected line to the actions |
|
Selected rows of a grid |
Returns the selected rows as a list of objects to the actions. Always returns a list |