Table

Table is a read only element that can be applied to HTML forms. Table can be populated with data through an API or by Lookup Connector (fetching from remote source such as database or Salesforce application).

How to implement a table?

In template studio, grab Table element from the right pane and drag it into the form. It’s recommended that a table will be applied to full width column.

To setup a table click on the Values and Display tab and apply columns to table. In this example we are constructing a table for Orders that will have columns: Order ID, Name, Amount and Shipped.

Configuration

Table column configuration includes the following attributes:

Column heading	Column heading text
Default value	Default value in case cell does not include data
Hidden	Hide or show column
Width %	Width in %, out of 100% for the entire table
Prefix	Prefix value for cell in case text applied to cell
Suffix	Suffix value for cell in case text applied to cell
Align	Alignment: Auto [Based on language], Right, left, center or justified

Apply footer row

Check “Apply footer row” at the bottom. Checking it will open two additional columns to the table above:

“Footer type” and “Footer value”.

• Use footer type “Text” to add textual value to footer
• Use “Sum” to calculate the values from column above

“Sum” function will calculate the column above given that the values are numeric or blank only. If one of the values is a letter, a SUM result will not be displayed.

Value precision (decimal point) is not rounded and will display the SUM value with comma separator and result precision.

Design

For table design, click on Design tab and check design settings. “Add numbering” will add ordered numbers to table rows automatically.

Bordered	Display table borders.
Striped	Separate odd/even rows by background colors
Hover
Numbering	Automatically add sequence number to each row
Font size	Control Cells font size in %, relative to default font
Cell padding top-bottom	Pad Table cells top and bottom
Cell padding left-right	Pad Table cells left and right

For table design, click on Design tab and check design settings. “Add numbering” will add ordered numbers to table rows automatically.

Now that table configuration is done, let’s see how to populate it with data.

Collapsed design option

It is advised to use collapsed option when table is over 6 columns, other part of the table might exceed the page and will not be displayed. Please test your configuration prior to deployment in production.

Known issue for rendering to PDF: Wrapping table border may exceed on page break

Populate Table with an API

Normally, when session is created via API, you are able to inject values into form fields. Table can also be populated with values by accepting Array of Arrays. In this example we will inject data into orders table. We have configured a four columns table: Order ID, Name, Amount and Shipped, so the value for inject could be as in this example:

[
 ["KL-12345-A","Disk on key Type-A","$15.23","Yes"],
 ["RR-87778-F","Wireless headset","","Yes"],
 ["JF-99087-D","Mechanic keyboard","$45.17","Yes"]
]

Note that we have not included Amount on the second row. This should be populated by the default value.

For security reasons, you will need to Stringify this value, so eventually injecting table dataset to API should look like the following:

{
	"template": {
		"id": "your-template-id"
	},
	"initial": {
		"Orders": "[[\"KL-12345-A\",\"Disk on key Type-A\",\"$15.23\",\"Yes\"],[\"RR-87778-F\",\"Wireless headset\",\"\",\"Yes\"],[\"JF-99087-D\",\"Mechanic keyboard\",\"$45.17\",\"Yes\"]]"
	}
}

Inside the form our table will be displayed like so:

Populate a Table via Connector

Populating a table with a connector is more flexible then populating with an API. With connectors, tables can be populated dynamically with real time data from your database and also in response to user engagement with the form.

For example, lets assume that on our Salesforce application we have Account table Contact table. Each Account may have one or more contacts. We would like to display list of contacts per account.

**** and remote client will insert his Account ID, in return orders table will be populated automatically with open orders. when clicking on an order row, a subsequent table or set of fields will display the order items for further engagement.****

Let’s see how this is done.

First we need to configure a table. Same as above, for API that includes contact name, phone and mailing address

Next. On template studio, click on Integrations, then Connectors. (See reference for connectors for more details)

Let’s add a LIVE connector that would lookup on Contacts object.

Note that we have configured “Select multiple records” when query result yields more than one record. In this case we want to apply multiple records to the table.

Note that lookup is triggered when user “Change” account ID field, in response “Contacts” table in form will be populated with values from “Contacts” table. When Form field of type “Table” is selected for mapping, the connector will display the entire column set for mapping.

Notes

1. Make sure to build your table with minimal columns, otherwise the reminder of your table may end up with not visible both on form and PDF result.
2. Header and Footer row are not archived back and will displayed only on the result PDF.