Use Send Data to Add an Apartment to an Airtable Apartment Hunting tracker

In this tutorial, we’re going to create an Apartment Hunting form that will submit data to an Airtable base. We’re going to use an Airtable template so it’s easy for you to follow along.

To get started you’ll need:

  • A new app in Draftbit with 1 Blank Screen.
  • Airtable’s Apartment Hunting template (click the ‘Use template’ button in the top right to copy the base to your own Airtable workspace. If you don’t have an Airtable account, you can sign up for a free one here).

Lay out the Screen

In this current iteration of sending data, you’re only able to send strings of data meaning that Airtable fields that link to records or store values as an ID are currently incompatible. However, we’re working on making that possible in the near future!

Add Components

For this tutorial, we’ll just focus on a few fields — Name, Notes, and My Rating. To get started, add the following components to your screen. (When you’re done, the Layer Tree should match the screenshot below):

  • View
    • Text Field—Solid
    • Text Area—Solid
    • Radio Button Group
    • Button Solid

apartment_hunting

Configure Components

Configure each component as follows:

View

  • Add 16pt padding to the right, left, bottom and top

Text Field - Solid

  • Change Field Name to Name
  • Change the Label to Name

Text Area - Solid

  • Change Field Name to MyNotes
  • Change the Label to Notes

Radio Button Group

  • Add 3 Options:
    • 1: Somewhat Interested 😌
    • 2: Very Interested 😃
    • 3: Top Pick 😍
  • Change Active Color to Primary
  • Change Inactive Color to Divider
  • Change Selected Content Color to Strong
  • Change Field Name to MyRating

Button Solid

  • Change Text to Submit

After making these changes, you should end up with a screen like this:

Set up the API

Grab API Credentials from Airtable

Next, go back to Airtable. We will grab the Base URL and Authentication to connect our App to our Base.

From your Airtable Base:

  • Click the Help button in the top right corner.
  • Select API documentation from the dropdown.
  • Scroll or navigate down to the Authentication section.

apartmentauth

Click the ‘show API key’ checkbox to generate your key. You’re only going to want to copy the highlighted portion of the URL (as seen below) into Draftbit for now.

Paste API Credentials into Draftbit App

Go back to your app in Draftbit. Click the ‘Settings :gear:’ button at the bottom of the left-hand ribbon to open App Settings, then:

  • Navigate to the Variables tab.
  • Paste the Airtable API key into the Value field.
  • Name your API key “airtableAuth” in the Key field.
  • Click “Add” to save the key-value pair.

Next, (without closing App Settings) navigate to the Services tab and:

  • Add a new REST API.
  • From the Config tab:
    • Type “Airtable” into the Name field.
    • Paste your Airtable URL into Base URL field.
  • From the Headers tab:
    • Click the “Add” button.
    • Type “Authorization” into the Key column.
    • Select your saved API key from the Value dropdown.
  • Click “Save” to finish the setup.

Don’t forget — exclude the Table Name from the Airtable URL you paste into Draftbit

airtableservice

Build the POST request

Add Submit Data Action to Touchable

Select the Button Solid in the Layer Tree and go over to the Interactions tab in the Properties Panel.

  • Select Submit data from the Action dropdown.
  • Select Configure Data Submission.
  • Select your saved Airtable from the “Base API or Service” dropdown and append /Apartments to the Endpoint input so it looks like this:

Configure Data-Enabled Components

Add a Key/Value pair for each input on the screen and configure the inputs and dropdowns as follows. When you’re done, your screen should match the screenshot below:

  • Key = fields["Name"]
    • Value = this.state.Name
  • Key = fields["My Notes"]
    • Value = this.state.MyNotes
  • Key = fields["My Rating"]
    • Value = this.state.myRating

Under the Key column, it’s very important that the Field Name inside of the brackets matches the name of the columns in Airtable. You can also use fields.FIELD_NAME but only when the Field Name in Airtable isn’t separated with a space.

Next, go to the Headers tab and add Content-Type—Custom value: application/json as pictured below:

Save and exit the Configure Data Submission modal.

Testing the Request

Confirm successful setup

Enter some lorem ipsum text into the inputs on your screen in Live Preview on your phone, or Web Preview in the browser. Tap the Submit button on your app screen to submit the data. You should see a new row of data appear in your Airtable Base—if so, CONGRATS!, you’ve added Submit Data to your app.

Troubleshooting

If you’re having trouble getting the data submission to work, it’s suggested that you check to make sure you’ve connected your app to Airtable correctly and the Keys/Values are set up properly.

If you’re testing in the browser, you can open the browser console (Option + ⌘ + J on Mac or Shift + CTRL + J on Windows) which will let you know the type of error that is occurring.

  • If you see a 422 error appear, that means there’s an issue with the way the Keys/Values are not matching to Airtable.
  • If you see a 401 error, that means the Authorization key was entered incorrectly.
  • If you see a 404 error, that means you’ve typed in the name of the Endpoint incorrectly.

If you’re still having trouble getting the submission to work, we’re happy to help! Simply Reply to this topic with your question and we’ll get back to you ASAP.

Questions, Feedback, Recommendations? We’d love to hear those in the comments, too!