Tutorial: How to send data to Airtable using the Custom Screen Code feature

When we released the Fetch component, we showed you how to make a POST request to Airtable after exporting your code out of Draftbit. Now, with Custom Screen Code, you’re able to make the same request inside the Builder with just a few lines of code!

Adding the Screen

For this tutorial we’re going to use the Basic Profile screen from the Examples Screens gallery. Click ‘Screens’ in the left-hand column of the Builder and then click the + in the right-hand corner and you’ll find the Basic Profile screen in the first row.

add_basic_profile

Setting up your Airtable base

In Airtable, add a new base and select ‘Start from scratch’. When you go inside the base you’ll notice that there are 3 columns — “Name”, “Notes” and “Attachments”. Delete the “Notes” and “Attachments” columns, change the “Name” column to “name” and add another column called “title”.

Setting up your Custom Screen Code

In Draftbit, open up the Screen Settings modal and switch over to the Custom Screen Code section. Add a new function and give it a name (postToAirtable, for example).

opencustomcode

Copy and paste this block of code into the modal:

fetch("BASE_ENDPOINT", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Authorization": "Bearer API_KEY"
      },
      body: JSON.stringify({
        fields: {
          name: this.state.name,
          title: this.state.title
        }
      })
    })

Before you save the function, you’ll need to replace the BASE_ENDPOINT and API_KEY in the request. To find these values, click ‘Help’ at the top right of your base and select ‘API documentation’ from the dropdown.

Once you’re inside of the API documentation, go down to the ‘Authentication’ section. make sure to check the ‘show API key’ checkbox in the top right to automatically fill in the example URLs. Copy the URL under the ‘EXAMPLE USING BEARER TOKEN’ section and paste it into the BASE_ENDPOINT at the beginning of the function. Copy the API Key (the part covered by the red rectangle in the picture below) and paste that into API_KEY in the headers section of the request. Once finished, you can save the function and exit the modal.

Putting it all together

Configuring the TextInputs

Select the Text Inputs in the Layer Tree and go to the Configs section of the Properties Panel. Set Field Name of the first Text Input is set to ‘name’ and the Field Name of the second Text Input is set to ‘title’.

:exclamation:It’s very important that the values of:

  • The title of the column in Airtable
  • The Field Name of the TextInput (or whatever component you’re using to receive user input)
  • The fields of the request body

are all exactly the same or else making the POST request will not work.

Configuring the Button

Select the Button Solid in the Layer Tree and go to the Actions tab of the Properties Panel. Switch the Action to ‘Custom Function’ and select ‘postToAirtable’ from the Custom Function dropdown.

Once you’ve configured everything, test it out by filling out the screen from the Builder and clicking the Button to send the information to Airtable!

airtabletutorial

2 Likes