Set up an API GET request for detail page - Airtable

Remember that 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.

This tutorial is a continuation after setting up a GET request for a list page. If you haven't done that yet, check out:

Set up an API GET request for list page - Airtable

Here is how to set up a GET request to display content based on the list item you clicked in the previous app screen.

How to set up GET request for a detail page

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 ${id} to the base URL, to get a specific data record. In our countries API example, this will be data about a single country.

In this URL, ${id} 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.

Then, in Input Variables and Test Values, insert the Variable Name (id) and the Test Value (recId3UHf32o1Az5E) provided in the Airtable retrieve records.

Check out this video to learn more about Bravo variables.

3. Now, we'll go to the list GET request we already set, and indicate the data item that will take the ${id} variable. Hit Send, and under Received Data, select the data item .data.records[].id. 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 id (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.

5. Press Send. You have successfully set up the detail GET request if receive a response 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 Solo & Teams users with Advanced and Business add-on) 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).

Here's an additional example using Airtable: