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.

Integrating Draftbit & Airtable

Setup steps in Airtable

If you don't have an Airtable account, create one here.

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 to create a Base from scratch. Here is how the example Airtable Base looks like:

The Base above has a field name title with multiple records inside it.

📘
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 & API Key

Identify your Base URL and API key — you'll need them in the next step.

To get your Base URL & API Key:

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.

Screenshot 2021-07-12 at 10.40.15 PM.png

After the Airtable documentation opens for the selected Base, click Authentication from the left menu bar.
Pay attention to the right column. Under Example Using... you will find the Base URL.

To view the API key, toggle the button show API Key from the top right corner.

Your Base URL should look something like this:

https://api.airtable.com/v0/<your-base-id>

Setup steps in Draftbit

Save Airtable API key as Authorization Header

Each request sent to Airtable Base requires a valid API key. In the previous step, you learned to get the API key. To authorize your Draftbit app with Airtable:

Open the Settings tab from the top menu bar.
In Project Settings, navigate to App Variables.
Enter a name to access the API Key and the value for it. For example, Authorization_Header.
The value of this key requires you to enter an authorization token that starts with syntax is Bearer your-api-key (the space between Bearer and your-api-key is required).
In place of paste your own your-api-key (from the previous section) and then click Add.
Click Save.

Add Airtable Base URL in Draftbit

From the top menu bar open API & Cloud Services.
From the Connect a service menu, click on Airtable.
In Step 1: Enter a name for your REST API. Then, paste your Base URL (from the previous section) into the Base URL field.
In Step 2: Under Key add Authorization. Under Value, select the global variable (from the previous section) to add the actual value of the API key.
Click Save.

Do note that, we will not add the name of the base in the Base URL when creating the service. We will pass the base name as the path when creating an endpoint for this service.

Using Airtable with Draftbit

Fetch all records

In this section, let's populate a Fetch component with all the data from a simple Airtable Base and then display the data fetched from the Airtable in a List component.

For reference, here is a how the Components tree looks like for this screen:

The next step is to create an endpoint. Let's try fetching the data using a GET HTTP request. Open the API & Cloud Services modal, select the Airtable service, and then:

Click Add endpoint.
In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
In Step 2: add the base name path: /your-base-name.
In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Airtable Base.
Click Save.

On app screen:

Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
For Service, select the name of the Airtable Service.
For Endpoint, select the endpoint you want to fetch the data from.
Select the List component in the Components tree and go to the Data tab from Properties Panel.
In Data, select records from the dropdown menu.
Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
Add a {{varName}} value (inside the curly braces) to represent a data field from the Airtable Base. For example, we add {{title}} to represent the column name from the Airtable Base.
Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

Fetch records by using Airtable query parameters

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.

sort

Each Airtable has a sort parameter. It overrides the default view specifies how the records will be ordered in the list of data. 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 {{field}} in the below syntax is the key of the column from the table and the {{direction}} is the order to sort records.

/your-base-name/?sort%5B0%5D%5Bfield%5D={{field}}&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.

In your Airtable service:

Click Add endpoint.
In Step 1: enter a name for the endpoint. Select the HTTP method to GET.
In Step 2: add /your-base-name/?sort%5B0%5D%5Bfield%5D={{field}}&sort%5B0%5D%5Bdirection%5D={{direction}} as a path.
Then, add Test values for the {{field}} and {{direction}}. For example, for field, we add title and for direction, we add desc (to display items in list in descending order).
In Step 4, click the Test button next to the Endpoint to verify the response coming from the Airtable Base.
Click Save.

maxRecords

Airtable allows fetching a max number of records in the list. Use the maxRecords parameter along with the following syntax as the path in Step 2 (when creating an endpoint) where {{number}} is the test value of records you want to fetch.

/your-base-name/?maxRecords={{number}}

pageSize

The pageSize parameter allows fetching records in each request. The syntax for it to add in Step 2 (when creating an endpoint) is as follows:

/your-base-name/?pageSize={{number}}

