Table List

Overview

Table list is a handy form object designed to display and edit an array of values in a list. You can add rows, delete rows and reorder rows.

Creating a table list object

When creating a table list, you may choose the name of the object. You may also choose if you want to activate the list actions i.e Add Row, Delete Row Reorder Row

To add a column in your table list, simply drag form object into the table list object. You may resize the column by moving you mouse in the right part of the column header

Automatic data mapping

When loading a form with a table list, the system will automatically look for an array having the same name as the key of your table list and will display it.

When saving a form containing a table list, the system will create or update an array whose name is equal to your table list key.

Exemple

Let say we have a json array containing 3 columns.

gc.my_array = [ 
        { 
            "column_1": "value1 of 1", 
            "column_2": "value1 of 2", 
            "column_3": "value1 of 3" 
        },
        {
            "column_1": "value2 of 1",
            "column_2": "value2 of 2",
            "column_3": "value2 of 3"
        }   
    ]

Our form is defined to only show 2 columns from my_array.

WHen the form is displayed the automatic mapping will display the 2 columns of the 2 rows.

After adding a row in my form, and saving the form, the context value of my_array contains the following data. Column 1 and 3 contains entered data, while column 2 has been preserved and is still in my_array.

[
        {
            "column_1": "value1 of 1",
            "column_2": "value1 of 2",
            "column_3": "value1 of 3",
            "__id__": "1a6bf7fd-5434-4a73-8958-1a3cefd8c321"
        },
        {
            "column_1": "value2 of 1",
            "column_2": "value2 of 2",
            "column_3": "value2 of 3",
            "__id__": "ab5d4541-9eb0-4d69-b073-a259a66826cb"
        },
        {
            "column_1": "new row",
            "column_3": "value3",
            "__id__": "5cddeb82-a5e9-4d4d-82bf-16915ccb3779"
        }
    ]