Bind data to design 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:
👉 Connect data for a list page
👉 Set up an API GET request for detail page
💡 We're using this design file and this Airtable for the tutorial.
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. Double check the request setup if the detail page content doesn't show up correctly.
1. In your Bravo app page, click on the detail page screen to enter Data Binding mode.
(In this example, we are binding data to the Place detail 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 this case, we don't want to populate any of the containers in this screen to a list. Therefore, we won't bind the container element to any data item. Instead, we'll open it to expand all the UI elements inside the container, and bind each of them to the corresponsing data item.
Although this is considered a "detail screen", because it displays more information about a specific item from a "list screen", it could still be possible to bind a container to a list data item, if the API request we use contains one.
4. We'll do the same with all the other UI elements in the screen that we want to bind to API data.
5. The binding is now completed. Check out your connected detail page in Bravo Vision! 📱