Controller types Table Estimated reading: 5 minutes 365 views 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 headingColumn heading textDefault valueDefault value in case cell does not include dataHiddenHide or show columnWidth %Width in %, out of 100% for the entire tablePrefixPrefix value for cell in case text applied to cellSuffixSuffix value for cell in case text applied to cellAlignAlignment: 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. BorderedDisplay table borders. StripedSeparate odd/even rows by background colorsHoverNumberingAutomatically add sequence number to each rowFont sizeControl Cells font size in %, relative to default fontCell padding top-bottomPad Table cells top and bottomCell padding left-rightPad 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 optionIt 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 breakPopulate Table with an APINormally, 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 ConnectorPopulating 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 addressNext. 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.NotesMake 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. Header and Footer row are not archived back and will displayed only on the result PDF. Controller types - Previous Location