List View Best Practices

Last Updated: Jul 08, 2016 11:05AM PDT

The List View is an organized list of all your form fields presented using sections and tabs for enhanced navigation on smaller screens. This document goes over the best practices around how to set up your List View.
  • See here for more on the distinction between Form View and List View.
  • See here for how to actually configure your List View in the Template Editor.
We recommend setting up your List View after you are all done with the Form View -- i.e. after you have added and positioned all your form fields and set field properties. This setup happens in the List View Preview area of the Template Editor.
The most important thing to remember when setting up the List View is that the List View Preview is not an exact representation of what your form will look like in the mobile app’s List View! Rather, it is a logical representation of how the form fields will be ordered into tabs and sections. For instance, take a look at the example below. The Parts field appears as a single line in the preview, but is 4 rows in the actual List View -- and each row expands to several more when you tap the + button! Table fields like this represent the biggest difference between the bpreview and the reality, but other fields differ as well.

List View Preview

Mobile App List View

For this reason, we recommend that you familiarize yourself with what different fields actually look like before setting up your List View. An easy way to do this is to simply create a form from your template before making any changes to the List View layout, open it on your smartphone, switch to the List View -- and just browse it to see what the various fields look like. This should give you a good sense of all your fields and should generate some ideas for how to break them up into tabs and sections. Beyond that, here are a few additional tips for guiding your List View layout:
  • Group fields logically. Use sections as a way to group similar fields, and tabs as a way togroup similar sections. For instance, in this example we grouped the fields Customer Name, Phone,Address, City, State, and Zip 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 right for this example. “Address” would not be descriptive enough, and “Customer name, address, and phone” wouldbe too long.
  • 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. As a rule of thumb -- try to keep your tabs to fewer than 15 fields, and keep your sections short enough to fit on a standard smartphone screen, as in this example.
  • Don’t stray too far from your form layout. If two fields are close together in the Form View, you will generally want to keep them close together in the List View as well -- otherwise it will be confusing for users filling out the form. For instance, you generally don’t want to place a field from page 1 of your form in the same section as a field from page 7 of your form.
  • Be careful with tables! A table might look like a single row in the List View Preview -- but it is a lot more than that in the List View, as we saw earlier! For tables with many rows, it may be useful to have the table be the only field in a section.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found