How can I make my Loop Screen look like a Table in the Advanced Form Builder?

Loop Screens have a default layout of Labels Above, which is exclusive to the Advanced Form Builder. But what if you want your users to view the Loop Screen as a table? Grids are the answer!

Loop Screens are commonly used for inspection checklists and recording line items for invoicing, because they allow users to add as many items as they need without a limit. The Grid style adjusts the user's view on mobile so it looks like a table they are used to seeing on a paper form.

Note: The Grid style Loop Screen is not available in Builder BETA because all Loop Screens are automatically Tables in the new experience, making grids redundant. 

Enabling Grids

1. Either select an existing Loop Screen or add a screen and loop it.

2. Select the Settings gear icon on the left-hand side to access Screen Settings.

3. Select Grid from the Style dropdown menu.

4. Publish the changes to update the form.

Previewing Grids

At the bottom of the center form preview, click Preview Grid for a sense of how this will look on mobile. Remember, the number of rows in the grid will bet determined by how many items added.

Pre-populated Grids

The Grid style discussed above works best when only a few items from the drop down will be added to the loop screen. Pre-populated Grids automatically show the mobile user all items available in the drop down from the start.

Pre-populated grids are best used when all or most items in the drop down will be needed when completing the submission. It saves time because the mobile user will only need to delete rows that are not needed as opposed to adding each row as needed.

When previewing a Pre-populated Grid in the Form Builder, only the default presets will show so be sure to test out this functionality on a mobile device.

The steps to choose Grid (pre-populated) are the same as above:

1. Either select an existing Loop Screen or add a screen and loop it.

2. Select the Settings gear icon on the left-hand side to access Screen Settings.

3. Select Grid (pre-populated) from the Style dropdown menu.

4. Publish the changes to update the form.