Bravo Studio Help Center
  • Get started with Bravo Studio 👏
  • Get Started
    • 🚀Create your first app
    • 🌟Bravo introduction
      • Get ready to create your app with ChatGPT
      • Create an app
        • Creating an app with Figma
        • Creating an app with Adobe XD
      • Duplicate an app
      • Delete an app
      • Replace linked Figma file
      • The app page
      • Sharing your app
      • Add an editor to your app
      • Fonts
        • Adobe XD - Supported fonts
    • 📱Bravo Vision previewer
    • ✨Unlock power features to create interactive apps
    • 🎓Help and tutorials
      • 📖App guide tutorials
        • Sample app tutorial: Your first binding
        • How to build a Fitness app with Bravo, Xano and RevenueCat
        • Foodgram: Social content sharing
        • Expedition journal: Write and share your adventures
        • My Subscriptions: Display data based on device ID
        • My Notes: using user ID and email from Firebase
        • My Store: Sell physical products with Bravo and Stripe
        • Titan: How to create a Smart Home App with No-Code?
        • n8n: Building an expense tracking app in 10min
      • 📺Learn with videos
      • 📚Learn with articles
      • 🗃️Browse by app feature
        • Save or "bookmark" a page
        • Backend search with Airtable
        • Backend search with Xano
        • Nested lists (list within a list)
        • Create and edit user profile (Firebase + Airtable)
        • Skeleton loader
        • Create albums in your app with Bravo Infinite images
  • Set up your design
    • 🖌️Get your Figma ready for Bravo
      • 🗃️Structuring the design: the layer hierarchy
      • 🪄Bravo Tags: adding functionality to the UI elements
      • 🧱The container
        • Setting up a container on Figma
        • Setting up a container on Adobe XD
      • 📲App navigation
        • Setting up app navigation on Figma
        • Setting up app navigation on Adobe XD
    • 🔌Bravo plugin for Figma
    • 💾Sample design files
    • 🤓Best Practices
  • App components
    • 📒Bravo Tags Master List
    • 🚪Menus
      • Modal Menu
      • Modal pages
      • Tabs Menu
      • Pop Up pages
      • Slide Menu
    • 🍞Pages
      • Modal pages
      • Pop-up pages
      • Swipe page
      • Transitions page
      • Page reveal animations
      • Page tabs
      • 🔮Stateful pages
    • 📦Containers
      • Swipe to delete
      • Top bar
      • Carousel slider
      • Aspect ratio relative to screen
      • Sortable List
      • Layer (sticky element)
    • 👋Intro & Onboarding
      • Intro page
      • Post-login page (Onboarding)
    • ⌛Loading experience
      • Loading page
      • Custom loading page
      • No loading
      • Preload
    • 📝Form & input fields
      • 👁️Password Visibility Toggle
      • 🩷Stateful input
        • ☑️Checkboxes (Multiple select)
        • ✅Required Checkbox
        • 🔘Radio buttons (Single select)
      • ⏳Input time Interval
      • 📄Dropdown selector
      • 🎚️Slider control
      • 🗓️Calendar picker
      • 📄Send form input to a database
    • 💎Components
      • Autoplay Video
      • GIF
      • SVG Component
      • Web view
      • Web Components using AI
      • Web view communication
      • LottieFile
      • Lottie-animated component
      • Flexible text (Flexo)
      • Zoomable image
      • Component states
      • Stateful component (like button)
      • Setting up the backend of Stateful component (like button)
      • Haptic Feedback (Buzzz)
      • Progress bar
      • Rich text
      • Date, Time and Currency Formatter
      • Scrollable text
      • Text Lines & Truncation
      • Status bar
    • ⚡Mobile actions
      • Mobile Actions
      • Play audio
      • Record audio
      • Play video
      • Scan QR code (external URL)
      • Scan codes (remote action)
      • Search & filter
      • Refresh page
      • Share location
    • 📱App Icon & Splash Screen
    • 🗺️Map with markers
    • 📈Charts
  • Data and Backend
    • 🗂️Set up a no-code backend
      • Xano
        • Nested lists (list > list > detail page) with Xano
        • Create a bookmark functionality with remote actions and device ID with Xano
        • Multi-user setup with Xano
        • 🔒Setting up the Xano Log in Snippet
          • ♻️Refresh Token
      • Airtable
        • Nested lists (list > list > detail page) with Airtable
        • Sort list with Airtable
        • Connect multiple tables from Airtable to one app
        • Update Airtable's API key to Access Token
      • Backendless
      • Bubble
      • Notion
        • Getting data from a Notion table
      • Firebase
        • Getting data from Firestore
    • 💾Set up API requests
      • Set up from scratch
        • Airtable
          • Set up an API GET request for list page - Airtable
          • Set up an API GET request for detail page - Airtable
          • Set up an API POST request - Airtable
          • Set up an API DELETE request - Airtable
        • Xano
          • Set up an API GET request for list page - Xano
          • Set up an API GET request for detail page - Xano
          • Set up an API PATCH request - Xano
          • Set up an API POST request - Xano
          • Set up an API DELETE request - Xano
      • Using GraphQL body type
      • Set up with API wizard & importer
        • Using the Airtable API Wizard
        • Using the Xano API wizard
    • 🎲Variables
      • Built-in variables
      • Set Variable
    • 📚Data Collection & Binding: Complete Collection
    • 🗂️Pagination
    • 🐛Debugging API issues
      • ⚙️Debugging requests in the API Collection
      • 📲Event logger
      • 🔗Link property
  • Data binding
    • 🤝Data binding types
      • API binding types
      • Bind multiple API requests to one screen
      • How to connect my API to a mobile actions
      • Remote actions: trigger an API request with a UI element
    • 💡Display data in your app
      • Bind data to design for a list page
      • Bind data to design for a detail page
    • 🆕Create data from your app
    • 🗑️Delete data from your app
    • 🚦Conditional Visibility
    • 🎛️Conditional Actions
  • Integrations & Settings
    • 🖇️Deep Links
      • 🖇️Deep Links for Bravo Vision
      • 🖇️Deep Links for published apps
      • 🖇️Troubleshooting Deep Links
    • 🔔Push Notifications with OneSignal
      • How to get a Bravo page URL
    • ⚙️Firebase Configuration
    • 🔐User Authentication
      • 🔑Authentication with Kinde and Xano
      • 🧙🏽Authentication with OAuth 2.0
        • Using social logins to authenticate users
        • Using AWS Cognito to authenticate users
        • Connecting to Spotify API
      • 📲User login with Firebase
        • ✉️Email and password Login with Firebase
        • 📞Phone Login with Firebase
        • 🍎Social Login with Firebase
        • 👻Anonymous Login with Firebase
      • ⛓️Authentication with custom backend
        • Set up Xano as your user authentication backend
    • 💰Stripe: One-time Payment
    • 💬Chat: CometChat
    • 💸RevenueCat: In-app purchases and subscriptions
    • 📉Bravo Analytics
    • 📳Facebook App Events
    • 📊Google Analytics
    • 🌐Multilingual apps
    • 🕸️How to connect with Webflow API
    • 📡NFC connection
    • 🎯Admob
  • App Publication
    • 🚀Publishing your app
      • iOS Publication: Complete Process
        • 1. Generate Certificates, AppIDs and Provisions
        • 2. Get the IPA
        • 3. Upload IPA to App Store Connect
        • 4. Test your app on TestFlight (optional)
        • 6. App Store publication
        • 7. Updating an app in the App Store
      • Android Publication: Complete Process
        • 1. Create a Keystore File (optional)
        • 2. Get the Debug APK to install
        • 3. Install the Debug APK in your device
        • 4. Get the AAB (Android App Bundle) file to publish
        • 5. Google Play publication
        • 6. Updating an app in Google Play
      • Android APK Installation Guide
      • Rejection from the app stores
    • 🎛️Making changes to your app after publication
    • 🛍️Versioning
    • 🌟App rating alert
  • Good to Know
    • 🤔Troubleshoot
      • Errors when logging in
      • Errors when creating an app
      • Errors in API requests
        • Request timeouts on Bravo
      • Errors after importing
      • Errors in publication form
    • 🧑‍💻Manage your account
    • 💳Billing
      • Bravo Subscription Plans Overview
      • App Add-ons
      • Upgrading a plan
      • Downgrading a plan
      • App allowance
      • Invoices & payment method
      • FAQ
    • ❓FAQs
      • About Bravo Studio
      • Importing a design file
      • Bravo Vision
      • Bravo Tags
      • API & Data Library
      • Login & Account
      • Other Features
  • NEED SOME HELP?
    • 📖Bravo Support Guide
    • 🤝Join the Bravo community
    • 🤖Bravo Assistant
    • 👥Production support
    • 🐞Report an issue
Powered by GitBook
On this page
  • How to create a GET request
  • How to select data items to use in your apps

Was this helpful?

  1. Data and Backend
  2. Set up API requests
  3. Set up from scratch
  4. Airtable

Set up an API GET request for list page - Airtable

PreviousAirtableNextSet up an API GET request for detail page - Airtable

Last updated 10 months ago

Was this helpful?

The Data Collections allows you to create API requests to any database or tool with an available REST API.

Here is how to create a GET request to retrieve data to be displayed in your apps.

If you are connecting to Airtable, you can use the to automatically set up GET requests for you. Also, if you have an OpenAPI, Postman or Swager collection, you can import it via JSON file.

You can utilise other API verbs (i.e. POST) to retrieve data if your API specifies otherwise. Simply change the verb type of the request URL.

Example Data

Use this Airtable example to get your data.

How to create a GET request

1. In Data Collections, click Create a new collection and select Start from scratch. If you already have a collection, skip to step #3.

2. Enter the name of your collection and an optional description (we recommend putting the source as the description, like Google Sheet).

A Collection is a group of API requests, normally from the same data source.

3. You're ready to create requests! Click the + button to add a new request, then edit the request name to help you identify it.

4. Input the GET request URL from the API of your choosing. (Or use the example request we listed above).

