This tutorial is a continuation after you have retrieved data from a database. If you haven't done that yet, check out:
Using this base, a fictional travel agency organizes surf camps to coveted destinations around the world. They use public based embed on their website to educate customers on the destinations, the difficulty levels, surf beach type, peak season and past patrons. Grouped views allow the agency to look at their destinations based on difficulty level or beach type.
How to populate data for a list page
Connecting data to your app design is done in the Binding Setup of an app project.
Binding is the action of connecting data (i.e. names, images, etc.) to an app element (i.e. text, rectangle, etc.)
- In your app project 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 Adventure List page.)
- First, select the Collection and Request you previously created in the Data Library.
- The section below displays the list of layers of this app screen. It displays all the 2nd-level containers collapsed, and you can expand it to see the layers within.
- To display a list of data: first, select the container you previously set up in the design tool, which indicates the part of the design that will populate itself to a list. A side panel will slide out that will allow you to bind data to this layer.
- The Element Binding side panel is where you will bind the data, and other properties, to the selected app element.
- Then select another visual element you want to display external data and select the corresponding data point from the side panel. Repeat until you have connected all the elements that you want to display data.
- Check out your list page in Bravo Vision! 📱
(In this example, we're selecting the Collection "Adventure Listing" and the Request "Adventures-List".)
Alternatively, you can search directly for a layer by name.
(In this example, we will select the frame named *Activity card.)
Under Content, select the data array from the database to bind it to the container. An array is a list of data records. A data icon will appear on any element that has bound data.
You only need to bind the data array to the container if you want to populate it into a list. If you are connecting standalone elements, you do not need to bind anything to the container.
When binding images, look for the data record that ends in "url"
Make sure your Airtable has no empty rows. Otherwise, the list might not populate correctly.
👉 Up next: bind data to design for a detail page