Set up an API GET request for detail page
This tutorial is a continuation after you have set up a GET request for a list page. If you haven't done that yet, check out:
Here is how to set up a GET request to display content based on the list item you clicked in the previous app screen.
If you are connecting to Airtable, you can use the Airtable API Wizard to automatically set up the GET requests for list and detail page. Also, if you want to import an API definition (Open API, Swagger or Postman), you can do that with the import wizard.
1. In the collection where you already created the GET request for the list page, add a new request and edit the name to help you identify it.
2. Paste the URL for a detail page request. This type of request will return a single record of data, from the data list we obtained in the list page request. In this example, we need to add
/name/${name} to the base URL, to get a specific data record. In our countries API example, this will be data about a single country. The exact URL you need to set will depend on the API you're connecting to. For instance, in Airtable, the detail request URL will be constructed adding
/${id}to the base URL for a table. In this URL,
${name} will be a variable that Bravo will use to get a specific record from the list fetched with the list page request. We'll show in the next step how this binding between requests is done.
3. Now, we'll go to the list GET request we already set here, and indicate the data item that will take the
${name} variable. Hit Send, and under Received Data, select the data item .data[].name.common. This is what we use to link the detail request to the list request.
4. Go to Selected Data, change the Label of the data record ID to
name (case-sensitive) so that it matches exactly what we added in the detail GET request. Make sure the spelling of the
Name in the Selected Data section for the data item matches exactly the spelling of the corresponding variable in the detail request URL. Otherwise, the binding won't work, and you'll most likely get an error message when testing the app on Bravo Vision.
Make sure the data item
Name has the same spelling as the variable in the detail request URL.6. Go back to the detail GET request. Under Test values, input the data record
name key and sample content from the list GET request (in this case, the name of one country). This will be used to send a test request, and set up which data from the detail request we want to select to bind it to the UI elements later on.- Key:
name - Value: name of a country from the list GET request (
.data[].name.commonpath)
7. Press
Send. You have successfully set up the detail GET request if receive a response list under Received Data.
If you encounter any error message, screenshot it and send it to us from the Help widget at the bottom right corner (for Olé and Bravissimo users) or post in the Bravo community.
Be careful when selecting data related to media information (images and videos). Sometimes, the media metadata (including URL) comes wrapped in a single-item list from the API response. In order to display the media file correctly in the app, in the "Received Data" tab, check if this metadata comes inside a single-item list. If so, select this single item of the list (0 index), and then select the individual data (media URL, media title and so on).
Last modified 1mo ago