To obtain the API request URL in Airtable, do the following steps:

  1. Select Help from the top right corner of the screen.

  2. Choose API documentation from the Additional Resources list.

  1. Once the Airtable API for your base is open, navigate to the left-hand menu and locate the specific table, in this case, Cities table. Select "List records" to get information about the API and cURL.

  1. Copy the URL from Airtable, navigate back to Bravo, and paste it into the request URL field.

5. If the API has Headers or Parameters values you need to input in order to send the request call, input them in the section below. (The example request does not require any extra input).

If it require authorization do the following steps:

  • Click Create token from the Personal access token tab.

  • Set a Name, for example: Bravo API key.

  • Click + Add a scope and select data.records:read and data.records:write. Make sure both are selected.

  • Click + Add a base and select All workspaces (you may select a specific base if you want).

  • Click Create token. Make sure you verified your email first.

  • A new modal shows up: Your token has been created. Copy the token.

  1. Go back to Bravo, add a header with key Authorization and value Bearer [API KEY] (replacing [API KEY] with your token).

Another way to authenticate all endpoints is by configuring the authentication settings in the API collection settings (click the gear icon next to the API collection name).

  1. Go to the Collection Settings > Authentication tab.

  2. Set Authentication type as Bearer.

  3. And add the API Key copied from Airtable to the token field.

  4. Save.

6. Press Send. You will receive a response list of all the data retrieved from the API request. You have successfully retrieved data from an API! 🎉

If you encounter any error message after clicking Send, you can consult the Debug & Inspect Response section to get more information about the error.

How to select data items to use in your apps

In your response list under Received Data, you will see all the data items that the API request is sending over.

The text in light gray is the name of the data item. The text in green is text value of the data item, and text in pink is numerical value.

1. To populate data into a list in your design, first choose All from the dropdown menu. This selects the array (list) of data rather than one data record. For instance, in the example provided, there are 150 items. Selecting '0' will pick a unique data, the first one in the list; '1' will choose the second item, and '149' will select the last item in the list.

2. Next, tick the box next to the data items you wish to link to your app design. Selected data will be available for binding in Data Binding.

3. Under Output Variables, it lists all the data items you have selected and automatically denotes the one(s) that is an array.

  • Path: Is the internal path of the data item sent from the API. You can define a custom one if needed, if you know what you're doing.

  • Default Value: Is a sample content of the data item. This sample content will also be the placeholder content for any fields that come up blank. You can delete it if you don't want to override any blank fields.

Follow this guide to continue with the Data binding:

With Airtable open, click on your account in the upper right corner of the screen. Here you'll see a dropdown menu appear. Click the Developer hub option. Or if you are currently signed into Airtable, you can .

Bravo's API limit is set at 200 items. To display more, add to the api request, allowing you to show up to 200 items per page.

Variable Name: The name to easier identifies the data item. It appears in Data Binding, and you may also edit this for certain request setups. .

Use the tool to verify that you're receiving the correctly the data. If the HTTP requests is successful, a 200- OK status code will be returned from the API, together with the data. If there was any issue with the HTTP request, an error code will be returned from the API. Learn more about .

💾
click here to access the developer hub
pagination
Learn more
Debugging & Inspect Response
Errors in API requests
Bind data to design for a list page
Airtable API Wizard
Example Airtable Database
Create a new collection
Add name and description to the new collection
Add a new API request
Airtable - API documentation
Airtable's API documentation
Add the API request URL
Add the Headers
Selected data from received data