# Bind data to design for a list page
This tutorial is a continuation after you have retrieved data from a database. If you haven't done that yet, check out:
π [Creating an API collection](/connect-api/set-up-api-requests/creating-an-api-collection.md)\
π [Set up an API GET request for list page](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md)\
\
π‘ We are using the **Sample App: Your first app** with this [design file](https://www.figma.com/file/MbRMemhimzXKL2mWmUTdtR/Sample-App%3A-Your-first-binding?type=design\&node-id=0-1\&mode=design\&t=R6zslycL05Pk1wfg-0) and Xano as backend for the tutorial.
Duplicate the app to follow the tutorial:
## How to populate data for a list page
{% hint style="info" %}
**`Binding`** is the action of connecting data items (i.e. names, images, etc.) to an UI element (i.e. text, rectangle, etc.)
{% endhint %}
Once in your Bravo app page, follow these steps to connect your data to your app design:
1. On the left hand side of the screen, you will see your `App screens`. Select the app screen you want to connect to data. For this example, we are binding data to the `Resorts list` page. Once selected, this will enter **Data Binding** mode.
2. In our design file, we have a `Resort card` designed for each item from a list. Select this element, it has a [`container`](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container) tag which allows us to bind a **List of items** to it. We want to bind this element to a list we're getting with an API request.
{% hint style="info" %}
Alternatively, you can also select the UI element you wish to bind directly from the app image located in the center of the screen.
{% endhint %}
3. Once selected, on the right side of the screen, under `Element Binding` and `List item`, select the **API Collection** > the API request `GET-"List of Resorts"`
{% hint style="info" %}
See [here](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md) how to set up a GET request for a list.
{% endhint %}
4. After that, select the data item corresponding to the list. In this case, it has the name of `data`, but this can be different depending on the backend tool you're using. You can also change it in your API request configuration. \
\
This binding will create as many βcardsβ as rows in the database.
4\. Once you've bound the list container, it's time to bind the UI elements inside the container. In this case, it will be several text elements, and an image.
{% hint style="info" %}
**Pro tip:** Since we have added an asterisk to every UI element that needs to be bound, you can instantly search for all of them by typing an **\*** symbol in the Search field. It is also recommended that the UI element names from Figma and the data names from your API matches in order to bind data easier.
{% endhint %}
5\. Now, the container element will populate to a list with an image and several text elements. Check out your list page in **Bravo Vision**! π±
### Considerations to keep in mind:
{% hint style="info" %}
In case you're using Airtable, and you want to display the items in the same order as in your table, add the [**table view name**](https://support.airtable.com/hc/en-us/articles/360042311914-What-is-a-view-) to the request URL. For instance:
{% endhint %}
{% hint style="warning" %}
Binding a single paginated list to a screen is supported. However, binding multiple paginated lists to one screen is currently not supported.
{% endhint %}
{% hint style="warning" %}
Make sure your table has no empty rows. Otherwise, the list might not populate correctly.
{% 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.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page.md?ask=
```
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.