Skip to main content

Grids

Display a list or tile view for search results, recommendations, or pages using a repeating cell pattern. Click a cell to open a page or slideout panel.

In this guide:
  1. Add data to a grid
  2. Map data to grid cells
  3. Customize grid
  4. Trigger action on cell click

Add data to a grid

Start by dragging the Grid component from the Components panel to the empty canvas.

The grid will load with an example dataset.

To edit the grid with your own data:

  1. Customize the name and header for the grid
  2. Remove the default grid data and select 'Add a new API. In this example, we'll use a REST API.

The REST API will use a simple JSON-based API for getting information on Harry Potter characters. In the API panel, add the URL, https://hp-api.herokuapp.com/api/characters, and update the name of the API to getHpCharacters. Click "Run" to populate the grid with some of the resulting output.

We can also see the API resonse in the API panel's "Result" section, as well as by hovering over the Grid Data value {{getHpCharacters.response}}. Any of these attributes can now be used in the grid.

Map data to grid cells

Next, we'll edit the grid so the cell elements pull from the previous API values. To configure each cell element, click the element and update its value to {{currentCell.<KEY>}} in the Properties panel. Here we'll change the image to {{currentCell.image}} and the text components to {{currentCell.dateOfBirth}} and{{currentCell.house}}

Customize grid

Adjust the grid display and image size by increasing the Column Count to 4, and disabling Fill the container on the image.

We can also resize and organize elements within a grid cell.

Lastly, we can use JavaScript for further customization of text cells, such as setting conditional logic to only display the date of birth for a character if its returned in the API response, or changing the text color depending on the house.

Trigger action on cell click

When a grid cell is clicked, let's add a Slideout panel for more details about each character.

Customize the slideout with components that reference the selected cell by adding the name of the grid, and dot referencing the property grid cell. For example, {{Example_Grid.selectedCell.actor}}