Comment on page
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:
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 theResorts listpage. Once selected, this will enter Data Binding mode. - 2.In our design file, we have a
Resort carddesigned for each item from a list. Select this element, it has acontainertag 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 BindingandList item, select the API Collection > the API requestGET-"List of Resorts"
- 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