Build a List View layout of your Form using the List tab in the Template Editor’s builder area.
As you build your List View, you can make use of the undo and redo buttons in the upper right. The undo functionality allows you to go back up to 20 steps.
Layout: tabs and sections
List View layout is based on tabs and sections. Tabs are the top-level grouping. Each tab contains one or more sections, and each section contains some number of fields. The tools for building this layout are intuitive and rely heavily on drag-and-drop functionality.
You can also use the Auto Build button to automatically bring all your Form View fields into the List View, and create a default layout; more on that in the Auto Build section below.
Tabs
Tabs are the top-level grouping in the List View.
To add a tab, click the Add Tab button to the left of the tabset. The new tab will appear at the end of the tabset, with a generic name.
To rename a tab, select it and type in a new name in the Tab Name property of the Properties panel on the right.
To reorder tabs, drag a tab to the left or right within the tabset, and drop it in its new location.
To delete a tab, remove all sections from the tab, then click the delete tab link that shows up.
Sections
Sections reside within tabs and contain fields.
To create a new section, click on an "Add Section" divider shown in the Template Editor. By default, all new sections will be named "Unnamed Section".
To rename a section, simply click on the current name and start to type or select it and type in the new name in the Section Name property of the Properties panel on the right.
To reorder sections, drag and drop a section up or down within the tab or use the arrow shown to the right of the section name and description.
To move a section to another tab, drag and drop the section onto the tab name.
To delete a section, click the X in the actions menu to the right of the section name and description
Add, delete, or move fields
To add a field to your List View, drag the desired field from the Template Fields panel on the left into the Template Builder area in the middle. You can drag the field into the desired position in the list, or drag it into the tab where you want it to appear.
In the example below, the Text field from the Add New Fields area is being dragged into the form underneath the “Customer Information” heading.
To delete a field from the List View, simply select the field and press the [Delete] key on your keyboard. You can also [Shift]-click multiple fields to select them, then press [Delete] to delete all selected fields.
The deleted fields stay in the Template Fields area on the left, so you can always bring a deleted field back into your form if you change your mind.
To move a field within the layout, simply drag-and-drop it to wherever you want it to go or use the up and down arrows to the right of the field. You can drag your field to a different position within its section, to a different section, or drag it onto a tab name to move it to that tab.
As with deletion, you can perform these operations on multiple fields — just [Shift]-click them to select.
Auto Build
You can build your List View automatically by clicking the Auto Build button at the top. This will create a copy of all your Form View fields within the List View. The layout will contain a tab for each page in your Form View; each tab will have a single section listing all the fields on that page, as shown below with the Work Order form.
This is a great starting point if you want the List View to contain all the same fields as the Form View — but it is not an ideal layout.
You don’t have to use the Auto Build button on an empty List View — you can use it when the List View already has some fields in it.
This will bring over any Form View fields that are not already in the List View. In the scenario pictured below, we added “Supervisor Signature” and “Supervisor Sig Date” fields in the Form View, and used the Auto Build button to bring them over to the List View.
They can now be moved to wherever we want them within our List View layout.
Editing field look and behavior
A field’s look and behavior are controlled via field properties. Click your field in the Builder to bring up its properties in the dynamic Properties panel on the right. Since the List View is a standardized view, the only Display property available is the Visible property which lets you show/hide the field.
Best Practices
Now you know everything you need to know for building out a List View for your form! But it may still be a daunting task to figure out how to best organize all your fields, especially for longer forms. Below are a handful of best practices for how you might approach this task.
Use Auto Build as a starting point if you want parity between Form View and List View.
If you want your List View to contain all the same fields as your Form View, the easiest way to accomplish that is to build out your Form View first, then use the Auto Build buttons to bring all your fields into the List View, then lay out the List View using the rest of these best practices as a guide. We do not recommend keeping the Auto Build layout in most cases, but it is a great starting point. When adding fields to your form, the same holds true — Auto Build to bring your Form View fields into the List View, then put them into the right tabs and sections.
Always test out your List View in the mobile app and the Web Form Editor before deploying your form!
This is important because the List View Builder does not give an exact representation of what the List View will actually look like when you are filling it out in the mobile app or the Web Form Editor — so testing it will help you avoid any surprises.
For instance, take a look at the example of List View on the mobile app below. You might notice two things right away: The Parts table has 4 rows underneath it in the mobile app, despite only having a single line in the Builder.
Checkbox Groups have a similar issue — they will have a separate line for each option. These fields end up taking up a lot more space in the app than they do in the Builder. There are a handful of fields — Discount, Subtotal, Tax, etc. — that do not show up in the mobile app. This is because we set the Visible property to No for these fields.
Group fields logically.
Use sections as a way to group similar fields, and tabs as a way to group similar sections. For instance, in this example we grouped the fieldsCustomer Name, Phone, Address, City, Email, and State into a section called Customer Information.
Keep tab/section titles descriptive, but short.
Ideally, a user should immediately understand what the fields in a tab/section relate to based on their titles — but at the same time the titles should not be too wordy. “Customer Information” feels just about right for this example.
Keep your tabs short, and your sections shorter.
It should be easy for a user to go through a tab without losing track of the information they are filling out. Keeping your tabs and sections short accomplishes this. Keep your tabs to fewer than 15 fields, and keep your sections short enough to fit on a standard smartphone screen.
