Connect to Airtable

You can connect your application to an Airtable database to get and send data.

Create an Airtable account

Airtable is a SaaS solution combining spreadsheet, database and project management. Airtable simply allows you to manage a large amount of data in a hybrid way, and not only numbers: phone numbers, dates, barcodes, photos... Its simple, intuitive and often free use makes it an essential tool in the no code ecosystem.

Create a free account on Airtable: https://airtable.com/signup

Structure your base

Create a new database by clicking on Add a base.

Structure your data in a table by adding Fields for each type of data.

Choose the type of field: checkbox, text, date, image etc...

Import your data manually or via a .csv file, Microsoft Excel or Google Sheets:

👉For more information about Airtable, visit the Help Center: https://support.airtable.com/

Create a Personal Token (token)

Since 2024, Airtable has strengthened its security rules and invites you to create a personal token (token) for your API connections.

To create a personal token:

Go to the dedicated space in your Airtable account: https://airtable.com/create/tokens
Click on the button Create token
Choose a Name, a Scope and an associated base. If you want to display data, choose Read.

Your personal token is ready to be used. Copy and paste it into a secure location.

Configure the HTTP compoent

Connecting to Airtable API is done using the HTTP component.

Click on Components and insert an HTTP component. For your component to be accessible throughout your application, insert it at the Project level. Otherwise insert it in a screen or foreground.

In the properties, add the API parameters.

URL

Go to the HELP menu on API Documentation to get the API URL.

Select your table on the left and click on List Records.

Copy and paste the API URL (everything from the https: to the ? without including the ?. The rest of the information is Query String which will be specified below). Here is an example of an API URL:

https://api.airtable.com/v0/appIGPMYLUbwWCCbZ/Table%201

Personal token

In the Header field click + Add.

Add Authorization as a key and Bearer TOKEN as a value. Replace TOKEN with your personal token.

If you want to request data, select the GET method. If you want to send data, choose the POST method.

Cache management

Caching allows you to efficiently reuse previously retrieved or processed API data. Choose from the following options:

No cache: the application will make a network call and will not read the cache
Cache first: the application will look for the result in the cache before making a request to the network.
Network and cache: the application will return the content of the cache but will still make the request to update it. This option allows to have a fast answer.

The Persistent Cache option allows you to keep the cache even after closing the application.

Test request

Now that your API connection is configured, check that everything is working properly and that the data is being sent back.

Double-click the HTTP component in the Objects list.

Click on the Test Request button to launch a request.

The results of your request appear: if the raw data is displayed, the API has been correctly configured. You see how your data is structured and PandaSuite Studio is then able to visually show you your data in the explorer of the data binding window.

This is also where you can configure the pagination. Airtable limits the number of results to 100 per page but you can easily remove this limitation. Learn more about this: API pagination

Display data

Insert a Collection component to display your Airtable data as a list. Create a custom design and connect it to this HTTP component. You can add filters, create bookmarks, search.

💡 Learn how to display a collection from Airtable : Display collection

Start request

You now need to automatically launch the request to the API, for example when the screen is displayed.

In this case, select the screen and click on Actions.

Select Current Screen > Interact with a component > HTTP Component > Start request