Airtable Connector
Plugin page: https://bubble.io/plugin/airtable-connector-1719145988510x309696286738350100
Description
Free Airtable Connector by The Simple Labs allows to quickly load data from Airtable either with lazy loading or pagination without any extra efforts. Moreover, the plugin DOES NOT consume workload units for getting data from Airtable.
Airtable Plugin created by Bubble has a significant disadvantage: it gets all the data from the database without an ability to handle pagination and data loading by chunks, so it is slow and consumes many workload units. You can compare the two solutions on our demo page.
Important!
Please, do not use this plugin for displaying sensitive data. As the loading happens on the client's side, the API key for reading the data may be exposed. We care about privacy of your data so we do not recommend using this plugin with secret information.
However, it works perfectly for displaying data accessible to anyone: for example, store catalogues.
Features
Absolutely Free: Airtable Connector plugin is completely free to use!
WU optimised: The solution does not consume any workload units for loading data from Airtable.
Easy Pagination: The plugin provides "fetch page" actions which handle the pagination for you. You don't have to spend time trying to configure the offsets.
Lazy Loading: If you want, you can display all the data without breaking it into pages, seamlessly for user. The plugin leverages a custom solution for loading data when the user scrolls through the list, which allows to load data in chunks and significantly reduce page loading time.
How to Use
Add plugin: Place "AT Connector" element on the page, where you want to display information from Airtable.
Create an API key: In Airtable, click on your profile picture. There, select "Developer Hub".
In "Personal access tokens" tab, click "Create token".
Issue the key: Fill out the fields and hit "Create token".
Name - could be anything. You can use "Bubble App" so you would know what this token is for in the future.
Scopes - !IMPORTANT! - add only "data.records:read". Adding anything else here will expose a vulnerability for your tables.
Access - !IMPORTANT! - only add the table you're planning to display.
The API keys must have the most limited yet sufficient scope to ensure the security of your data on Airtable.
Copy the token. This token can be shown once, so please store it in a safe location.
Fill out Authorisation field: Paste "Bearer <key>" to the plugin element.
Get the API URL: Click "Help" in top right corner and find "API Documentation" link.
Copy the URL for your spreadsheet: Find your spreadsheet in the sidebar and click "List records". To the left, you will see the curl request:
Copy the link and remove maxRecords=3& from it. You'll get something like that:
You need to define how many items will be displayed per page. Add &pageSize=<your_page_size> to the end of the link, for example &pageSizee=10:
Great job! Now paste the link to the plugin.
Configure the Response Type.
Bubble does not recognise the Airtable response type by default, so we will have to set it up manually through the API connector.
If you don't have API connector in your application, you can install it from "Plugins" section.
10.1. In the API connector, click "Add new API", and then click "Import another call from cURL".
10.2 Insert the cURL from the step 8. Example:
10.3 Rename the API call (to anything), paste the API key after "Bearer", and then hit "Initialize call".
10.4 Click "save".
10.5 Select the new data type in the plugin configuration:
Set up Lazy Loading (optional): If you want the items to be loaded upon scrolling, check this option.
If it's enabled, you need to add an ID attribute to the repeating group which will contain the items. (make sure the ID attributes are enabled in the settings of your application).
Almost there! Now you can configure how you will display the items.
Set the new response type as the type of content in a repeating group.
Set the data source as "Data" value of the connector plugin element.
Now you can pull the fields to the repeating group's cells.
Setting up the pagination (optional): To add pagination, just create two buttons on the page and add the following events to happen on click:
All done! 🥳
Tips
*If you need to revoke an access token, go to Developers section, select the keys you no longer need and click "Delete token".
Last updated
