Table of Contents

Grids

Lesley Updated by Lesley

What are Grids?

Grids are a type of view that displays multiple records from tables in your Live App. Each column in your grid will correspond to a field in a table. Then each row in your grid will correspond to an individual record in a table. 

Grids can also contain action links that can view more details about a record, edit or delete individual records shown in the grid, or trigger actions.

What Do Grids Look Like in the Live App?

In the Live App, a grid displays as shown below. Fields from the table will be used as columns in the grid, and records display as rows.

Manage Grids

Adding, editing and deleting views are managed the same regardless of view type. To learn how to add, edit, and delete grid views from your app, see About Views. 

Where Do I Access Grids?

You can access your grids in the Pages section of the Builder. There you can either add a new grid or select a page with an existing grid view. There you can select and edit any grid view in the page preview.

Grid Settings

Once a grid has been added, click directly on the grid view in the page preview to open the view editor will open in the left side toolbox. Here you can access the view settings. 

The grid settings have the following sections: 

  • Source: control which records show in the grid.
  • Settings: control the pagination, filters, and options like adding exporting and inline editing.
  • Column: choose which columns and links to display on your grid.

Source

The Source section displays which table the view is displaying and is used to control which records the grid will display and how those records are displayed.

The following sections are available in the Source settings:

  • Data: Add rules to define and limit which records will display.
  • Sort: Define the sort order in which records will display.
  • Limit: Define how many records to show. If you want to display only a certain number of records instead of all them, you can set a limit. For example, we may want to display our top 10 prospects, so we would set the limit to 10.

Click here for more on working with the view source.

Settings

The Settings section is where you will find the settings for your grid to manage how elements of your grid will behave. You can find more detail on grid settings here.

Options

The Options section contains four features that you can enable to customize your Grid view:

  • Keyword Search: This will add a search field above the grid for the user to enter keywords that will filter which records to display. On the search results display, a “reset” link will appear. Clicking this will reset all search criteria to easily search again with new criteria.
  • Exporting: This adds a link above the grid and allows the user to export all the data from the grid into either a CSV, JSON or TXT format.
  • Inline Editing: This allows the user to edit each field directly from the grid, without utilizing a form view.
  • Hide Empty Columns: Enabling this feature will hide all columns that are empty from the grid view.
Empty Grid Text

Here you can change the text which is shown when the grid has no records to display. 

By default this will show “No Data.” Add your own text here to add custom text for empty grids. 

Column Summaries

Column summaries are used to run calculations on all the rows in the column. Results will display as a summary at the bottom of the grid columns.

Here you can add four different summary types to your grid: Sum, Average, Minimum, and Maximum.

To add column summaries click the “Add Summary” button. Then add a title for your summary and select the summary type. By default the title is “Total” and any label you add will be placed in a left column if available. 

When row summaries are enabled, you can disable it for specific columns if needed. To do so, hover over the column in the grid preview and click the more options icon. Select "No" in the Allow Summary dropdown to hide the summary for that column.

Pagination

Pagination determines how many records are displayed at one time on your grid. If the total number of records exceeds the number set here, then a pagination control menu will be added to the grid to navigate to additional pages, displaying more records.

  • Set how many records to display at a time: grids can be set to show 10, 25, 50, or 100 records at a time. 
  • Let the user change the amount: once the page has loaded the user will be able to select how many records they will view per page. They can choose between 10, 25, 50, 100, 500 or 1000. 
  • Repeat pagination controls below the view: this will show the buttons to navigate to different grid pages at the bottom of the grid as well.   

Here's an example of a grid displaying pagination links in the top right:

Filter Options

Filter options allow you to customize how your user can filter the records in the Live App. Here you can disable filters for the user, allow users to add their own filters or add a predefined filter menu. 

Don't allow records to be filtered

Selecting this option will prevent users from filtering the records in the grid view on the Live App. 

Allow users to add custom filters

Enabling this option allows users to add custom filters in your grid when they access your app. Users will be able to select which field and criteria they want to filter by. 

Here you can allow users to filter all fields and tables or limit which records and fields are available to filter by. There is the option to allow users to filter by all table fields or only the fields displayed within that view. Similarly here you can add internal filters to prevent all records from being returned by these filters. 

