> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-detail-page.md).
# 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](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md)\
👉 [Set up an API GET request for detail page
](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-get-request-for-detail-page.md)\
💡 We're using [this design file](https://www.figma.com/community/file/1022541708893076578)[ ](https://www.figma.com/file/MbRMemhimzXKL2mWmUTdtR/Sample-App%3A-Your-first-Bravo?type=design\&mode=design\&t=TzZe2ZbfqFrQGcKN-0)and Xano backend 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.
{% hint style="info" %}
The key to setting up a detail page correctly is in the **API request**. [Double check the request setup](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-get-request-for-detail-page.md#how-to-set-up-get-request-for-a-detail-page) if the detail page content doesn't show up correctly.
{% endhint %}
In this example, we are binding data to the **Resort detail** page.
1. In your App page, click on the Resort detail page screen to enter **Data Binding** mode.
2. Elements, the section under Screens, displays the **list of UI elements** of this app screen. It shows 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 corresponding data item.
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**! 📱
{% hint style="info" %}
Although this is considered a "detail screen", because it displays more information about a specific item from a "[list screen](/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page.md#how-to-populate-data-for-a-list-page)", it could still be possible to bind a container to a list data item, if the API request we use contains one.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-detail-page.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.