Connect to Airtable

You can retrieve data from Airtable and display it in your application in a collection.

In this article

Create collection

It is necessary to create a collection to manage and display your data. The Collection component allows you to customize your list and connect to an internal or external data source. 

Insert the Collection component

Click on Components and insert a Collection component. 
In the Properties window, choose the orientation of your collection: Vertical or Horizontal. You can add margins between your elements. 

Create an item

Double-click on your collection to enter it. 
Choose the UI design for an item of your list (as a card, an item...). This item will be automatically duplicated and fed from your database.

This item can be composed of several objects: an image, one or several text blocks, a shape... In the Collection component, you need to insert a Group component and add other objects inside. 

Structure the Airtable database

Now that you have prepared the design of your collection, let's move on to the content of the database. 

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 free account on Airtable:  https://airtable.com/signup

Create a base 

After the registration process, create a new database by clicking on Add a base.
Structure your data in a table, adding Fields for each type of data. 

You can customize the Field type:

You can import your data from a .csv file, Microsoft Excel or Google Sheets: 

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

Connect to Airtable API

Once your database is ready, it's time to make the connection between Airtable and your application through a connection to the Airtable API. 

Insert the HTTP component

The connection to an API is made with the HTTP component.
Back in PandaSuite Studio, click on Components and insert an HTTP component. 
It is best to place this component in the foreground so that it can be active and queried from any screen in the application. Otherwise, place it in the same screen as your collection.

Configure the HTTP component

Open the  Properties window. 

URL

Copy and paste the URL of the Airtable API. To find this URL, go to your Airtable table, click on API Documentation in the HELP menu.

Select your table on the left and click on List Records

Copy and paste everything from the https: to the "?" without including the "?". The rest of the information corresponds to Query Strings which will be specified below. 
Example of an API URL: 
https://api.airtable.com/v0/appIGPMYLUbwWCCbZ/Table%201

Headers

Add Authorization as key and Bearer YOUR_API_KEY as value. 
YOUR_API_KEY is your personal API key. To find your personal API key, go to your account. 

Method

The HTTP component allows to send or receive data thanks to different available methods. Select the GET method to request data from a specific resource. 

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

Click the Edit button of the HTTP component (or double-click the visible field of the HTTP component).
Click the Test Request button.

View the results of your request: if the raw data matches your request, the API has been correctly configured. These fields will allow you to correctly structure your data.  

Display data

Connect source

Select your Collection component. 
In the Properties window, fill in the Source using the HTTP component ID: 
[data:ID_HTTP(/records)]

in which ID_HTTP is the HTTP component identifier. Double-click on the HTTP component name from the Properties window to get this ID. 

Associate a variable on the text

Select the text block. In the Properties window, click on the icon at the top right and the Add > Source button.

[data:ID_HTTP(/records/@getById:[data:(rowId)]/fields/Name)]

In which Name is the name of the corresponding column.

Associate a variable on an image

Select the image. In the  Properties window, click on the icon at the top right and the Add > Source button.

[data:ID_HTTP(/records/@getById:[data:(rowId)]/fields/images/0/url)]

In which Name is the name of the corresponding column.

Start request

You now need to automatically start the request to the API, for example when the screen is displayed.
In this case, select the screen and click on Actions.
Select Current View > Interact with a component > HTTP Component > Start request

Filter a collection

The filter is an option of the Airtable API: filterByFormula. To know more about it: https://support.airtable.com/hc/en-us/articles/203255215-Formula-Field-Reference

a8f789a284a540fbf6bc8b0592bfbdb4.png

Go to the HTTP component and add a Query String field
Add filterByFormula as key and {Category }="xxx" as value.
You need to create one HTTP component per request.

Still need help? Contact Us Contact Us