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.

• 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 left menu.
• 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 ` is required).
• In place of paste your own ` (from the previous section) and then click Add.
• Click Save.

Add Airtable Base URL in Draftbit

• Open the Data tab from the left menu to 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 Layout tree looks like for this screen:

Inside of the View component, you can place as many Text components as 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 a GET HTTP request. Open the Data 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 Layout 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 Layout and go to the Data tab from Properties Panel.
• For Data, select records from the dropdown menu.

• Then, select the Text component in the Layout 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 Layout 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 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 Data modal from the left 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.

• Select the Fetch component in the Layout 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 Layout 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

You need to use a component that:

• accepts user input and
• has a Field Name property to submit new data.

Examples of these include data-enabled components such as TextInput.

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 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:

Update data

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

You need to use a component that:

• accepts user input and
• has a Field Name property to submit updated data.

Examples of these include data-enabled components such as TextInput.

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 component, you can trigger the action API Request to update the data to the endpoint.

Delete data

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:

• 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 component or an Icon Button, you can add the API Request action to trigger the DELETE request.

Addition Resources

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