📖

Bind data to UI 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:

💡 We're using this design file and this Airtable for the tutorial.

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

  1. 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.)
  2. image

  3. First, select the Collection and Request you previously created in the Data Library.
  4. (In this example, we're selecting the Collection "Adventure Listing" and the Request "Adventures-List".)

    image

  5. 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.
  6. 💡

    Alternatively, you can search directly for a layer by name.

    All layers 3rd-level and below will be displayed in one combined list.
    All layers 3rd-level and below will be displayed in one combined list.

  7. 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.
  8. (In this example, we will select the frame named *Activity card.)

    image

  9. The Element Binding side panel is where you will bind the data, and other properties, to the selected app element.
  10. 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.

    Airtable usually displays the array as
    Airtable usually displays the array as Records or Data Record[]

  11. 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.
  12. 💡

    When binding images, look for the data record that ends in "url"

    image

  13. Check out your list page in Bravo Vision! 📱
  14. image

⚠️

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