Table / Data Grid
Last Updated: August 19, 2021
When building a form, you can also add a table where users can keep adding entries in multiple rows. You can create multiple grids in a form. To add a table, expand the (˅) down arrowhead at the bottom of a section, then select Table. You can add as many columns as you need and use different form elements in each column, then configure each column's properties accordingly.
Let us create a table for Leave Details as an example composing of the following fields:
Leave Type (Dropdown)
Start Date (Text Field, Date Input)
Length of Leave (Text Field, Text Input)
Reason (Text Area).
Once you are done configuring your table, you might as well check out its web preview to test out how it actually works. You might need to recall information in your system while filling out a form. The Data Grid can pre-fill some fields depending on who logged in. You can then add more data entries as needed. If you have more than 6 columns in your grid, you will need to scroll to see the other elements in the table.
If you are dealing with tables that require computations be it measurements, costs, or other fees related to your form, you may also add Total or Subtotal fields in the Data Grid. As an example, let us create a sample Order Request Table that has two Product fields and a Total field that will display the sum of both products.
To do this you must first have:
at least two columns that accept Number inputs
one column that has a Label element to configure the Formula Builder
existing record with a list of items and their corresponding number value (measurement, cost, quantity, etc.)
Step 1: Create a Record App similar to the Inventory Pricing Record below where the items and their corresponding prices are listed.
Step 2: Create a Workflow. On the Form Builder, add a Table with three columns. You may drag either two (2) Dropdowns or Radio Buttons and one (1) Label element. For this example, drag two Dropdowns into the columns.
Step 3: Then, configure the Dropdown elements as shown below:
Fill in appropriate Field ID and Place Holder names
Enable Use External Dataset and Use in Expression Builder
Dataset: Inventory Pricing (Record app where your item list is stored)
Display Column: ProductName (Field ID from your selected Dataset that will be displayed as choices for your Dropdown element)
Value Column: Price (Field ID from your selected Dataset that has the numerical value that will be used to generate the Total)
Also do the same configuration for the second Dropdown element and click Save.
Step 4: Configure the Label element as shown below:
Fill in appropriate Field ID and Place Holder names
Enable Has Lookup to enable Formula Builder
Add another Expression in the Formula Builder and configure the following elements:
Expression 1: Control - Product 1 (The first field where we will get our value from)
Expression 2: Operator - Add (+) / Control - Product 2 (The second field where will get our value from)
Note: Your fields will not appear in Control in the Formula Builder if you have not enabled Use in Expression Builder on your Dropdown fields in Step 3.
Once all configurations are set, click Save.
Step 5: Go to the Desktop view to check if selecting each item on the Form displays the correct amount and if selecting two items displays the Total amount
PREVIOUS ARTICLE: 2.8: Grids
NEXT ARTICLE: 2.8.2: Reference Table/Lookup Grid
Need more help? Send us an email at customersuccess@quickreach.co, or send us a message on the chat widget.
Table / Data Grid
When building a form, you can also add a table where users can keep adding entries in multiple rows. You can create multiple grids in a form. To add a table, expand the (˅) down arrowhead at the bottom of a section, then select Table. You can add as many columns as you need and use different form elements in each column, then configure each column's properties accordingly.
Let us create a table for Leave Details as an example composing of the following fields:
Leave Type (Dropdown)
Start Date (Text Field, Date Input)
Length of Leave (Text Field, Text Input)
Reason (Text Area).
Once you are done configuring your table, you might as well check out its web preview to test out how it actually works. You might need to recall information in your system while filling out a form. The Data Grid can pre-fill some fields depending on who logged in. You can then add more data entries as needed. If you have more than 6 columns in your grid, you will need to scroll to see the other elements in the table.
Adding Totals or Subtotals in the Data Grid
If you are dealing with tables that require computations be it measurements, costs, or other fees related to your form, you may also add Total or Subtotal fields in the Data Grid. As an example, let us create a sample Order Request Table that has two Product fields and a Total field that will display the sum of both products.
To do this you must first have:
at least two columns that accept Number inputs
one column that has a Label element to configure the Formula Builder
existing record with a list of items and their corresponding number value (measurement, cost, quantity, etc.)
Step 1: Create a Record App similar to the Inventory Pricing Record below where the items and their corresponding prices are listed.
Step 2: Create a Workflow. On the Form Builder, add a Table with three columns. You may drag either two (2) Dropdowns or Radio Buttons and one (1) Label element. For this example, drag two Dropdowns into the columns.
Step 3: Then, configure the Dropdown elements as shown below:
Fill in appropriate Field ID and Place Holder names
Enable Use External Dataset and Use in Expression Builder
Dataset: Inventory Pricing (Record app where your item list is stored)
Display Column: ProductName (Field ID from your selected Dataset that will be displayed as choices for your Dropdown element)
Value Column: Price (Field ID from your selected Dataset that has the numerical value that will be used to generate the Total)
Also do the same configuration for the second Dropdown element and click Save.
Step 4: Configure the Label element as shown below:
Fill in appropriate Field ID and Place Holder names
Enable Has Lookup to enable Formula Builder
Add another Expression in the Formula Builder and configure the following elements:
Expression 1: Control - Product 1 (The first field where we will get our value from)
Expression 2: Operator - Add (+) / Control - Product 2 (The second field where will get our value from)
Note: Your fields will not appear in Control in the Formula Builder if you have not enabled Use in Expression Builder on your Dropdown fields in Step 3.
Once all configurations are set, click Save.
Step 5: Go to the Desktop view to check if selecting each item on the Form displays the correct amount and if selecting two items displays the Total amount
RELATED ARTICLE(S):
PREVIOUS ARTICLE: 2.8: Grids
NEXT ARTICLE: 2.8.2: Reference Table/Lookup Grid
Need more help? Send us an email at customersuccess@quickreach.co, or send us a message on the chat widget.
Updated on: 19/08/2021
Thank you!