# 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.

<figure><img src="/files/6Qb1k3kS5uRuRijuUUgm" alt=""><figcaption><p>Example of a list of integrations</p></figcaption></figure>

## 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.

   <figure><img src="/files/HHmlSLgpWlYJ5togZxV0" alt=""><figcaption></figcaption></figure>
2. The array can be set in the Data tab on the left panel.\
   ![](/files/PlWkVdLu2LuO4oaq2eoj)
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.

   <figure><img src="/files/iSaSXPDmvg2K6luKyBY2" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/rYPdh8etPXeYgEUuyYwL" alt=""><figcaption></figcaption></figure>

This is how the list would look in production.

<figure><img src="/files/GUKvMULc9xq8QP8rKYkP" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/nF9bUgQ120iUHaz3Exc9" alt=""><figcaption></figcaption></figure>

## 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](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/layout-elements/list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.