Here {{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.

fields

The fields parameter is used to fetch only the records that are specified by a field name. The {{field}} in the below syntax (to add in Step 2 when creating an endpoint) 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.

/your-base-name/?fields%5B%5D={{field}}

filterByFormula

The filterByFormula parameter is used to filter records. It evaluates each record and if the result is not 0, false, "", NaN, [], or #Error!, the record will be included in the response.

Here is the syntax with an example of fetching records that do not have any empty fields. The {{field}} in the syntax below (to add in Step 2 when creating an endpoint) is the key to the column from the table for each record.

/your-base-name/?filterByFormula=NOT%28%7B{{field}}%7D%20%3D%20%27%27%29

📘
How to create Airtable Queries?
The above syntax for each query parameter varies depending on the data you have in your Base. We recommend you to use Airtable API URL Encoder. You can use it to encode the parameters for listing records in a table.

Fetch a single record

In this section, let's populate a Fetch component with a single record from the Airtable Base. For reference, here is a how the Components tree looks like for this screen:

Also, from the List screen, we are sending the id of each list item as a navigation parameter when an action is triggered on the Touchable/Button component. This action will let you navigate to the screen where a single record is fetched and its details are shown.

To fetch a single post from Airtable, you'll have to specify a record id that is coming from the navigation parameters.

Data is fetched using a GET HTTP request. Open the API & Cloud Services modal from the top menu, select the Airtable service, and then:

Click Add endpoint.
In Step 1: enter a name for the endpoint.
In Step 2: add the /your-base-name/{{id}} variable. Then, add a Test value for the {{id}}.
In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Airtable Base.
Click Save.

On app screen:

Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
For Service, select the name of the Airtable Service.
For endpoint, select the endpoint you want to fetch the data from.
Set the value for the id in the Configuration > URL Structure section to Navigation > id.

Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
Add a {{varName}} value (inside the curly braces) to represent the data field from the Airtable Base. For example, we add {{title}} to represent the field and value from the Airtable Base.
Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

Submit new data

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using HTTP POST method.

Your component needs to have:

accepts user input
has a Field Name prop

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Airtable service:

Click Add endpoint.
In Step 1: enter a name for the endpoint and select the Method to POST.
In Step 2: enter the base name as path: /your-base-name.
In Step 3: add a valid Body structure to submit a POST request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
Check the Create records tab back in your Airtable API documentation to get an idea of how your request is structured.
In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Airtable Base.
Click Save.

An example of how Body in a request will look like:

{
  "records": [
    {
      "fields": {
        "field name in Airtable": {{the value of the Field Name prop in Draftbit}}
      }
    }
  ]
}

Using a Touchable/Button component, you can trigger the action API Request to submit the data to the endpoint.

The textInputValue passed in the above example is the value of the Field Name property on the TextInput component:

549c918-CleanShot_2021-07-13_at_01.39.312x.png

Update data

The PATCH request is used to update the single entry in the Airtable base record. It accepts similar input components as mentioned in the POST request and the API Request is triggered using a Touchable/Button component.

Your component needs to have:

accepts user input
has a Field Name prop to update data using an API Request

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Airtable service:

Click Add endpoint.
In Step 1: enter a name for the endpoint and select the Method to PATCH.
In Step 2: enter the base name as path: /your-base-name.
In Step 3: add a valid Body structure to submit a PATCH request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
Check the Update records tab back in your Airtable API documentation to get an idea of how your request is structured.
In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Airtable Base.
Click Save.

Below is a general breakdown of what the request's Body structure will look like. Make sure to include the id of a particular field to update it. This way, Airtable will know what field you are updating in the Base.

{
  "records":
    [
    {
    "id": {{value of the id of a specific field}},
    "fields": 
      {
        "field name in Airtable": {{the value of the Field Name prop in Draftbit}}
        }
    }
  ]
}

Using a Touchable/Button component, you can trigger the action API Request to update the data to the endpoint.

Delete data

The DELETE request is sent 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:

Click Add endpoint.
In Step 1: enter a name for the endpoint and select the Method to DELETE.
In Step 2: add /your-base-name/{{id}} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record, for example, as a navigation parameter.
Check the Delete records tab back in your Airtable API documentation to get an idea of how your request is structured.
In Step 4: click the Test button next to the Endpoint input to verify the response from the Airtable Base.
Click Save.

Using a Touchable/Button component or an Icon Button, you can add the API Request action to trigger the DELETE request.

Displaying Images from an Airtable Base

Airtable allows storing images as an Attachment field type in a Base. This field type allows attaching images, documents, and any other file type that can be viewed or downloaded.

Consider the example below. It has five rows of data, where each row has a column called Attachments.

You can fetch all the rows in a Draftbit app using a GET request.

Airtable comes with a response array where the data for each row is an object. If there is an image attachment in the row, the individual row object will contain an Attachments array. Inside this sub-array, you will find the URL of the image.

You will also find a thumbnails object that further contains the image URLs in different sizes. These sizes distinguish the size of the image determined by the Airtable after uploading the image to the Base. Each image size is also distinguished by its unique URL.

An example object returned from the previous GET request that contains image data.

{
  "fields": {
    "Attachaments": [
      {
        "0": {
          "id": "attvrVilwzdi10A9Z",
          "width": 1400,
          "height": 1400,
          "url": "https://dl.airtable.com/.attachments/f74a1ddfcd378f9c13981d49abe10c9d/11a1e03b/0bf83cad4a350e252c64063dc699c7ae52ba8870873a438735fa1c7a0e5af783fc457271e7cbeb6bb5bf44d82cc366a531671980f5d2944a50a74cf4dc36c9af.jpeg",
          "filename": "0bf83cad4a350e252c64063dc699c7ae52ba8870873a438735fa1c7a0e5af783fc457271e7cbeb6bb5bf44d82cc366a531671980f5d2944a50a74cf4dc36c9af.jpeg",
          "size": 107215,
          "type": "image/jpeg",
          "thumbnails": {
            "small": {
              "url": "https://dl.airtable.com/.attachmentThumbnails/bacee8ed8e241ec4571be0ec47def2a2/06a50134",
              "width": 36,
              "height": 36
            },
            "large": {
              "url": "https://dl.airtable.com/.attachmentThumbnails/f1e826b646c5bbe1e5b55ffa466f9cf2/2eab6346",
              "width": 512,
              "height": 512
            },
            "full": {
              "url": "https://dl.airtable.com/.attachmentThumbnails/7765845333d721afa33dfe9003a755e5/1890e026",
              "width": 3000,
              "height": 3000
            }
          }
        }
      }
    ]
  }
}

Let's learn how to map the value of the image URL coming from the Airtable Base to an Image component. Initially, set up your screen Components tree as shown below. The important thing in the Components below is to nest a List component inside another List.

Configure the GET request URL on the Fetch component.

Map the Airtable records array on the List component.

Map the fields.Attachments array to the nested List component.

Select the Image component and go to Properties Panel > Data tab. Set the value of Source Type to Data. Set the value of the Source to one of the url fields.

You can nest other components such as Text under the top-level List component in the Components tree.

Additional Resources

To get familiar with Airtable, check out their handy guides.
Airtable API URL Encoder.

Airtable

What is Airtable?

Integrating Draftbit & Airtable

Setup steps in Airtable

📘
Maintain good Field hygiene!

Get your Base URL & API Key

Setup steps in Draftbit

Save Airtable API key as Authorization Header

Add Airtable Base URL in Draftbit

Using Airtable with Draftbit

Fetch all records

Fetch records by using Airtable query parameters

sort

maxRecords

pageSize

fields

filterByFormula

📘
How to create Airtable Queries?

Fetch a single record

Submit new data

Update data

Delete data

Displaying Images from an Airtable Base

Additional Resources

What is Airtable?

Integrating Draftbit & Airtable

Setup steps in Airtable

📘Maintain good Field hygiene!

Get your Base URL & API Key

Setup steps in Draftbit

Save Airtable API key as Authorization Header

Add Airtable Base URL in Draftbit

Using Airtable with Draftbit

Fetch all records

Fetch records by using Airtable query parameters

sort

maxRecords

pageSize

fields

filterByFormula

📘How to create Airtable Queries?

Fetch a single record

Submit new data

Update data

Delete data

Displaying Images from an Airtable Base

Additional Resources

📘
Maintain good Field hygiene!

📘
How to create Airtable Queries?