Our platform offers two types of fields which are able to manage repeating data - Table and Page fields. The Table field is an advanced field that provides an inline tabular display of repeating data, and the ability to add and edit rows in the Table via a dedicated row page. Users add rows via a dedicated "Add New Row" button and can edit existing rows by tapping on the displayed Table row.
Table Basics
The columns of your Table are defined by the Form fields that you place within the Table field when using the Form Designer. By default, the Table will display columns for each inner field based on the order the fields appear within the Table field design. The background color, font size, and other aspects of these inner fields are incorporated into the column display of the Table.
You can choose to exclude fields from being displayed as columns via the "Disable Column Display" property found on all inner Table fields. In this way, you can choose which fields should act as columns in the Table's display.
The app automatically restricts the maximum number of columns displayed based on the device size. For phones, tables are limited to displaying a maximum of 3 columns. On tablets, the app allows up to 6 columns.
Tables also provide other configuration options. For example, you can customize the default "Add New Row" button as desired. The "New Row" button appears at the bottom of the Table display on the app, allowing users to add rows to the Table. When the button is tapped by the app user, the app navigates to a special row page that displays the fields you dragged into the Table design. Once the user has filled in one row, they can navigate back to the main Form page or can navigate forward to add another row to the Table. Note that the button may be invisible to the user depending on the app's colors. If the button is transparent and the text is the same color as the background, the user will not see it. Consider changing the colors right away to ensure visibility.
Using Formula Functions with Tables
As mentioned above, the Table field can be thought of as being a special kind of repeatable Page. This means that repeat-specific formula functions can be used with Table fields. For example, you can copy forward values from the previous Table row via the PRIOR('fieldname') function. You can also use SUM('field') and other such functions in fields outside the Table to perform aggregate calculations on Table fields.
Pre-populating Tables
Table fields can be pre-populated via our Task API and via inbound field parameters passed in via an "Open Screen" interaction launched from a prior Screen. Tables can be auto-populated from a Data Source using the Table control directly in the form.
In the example below, a Data Source called "Employees" was created with two columns: Email and Employee.
In the form, drop in a Table and specify the target Data Source. Note that filtering and updating are optional.
Create a field to represent each column that needs to be displayed in the table and bind them to the Data Source column.
Save the form and open it in the app. The table will pre-populate as shown below.
Current Table Limitations
Tables have some restrictions that should be noted when considering your Form design:
- Pre-populating tables from a Data Source is currently limited to 250 rows.
- Tables placed within repeatable Pages are not supported (in particular for Data Template outputs)
- Image/media fields do not currently display as columns
- Dedicated totaling is not currently available on Tables, though this will likely be added in the future.
Example
One of the properties of the Table field is NEW ROW BUTTON. This property can be seen on the right-hand side of the form designer when the Table field is selected. This can be used to customize the button to create a new row in the table. Even if this property is not modified, you can still add new rows to the Table field.
If the property is left blank, when opening the form on a mobile device, it will appear as follows:
Clicking on the image icon will allow you to modify the table - i.e., add, remove or edit rows in it. This will bring up the following:
You can now fill in the information you need. If you click on the image icon (red box with x), you will cancel the input for the current row. The application will ask you to confirm if you want to delete the entry. This applies to the row you are currently editing, even if it is a new row. If you press the image icon (back arrow), the information entered will be saved for the current row. For both icons, you will be returned to the page on which the Table field exists. Once you have filled in the data for a couple of rows, the page will look something like this:
To edit or delete a row, simply touch or click the row. This will bring up the same screen as for adding a new row to the table. Pressing the X will delete the row, and pressing the arrow in the right-hand corner will save any changes you made to the row.
If the NEW ROW BUTTON property is filled in, for example, like this:
The Plus icon would change to the new image (in this example a star), resulting in the following:
Clicking on the star icon would have the same effect as the plus icon had before.
Attached is a template of the form used in this example.
See also:
Making fields in a repeating table required