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.
Grids
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 screen style defaults to Labels Above but Grids are more familiar in appearance and functionality for many use cases.
- Either select an existing Loop Screen or add a screen and loop it.
- Select the Settings gear icon on the left-hand side to access Screen Settings.
- Select Grid from the Style drop down menu.
-
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:
- Either select an existing Loop Screen or add a screen and loop it.
- Select the Settings gear icon on the left-hand side to access Screen Settings.
- Select Grid (pre-populated) from the Style dropdown menu.
-
Publish the changes to update the form.
Please Note
Grid and Grid (pre-populated) are not compatible with Advanced Loops. The primary Loop, or any Loop that has an advanced structure within an Advanced Loop, can only be in the Style of Labels Above. However, the innermost or any standalone Loop within an Advanced Loop can be in the style of Grid or Grid (pre-populated) because they display as their own screen when completing a submission.
Did we answer your question?
We'd really appreciate your feedback! Please leave your suggestions for improvement in the comments or let us know what you're looking for so we can assist you better. We want to help, but we need to understand your needs!
Comments
2 commentsPlease sign in to leave a comment.
This doesn't seem to work if more than one screen is located within the loop. If it's intended that way, you should mention it in the documentation above. If not, please fix.
Hi Chris Crowley,
Thank you for pointing this out. Grid and Grid (pre-populated) within the Legacy Builder are equivalent to Tables in the Advanced Form Builder. As soon as a primary Loop has a screen or multiple loops, it is classified as an Advanced Loop. Due to the data structure, Grid and Grid (pre-populated) only works on the innermost or a standalone Loop within an Advanced Loop. This works because once the Key Field from the Primary Loop is chosen, it automatically pushes the user to another screen to fill in the details associated with that key field. I will clarify this in the article above but please feel free to chime in if this is unclear.