Data Table Panels

This article discusses different scenarios that Data Table Panels can be used, and how to use Data Table Panels to collect information

Data Table Panels

Data Table Panels, like Miniform panels, can be added to any part of your form. The purpose of using Data Tables in your smart form is to allow you to collect the same subset of data several times.

Here are several instances where a Data Table can be used:

Example 1: The user is required to enter multiple account’s information:

Screen Shot 2019-04-09 at 3.45.52 PM

Example 2: The user is required to enter information for multiple dependents:

Screen Shot 2019-04-09 at 3.48.13 PM

Example 3: The user is filling out a vaccination form for several members of their family

Screen Shot 2019-04-09 at 4.04.12 PM

Using a Data Table Panel

Once you’ve added a Data Table panel into your graph view, the editor will open up. Much of the content is similar to what you would see in a MiniForm, so we will just touch on specific items unique to the Data Table Panel.

Screen Shot 2019-04-09 at 4.31.51 PM

One thing to note is when the editor opens up, nothing shows up in the preview on the right. You will need to add in a “Table Binding” name to be able to see your updates.

Table Binding

This will be the name of the table. Use only lowercase letters, no symbols and don't end with a number.

Add Row Button Label / Delete Row Button Label

These are the labels of the “add” and “delete” buttons of the table row. This can be text or font awesome symbol.

Row Label / Row Label Placeholder

Row label is name that is assigned to the particular row the user is in when the row is minimized. You can use text or number (e.g. Account Number), but we usually recommend using a unique element that you will yield from the data collected within this row as an identifier for the row.

Row Label Placeholder is the generic name used for the row (in this case, Your Account), and it is shown when the row is expanded.

Screen Shot 2019-04-09 at 4.49.35 PM

In this example, the row label is { { accountnumber } }. So this is what it shows when the row is minimized.

Screen Shot 2019-04-09 at 5.01.14 PM

Minimum Rows / Maximum Rows

These fields allow you to dictate the range of rows you allow the users to fill out. The default is a minimum of 0 rows, and a maximum of infinity. Meaning the user can have no rows in the panel, or 300.

We suggest that a limit is put in place for both ends of the range to suit your business needs. It’s nice to offer a user to add 100 different accounts in their bank change form, but if the usual range that someone using the form would normally fill out is 2 or 3, your maximum row length should suit that range. Another way to approach this, if you’re mapping to an existing PDF template, is limiting to the number of rows in the table of the PDF.

Here’s a short video on how a Data Table with a maximum of two rows look like. The “add” label disappears once the user has hit the maximum number.

HubSpot Video

Display Row Number

Enabling this field will display the row count to the left of the row label.

Screen Shot 2019-04-09 at 5.09.45 PM

Adding Fields

You have the same set of options for field types in the Data Table panel as you do in the Mini-form panels, and you can add as many as you like.

Screen Shot 2019-04-09 at 5.08.41 PM

For field binding names in Data Tables, keep it simple and one singular string (e.g. firstname) as opposed to how data binding names are set normally (e.g. applicant.firstName). Based on the example we’ve shown so far, this is how the full binding name looks for each field in Data Tables:

Institution Name = client[X].institution

Account Type = client[X].accounttype

Account Number = client[X].accountnumber

Branch Number = client[X].branchnumber

The X represents the index number of the Data Table row. So the first row would be [0], the next would be [1]. As you can see, the data binding names can be very long so as you’re naming your table and its fields, keep in mind the structure of the full data binding name.

Note: while it might seem convenient to collect a large amount of data using Data Tables, the purpose of the smart form is to provide a good user experience by not overwhelming them with excessive amounts of content.