What is Airtable?
Organize anything with Airtable, a modern database created for everyone. Airtable is a fast and flexible way to create tables to keep track of anything, from sales leads to vacation planning to inventory management.
Connect Airtable to Draftbit
Setup steps in Airtable
If you don't have an Airtable account, create one here. To get familiar with Airtable, check out their handy guides.
Before you start in Draftbit, make sure you have an Airtable Base created. To create a new base:
- From your Airtable dashboard, click
+ Add a Base
- You can start from scratch, or start from a template.
For this guide, we will use an Airtable create a Base from scratch. Identify your Base URL
and API key
— you'll need them in the next step.
Maintain good Field hygiene!
The names you use for your fields will be used directly in your code so it's recommended that you use
camelCase
Get your Base URL:
- From your Base, click the
Help
in the top right corner. - Then click the
API Documentation
tab. - Navigate to the
Authentication
tab from the left-navigation bar. - Your base URL should look something like
https://api.airtable.com/v0/<YOUR_BASE_ID>/<YOUR_TABLE_NAME>


Get your API key:
- From your Base, click user avatar in the top right corner.
- Navigate to the
Account
tab > Overview`. - In the
API
section, a personal API key is already generated to be used.


Setup steps in Draftbit
To add the Airtable Base URL to your Draftbit app:
- Open the
Data
tab on left-navbar. - From the
Add a service
menu, click onRest API
. - Enter a name for your REST API.
- Paste your
Base URL
(from the previous section) into the Base URL field. - Click
Save
.


Your Airtable Base requires authorization to access the data. To authenticate your Draftbit app with Airtable:
- Open the
Settings
tab on left-navbar. - In Project Settings, navigate to
Global Variables
. - Enter a
key
to access the API Key and the value for it. - The Authorization API KEY value requires you to enter a Bearer token. The syntax is
Bearer <YOUR_API_KEY>
. - In place of paste your own
<YOUR_API_KEY>
(from the previous section) and then clickAdd
. - Click
Save
.


Now, you are able to access the Authorization global variable as Header:
- Click the
+
from the Headers section to add a new Header. - Type
Authorization
for the Key. - Select the Global Variable for
Authorization
(from the last step). - Click
Save
.


Using Airtable with Draftbit
Fetch all records from an Airtable base into a List in Draftbit
This recipe will show you how to:
- Create a simple Fetch-List in Draftbit
- Populate that Fetch-List with data from a simple Airtable base
To a blank screen in Draftbit, add a nested Fetch component, List component, View component and a Text component so that your Layer Tree looks like this:


Inside of the View component, you can place as many Text
you would like to be rendered for each entry in your data set.
The next step is to create an endpoint. Let's try fetching the data using GET
request:
- Click
Create new endpoint
. - Click the 'Test' button next to the Endpoint input to make sure you've successfully connected to your Base.
- Once everything looks right, click Save to close the modal.


- Select the Fetch component in the Layer Tree and select the
Service
you have created. - Select the Endpoint you want to fetch the data from.
- Here is also a
Preview
mode is shown on how the data is fetched from the service API.


- Select the List component in the Layer Tree.
- Change its Mapped Value to
data.records
under the Data Tab. - Now you can configure a Mapped Value on each Text and Image component you have inside the View of your Fetch component.


Fetch records by using query parameters in a Draftbit app
The Airtable REST API allows you to fetch data by using query parameters. These are optional parameters to use but could depend on the way you want to fetch the data for a particular screen. The sort
parameter overrides the default view of how the objects in the list of data are fetched. Each sort
object has a field
key that specifies the name of the column in the table. There is also an optional key on the sort
object that is passed and is called direction
. It accepts either asc
or desc
as its value.
Here is the general syntax to sort items. The {{COLUMN_NAME}}
in the below syntax is the key of the column from the table and the {{DIRECTION}}
is the order to sort records.
/?sort%5B0%5D%5Bfield%5D={{COLUMN_NAME}}&sort%5B0%5D%5Bdirection%5D={{DIRECTION}}
To sort the order of records from Airtable, you'll have to specify a field
with a key as the name of the column from the table and the direction
with a value of desc
when fetching them in the Preview mode.
- Click
Create new endpoint
. - Enter a name for this endpoint.
- Add
/?sort%5B0%5D%5Bfield%5D={{COLUMN_NAME}}&sort%5B0%5D%5Bdirection%5D={{DIRECTION}}
as a path inAdd Path & Params
. - Add a Test values for the
{{COLUMN_NAME}}
and{{DIRECTION}}
. - Click the
Test
button next to the Endpoint input to make sure you've successfully connected to your Airtable REST API. - Once everything looks right, click
Save
to close the modal.


Airtable REST API allows using other query parameters as well. To fetch a max number of records in the list use the maxRecords
parameter along with the following syntax as the path in Add Path & Params
where {{NUMBER}}
is the test value of records you want to fetch.
/?maxRecords={{NUMBER}}
The pageSize
parameter allows fetching records in each request. The syntax for it in the Add Path & Params
is as follows where {{NUMBER}}
is the determined number of records returned in each request along with an offset
that can be used to fetch the next page of records.
/?pageSize={{NUMBER}}
The fields
parameter is used to fetch only the records that are specified by a field name. The {{COLUMN_NAME}}
in the below syntax is the key of the column from the table for each record. This parameter can help you reduce the amount of data to be fetched.
/?fields%5B%5D={{COLUMN_NAME}}
The filterByFormula
parameter is used to filter the records. It evaluates each record. Here is the syntax with an example of fetching records that do not have any empty fields. The {{COLUMN_NAME}}
in the syntax below is the key to the column from the table for each record.
/?filterByFormula=NOT%28%7B{{COLUMN_NAME}}%7D%20%3D%20%27%27%29
Fetch single record in a Draftbit app
To a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:


To fetch a single post from Airtable, you'll have to specify a record ID
which is found when fetching data in the Preview mode.
- Click
Create new endpoint
. - Enter a name for this endpoint.
- Add the
/{{ID}}
inAdd Path & Params
. - Add a Test value for the
{{ID}}
. - Click the
Test
button next to the Endpoint input to make sure you've successfully connected to your Airtable REST API. - Once everything looks right, click
Save
to close the modal.


- Select the Fetch component in the Layer Tree and select the Service you have created.
- Select the Endpoint you want to fetch the data from.
- Add the value for the
ID
in theConfiguration
section. This value is used to fetch the single record. - Now you can configure a Mapped Value on each Text component to
fields.title
you have inside the View of your Fetch component. - Here is also a
Preview
mode is shown on how the data is fetched from the service API.


POST data from a Draftbit app to an Airtable base record
You need to use a component that:
- accepts user input and
- has a
Field Name
prop to POST data to an Airtable base.
Examples of these include:
Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Airtable service.
In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to POST using the dropdown.
- Adding the Table name (if it differs or if you want to add data to different tables) in the
Add Path & Params
input. [Optional] - On the right-hand side of the modal, click the
Body Structure
tab and insert the request of the body. This will differ depending on the Fields you have in your Airtable.


- Check the
Create records
tab back in your Airtable API documentation to get an idea of how your request should be structured.


Below is a general breakdown of what the request will look like. You're able to add multiple fields to a request, just make sure you include a comma after each field.
{
"records":
[
{
"id": [value of the id of a specific field],
"fields":
{
"[THE FIELD NAME IN AIRTABLE]": {{the value of the Field Name prop in Draftbit}}
}
}
]
}
- Using a Touchable component, you can add the endpoint to for the POST request.


To trigger the action, tap the Touchable component and the data added in the Body Structure
tab is added to the Airtable base record.
PATCH data from a Draftbit app to an Airtable base record
The PATCH request is used to update the single entry in the Airtbale base record. It accepts similar input components as mentioned in POST request and the request is triggered using a Touchable component.
For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Airtable service. In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to PATCH using the dropdown.
- Adding the Table name (if it differs or want to add data to different table) in the
Add Path & Params
input. [Optional] - On the right-hand side of the modal, click the
Body Structure
tab and insert the request of the body. This will differ depending on the Fields you have in your Airtable.


Below is a general breakdown of what the request will look like. You're able to add field to a request, just make sure to include the id
of a particular field to update it.
{
"records":
[
{
"id": [value of the id of a specific field],
"fields":
{
"[THE FIELD NAME IN AIRTABLE]": {{the value of the Field Name prop in Draftbit}}
}
}
]
}
DELETE data from a Draftbit app to an Airtable base record
The DELETE request is to the Airtable base record with an item's ID to remove that particular record from the table.
For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Airtable service. In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to DELETE using the dropdown.
- Adding the
id
field to delete in theAdd Path & Params
input. [Optional]


Using a Touchable component and an Icon component, you can add the endpoint for the DELETE request.


Updated 13 days ago