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:
Connecting data to your app design is done in the Binding Setup of an app project.
Bindingis 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! 📱