List

List is used to render each item from an array of data. Each item in the list shares the same layout structure, but renders distinct data from the array item.

Example of a list of integrations

Sending data to a list

There are 3 main ways to send data to a list: selecting a data node, setting element data, or through an interaction.

1. In properties, you can select a data node to use for the list.

   
2. The array can be set in the Data tab on the left panel.
3. You can also send data through an interaction. In this example, the array [1,2,3] will be sent to the list when a button is clicked.

   

Displaying data in the list

Let’s say the list data was [”a”,”b”,”c”].

To access the list’s data, you can use $item (the item data), $index (the item index of the list), and $list (the array).

Here, there is a button, text, and divider element added to a list.

This is how the list would look in production.

What to display when there’s no data

You can customize the content for when the list data is empty.

Hover over the Change View Mode arrow and select empty. Then you’ll be able to drag in elements to build the empty view.

Supported Events

No supported events.

Supported Actions

Set List Data: Set data to use for the list.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.