What are Grids?

Grids give you the ability to visualize your Loop Screens in a grid format. Loops are commonly used for things like inspection checklists and recording line items for invoicing, because they allow you to add as many line items as needed. The Grid format can help visually understand the table of line items as it's built, and looks similar to what we're already used to seeing on paper forms.

Here's an example of a Grid invoicing for three line items:

We would simply + Add New Row for any additional line items we'd like to add. 

Enabling Grids

Follow these steps to enable the Grid format for your Loop:

1. From the App Outline, select the Loop Screen you'd like to enable Grid format for. In this example, I'm using my Materials screen (If you haven't set up a Loop Screen yet, read this article to help get started).
2. Click on the Settings icon on the left-hand side to access Screen Settings.
3. Select "Grid" from the Style dropdown menu.
4. Preview the Grid (see below) and/or publish the changes to update the App.

Previewing Grids

At the bottom of your App build, click Preview Grid to see a preview of what it looks like. The number of rows will automatically adjust to however many are entered by the user filling out the Submission.

If that looks good to you, publish the changes and go see it in action on your device!

Pre-populated Grids

Pre-populated grids simply take the existing content that makes up the Loop and pre-fills the grid with it, whereas the standard Grid format requires you to build it from the ground up by manually adding new rows. You're essentially working backwards by deleting the rows you don't need, rather than adding the ones you do need, as is in the standard Grid format.

In practice, this might not be the ideal solution for someone with an extensive inventory list. Above, I was able to hand-pick the three items I wanted to bill the customer for from a list of 20+ items. This was more efficient than using a pre-populated Grid, in which I'd need to manually delete the other 17 items that were automatically pre-populated.

However, pre-populated Grids are FANTASTIC for inspection checklists. It provides the user filling out the Submission with all of their inspection items at a glance, like a traditional inspection checklist would. You can't preview this from within the App Builder (you'll just see the same blank table as before), but publish the App and open it on mobile to see it in action.

Here's an example of a pre-populated Grid for a kitchen inspection App:

Follow these steps to enable the pre-populated Grid format for your Loop:

1. From the App Outline, select the Loop Screen you'd like to enable Grid format for.
2. Click on the Settings icon on the left-hand side to access Screen Settings.
3. Select "Grid (pre-populated)" from the Style dropdown menu.

Publish the changes and see it in action on your device!

Still getting the hang of Loops? Check out this article on the fundamentals of Loop Screens.