# 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](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection)\
👉 [Set up an API GET request for list page](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable)\
\
💡 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:

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FvRDzMYP3ozms8dYgjGn2%2FScreen%20Recording%202023-11-09%20at%2016.00.48.gif?alt=media&#x26;token=2b4dfc1d-799e-4d1c-bf86-02c652b8f975" alt=""><figcaption></figcaption></figure>

## 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 <mark style="color:red;">`App screens`</mark>. Select the app screen you want to connect to data. For this example, we are binding data to the <mark style="color:red;">`Resorts list`</mark>  page. Once selected, this will enter **Data Binding** mode.
2. In our design file, we have a <mark style="color:red;">`Resort card`</mark> designed for each item from a list. Select this element, it has a [<mark style="color:red;">`container`</mark>](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.&#x20;

{% 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 %}

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FHF2aj7VlDlQggTO52k6h%2Fbiiinding.gif?alt=media\&token=5ae5a14a-50ba-41a9-b4c7-c5312b9018b2)

3. Once selected, on the right side of the screen, under <mark style="color:red;">`Element Binding`</mark> and  <mark style="color:red;">`List item`</mark>, select the **API Collection** > the API request <mark style="color:green;">`GET-"List of Resorts"`</mark>

{% hint style="info" %}
See [here](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable) 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 <mark style="color:red;">`data`</mark>, 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.&#x20;

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F3Kw09CCN8ZlC1pxOxR7P%2Fbinding%20list%202.gif?alt=media\&token=6d025869-5928-484c-90a7-de40418bae24)

{% 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: <https://api.airtable.com/v0/XXXX/Posts?view=my\\_view>
{% 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 %}