📖

Bind data to UI for a detail page

This tutorial is a continuation after you have set up an API request for a detail page and the binding for a list page.

If you haven't done that yet, check out:

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

How to connect data for a detail page

Here's how to set up the detail page binding, so that when you tap on an item in the list page, it opens the detail page with relevant content.

💡

The key to setting up a detail page correctly is in the API request. If you used the Airtable API Wizard, this request is automatically set up for you. If you used a custom API, double-check the request setup if the detail page content doesn't show up correctly.

  1. In your app project page, click on the detail page screen to enter Data Binding mode.
  2. (In this example, we are binding data to the Adventure detail page.)

    image

  3. Select the data collection and detail page request you previously created in the Data Library.
  4. (In this example, we're selecting the Collection "Adventure Listing" and the Request "Adventures-Detail".)

    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. Select a visual element you want to display external data and select the corresponding data point from your API in the side panel.

    (In this example, we are connecting all the elements that has an asterisk * in their layer name.)

    💡

    Unlike the list page, you do not need to select the container.

    image

  7. Repeat step #3 until you have connected all the elements that you want to display data.
  8. 💡

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

    image

  9. Check out your connected detail page in Bravo Vision! 📱
  10. image

👉 Up next: Replace the default loading screen with your custom loading screen.