Tables

Tables are a special field type that allows you to create a table with a variety of field types available as columns. Tables can have repeatable rows or have a fixed number of rows.

Settings

Editing a Table in the Form Designer

1. Select the field on the canvas, and the options will appear in the right pane.
2. Under Field label, enter the field label that will appear next to the table on the form.

   Note: The header for a table in a form is an h2 header, not an h1 header. Only the header of the form can be an h1 header.

3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
4. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text.
5. Under Row deletion select Confirm deletion if you would like to require that users confirm when they wish to delete a row.
6. Under Table view settings, Select Enable pagination (default is selected) and set the number of rows to be displayed using the Pagination page size field. Select Enable search (default is selected) to make make the table searchable.
7. To configure advanced options, click the Advanced tab.
• Under Row settings, you can choose if a table will have a fixed number of rows or if users can add rows.
• Range of rows: Select this option to allow the table to have a range of rowa. This option is helpful in the following situations
• If you want the table to have a set minimum number of rows and then allow users add up to a maximum number of rows.
• If the table is being populated with data from a data source or a variable, then you might not know the exact number of rows being populated, so setting a range allows for some flexibility. In this situation, the minimum number of rows specified will always be displayed, even if you don't have enough values from the data source or variable to fill it (blank rows will be added until the minimum is reached). Users can always manually add rows up to the maximum number specified. If the number of rows returned by the data source or variable is the maximum number of rows or higher, the number of rows will be capped at the maximum, and users won't be able to add rows.

Tip: Leave the maximum value blank to return all rows from the data source or variable and let users add an unlimited number of rows.

• Fixed number of rows: Select this option to specify the number of rows in the table. If the table is being populated from a data source or variable, the results will be capped at this number of rows. If fewer than this number of rows are returned from a data source or variable, the remaining rows will be left blank. Users cannot add rows with this option.
• Append rows to the rows populated by a data source or variable: Select this option if you want to return all rows from a data source or variable and append rows to the bottom of that list. In the minimum text box, specify the number of rows that will be automatically added to whatever rows are returned by the data source or variable. In the maximum text box, specify the total number of rows that can be added to the rows returned by the data source or variable. Users will be able to add up to this number of rows by clicking the add set link. Set both these numbers to zero if you only want to display all the lookup or variable results and not let users add to the table. If desired, change the Text for add set link value.

Note: If the table is a variable from another form, it is populated differently depending on whether it has lookup rules.

• If a lookup is configured for the table, the looked up values will replace all existing values.
• If an auto-suggest lookup rule is configured and the suggestions are different than the variable values, the field will be blank.
• If an auto-suggest lookup rule is configured and the variable has a value that is in the list of auto-suggested values, the value won't change.
• If no lookup is configured for the table, the variable values will be displayed according to the options configured above.
• Under Row label settings select Show row label to enable row labels and set label options.
  • Under Column name for row labels, specify the row header text for the label column.
  • Under Column size, specify the width of the column as a percentage of the table width.
  • Under Row labels, specify the name for each row. If users can add rows to the table, "{n}" will increment based on the number of rows
• Under Tooltip, specify the help text that will appear when users hover over the field.
• Under CSS classes, specify the CSS classes to assign this field. Learn more about using CSS.
8. To configure field specific rules, click the Rules tab.
9. Your field changes will be applied to the form automatically.

Note: Column labels will be controlled by the fields that are used to create the columns.

Note: The labels, tooltip, text above, and text below settings in the form designer support the use of simple HTML markup for formatting purposes.

Editing a Table in the Classic Form Designer

1. Select the table on the canvas and click Edit.
2. Under Field label, enter the field label that will appear above the table on the form.

   Note: The header for a table in a form is an h2 header, not an h1 header. Only the header of the form can be an h1 header.

3. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text.
4. Under Variable, specify a name for the field variable associated with this table. If you do not specify a variable name, Forms will automatically assign the table one based on its label.
5. Under Column label, specify the name for each column.
6. In the drop-down list next to each column label, specify the field type for that column. You can also specify the column's relative width by filling in the Percent text box to the right.

   Tip: You can rearrange the column order by dragging the button to the left of a column to the appropriate location. In Forms 10.0, you can drag the button.

7. To edit each column field's settings, click the Field options button to its right. This button lets you edit the fields in the column just like you would any other field of that type. In addition to the options specific to each field type, fields in a column have the following additional options:
   • Required: Users must fill out at least one row in this column.
   • Read-only: All fields in the column are read-only. If a user manually adds rows to the table, the added fields in this column will be read-only and will show their default values (if they have them).
   • Previous data or new lookup data will be read-only, but user-added rows will be editable: This option lets you use data from a previous form or a lookup and then display that data as read-only.Users are still able to add and edit rows in the table. This is useful when you want a form user to see data before allowing the form user to add data to the table.
8. To add a column, click Add a column.

Tip: If you added this table as a variable from another form, and then edited the original table by adding more columns, you can add those extra columns to this table by clicking Add a column from variable.

9. Under Row options, select if the table will have a fixed number of rows or if users can add rows to the table as needed.
   • Fixed rows: Select this option to specify the number of rows in the table. If the table is being populated from a data source or variable, the results will be capped at this number of rows. If fewer than this number of rows are returned from a data source or variable, the remaining rows will be left blank. Users cannot add rows with this option.
   • Range of rows: Select this option to allow the table to have a range of rows. This option is helpful in the following situations
     •  If you want the table to have a set minimum number of rows and then allow users add up to a maximum number of rows.
     • If the table is being populated with data from a data source or a variable, then you might not know the exact number of rows being populated, so setting a range allows for some flexibility. In this situation, the minimum number of rows specified will always be displayed, even if you don't have enough values from the data source or variable to fill it (blank rows will be added until the minimum is reached). Users can always manually add rows up to the maximum number specified. If the number of rows returned by the data source or variable is the maximum number of rows or higher, the number of rows will be capped at the maximum, and users won't be able to add rows.

     Tip: Leave the maximum value blank to return all rows from the data source or variable and let users add an unlimited number of rows.

   • Append rows to the rows populated by a data source or variable: Select this option if you want to return all rows from a data source or variable and append rows to the bottom of that list. In the minimum text box, specify the number of rows that will be automatically added to whatever rows are returned by the data source or variable. In the maximum text box, specify the total number of rows that can be added to the rows returned by the data source or variable. Users will be able to add up to this number of rows by clicking the add row link. Set both these numbers to zero if you only want to display the all the lookup or variable results and not let users add to the table.

Note: If the table is a variable from another form, it is populated differently depending on whether it has lookup rules.

• If a lookup is configured for the table, the looked up values will replace all existing values. Columns not included in the lookup won't be affected.
• If an auto-suggest lookup rule is configured and different values are configured for the auto-suggestions than the original auto-suggestions, the field will be blank.
• If only one auto-suggestion is available, that auto-suggestion will fill the field.
• If the variable has a value that is in the list of auto-suggested values, the value won't change.
• If no lookup is configured for the table, the variable values will be displayed according to the options configured above.
10. Specify if you want to show or hide row labels.

If you show the row labels, you can

• Give the column in which the row labels appear a name and specify its relative width under Percent.
• Specify the name for each row. If users can add rows to the table, "{n}" will increment based on the number of rows.

Example: If you type "Vehicle {n}" in the Row labels text box, the first row will be labeled "Vehicle 1," the second row will be labeled "Vehicle 2," etc.

11. To configure advanced options, click the Advanced tab.
• Under CSS class, specify a CSS class to assign this table. Learn more about using CSS.
• Next to Table width, specify the overall width of the table.
12. When you are finished editing the field settings, click Done. Your changes will be applied to the form automatically.

Using JavaScript with tables

Classic designer only: You can use JavaScript to make a table's appearance or behavior change dynamically depending on form inputs. See Customizing Tables for more information.