This will display as an "add filters" link above the grid:

The grid will update as soon as a filter is added to the Live App and multiple filters can be added as needed. You can also set here if the available fields to filter are limited to the grid columns or all of the grid fields.

When restricting filters to only show the fields that are used as grid columns; any fields used in a display rule for the grid will also show as an available field in the filters.
If you are looking for more advanced searching options, we suggest checking our our search views. 

Use a filter menu

Enabling a filter menu will present links with predefined filters above the grid. The user cannot change these filters. Clicking the will filter menu links will filter the records based on the rules you create.

The user can then click on the menu links to automatically filter the records.

If rules were added to the grid's Source, those rules will be combined with any filters that are added.
Title & Description

In this section you can customize the grid title and add a description. This is a great way to give your users more context about what the grid is displaying

  • Title: the text here will display as the main title above the grid view.
  • Description: here you can add additional description text that will display below the title

Add Columns

The Add Columns section defines which fields will show as columns on the grid. 

Here you can add or remove fields from the main table the grid is showing, as well as fields from connected tables. These fields can be clicked or dragged onto the grid view. 

Read more on managing columns below.

Manage Columns

Each individual field available to add to the grid is associated with a field in your table or a connected table.

Add Columns

All the fields available to add as columns will be displayed in the view editor in the Fields, Connections or Actions sections. 

Fields

The Fields section contains all fields from the primary table the view is displaying. Click on a field or drag it onto the grid preview to add it as a column:

When the field is clicked, it will be added to the right of the grid as the last column by default.

If you need to add a new column to your grid that doesn't exist yet, you'll first need to add a new field to the associated table in your database.
If you edit the field name in the table, all existing columns for that field will be updated unless the label has been manually edited.

Connections

In the Connections section you can add fields from connected tables. To add these fields click on a field or drag it onto the grid preview to add it as a column:

Tables will first need to be connected in the Data section of the Builder before this option will become available. 

Actions

In the Add Columns section you can manage Action Links, which allow you to add additional link columns to your grid view. This is where you can add links to delete a record, edit a record, view more details about a record, link to another child page or trigger an action.

  • Edit record: this will create a new child page with a form to edit the record. Clicking on the link will go to that page to edit the record.
  • View record details: this will create a new child page that displays all further details for the record. Clicking on the link will go to that page to view those details. This is useful if a table has too many fields to fit in a grid since you can pick a few to show in the grid and then show more details on the linking page.
  • Delete record: this will add a link to delete a record. When the user clicks on the link they will be asked to confirm the delete. Clicking yes will then remove the record from the grid and delete it from the table.
  • Link to another page: reuse another page you've already created by linking to it. For example, if you already have a complex page that shows details about a company record, we could link to that page instead of creating a new page for this grid.
  • Trigger an action: “Action Links” create a link on the view and trigger an action to (a) update this record / update connected records / insert connected records / send emails and (b) redirect to another URL or show success messages.

Learn more about using action links here.

Edit Columns

To edit a field column, hover over a column in the page preview while editing the view and click the pen icon.

The toolbox will then display options to edit the column's properties, layout, and display rules.

Learn more about using column properties here.

Delete Columns

Hover over a column and click the "trash can" icon to delete that column:

Choosing to delete a field column will remove any pages linked to from that column.

Move Columns

To move field columns on the grid view, click the header of the column you would like to move and drag it to either the left or right. 

Use Grids in your App

Tables and Connected Records

In addition to displaying fields from the table used to create the grid view, you can also add field columns from connected tables as well. This will allow you to display records from multiple connected tables in one grid.

Adding Columns from Connected Tables

When adding field columns, you can add columns from connected tables. In the Add Columns section of the grid settings, fields from connected tables will be available in the “Connections” section. Here you can add columns to your grid in the same way you would fields from the primary table. 

These additional fields will only be available if the tables are connected in the Data section of the Builder. 

Notes & Troubleshooting

  • Adding a new field to your table will not automatically add this field to your grid. You will need to manually add the field to your grid columns for it to display.
  • Deleting a grid will also delete all child pages connected to the grid if the child page doesn’t connect to any other views. 

How To Guides

There are several How-To Guides that use grid views to display records.

How did we do?

Searches

Contact