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 this design file and this Airtable for the tutorial.
Connecting data to your app design is done in the Binding Setup of an app project.
Binding is the action of connecting data items (i.e. names, images, etc.) to an UI element (i.e. text, rectangle, etc.)1. In your Bravo app page, click on the app screen you want to connect to data to enter Data Binding mode. (In this example, we are binding data to the Home List page.)
2. The section below displays the list of UI elements of this app screen. It displays all the 2nd-level containers collapsed, and you can expand it to see the elements within.
3. In our design file, we have a list container called "list item". We want to bind this element to a list we're getting with an API request. In this case, it will be a list of places. To do that, we'll click on the list container item, then select our Data Collection, and the list GET request. Then, we'll select the data item corresponding to the list.
In this case, this data item has the name of "Records", but this can be different depending on the backend tool you're using. You can also change it in the API request configuration.
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 two text elements, and an image.
5. Now, the container element will populate to a list with an image a two 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