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 👉 Set up an API GET request for list page 💡 We are using the Sample App: Your first app with this design file and Xano as backend for the tutorial.

Duplicate the app to follow the tutorial:

How to populate data for a list page

Binding is the action of connecting data items (i.e. names, images, etc.) to an UI element (i.e. text, rectangle, etc.)

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

Alternatively, you can also select the UI element you wish to bind directly from the app image located in the center of the screen.

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"

See here how to set up a GET request for a list.

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.

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.

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! 📱

Make sure your table has no empty rows. Otherwise, the list might not populate correctly.

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 to the request URL. For instance: https://api.airtable.com/v0/XXXX/Posts?view=my_view