Airtable, Airtable.js and the new HTML Previews

Actions - Share What You've Made
,
1

I’m just going to put this one out there as an incomplete example, but one that might be useful to a few folks looking to do more with Airtable and Drafts. I’ve built an example action which shows how to work with Airtable within an HTML Preview in Drafts:

Install the Airtable.js Example Action

Background

Airtable provides their own Airtable.js JavaScript library for working with the Airtable API. And their API explorer show examples for working with your Airtable data using this library.

The library itself cannot run directly in a Drafts script step, because while it is JavaScript, it relies on features not available in the basic JavaScript language - but which are available in a browser. Meaning you can use this library when loaded in an HTML Preview in Drafts.

Note that you can work directly with the Airtable API in Drafts script, other have posted examples of techniques. It’s just nice to be able to use Airtable’s own library, since it provides sample code.

Configuring the Action

To use this action, you will need to make a few modifications.

  • Go to your Airtable database, and click “Help > API Documentation”
  • In the API explorer, click the “Javascript” tab and “show API Key” option (see below).
  • Make note of your base ID and API key in the example code.
  • Edit the action in Drafts, and change the “Define Template Tag” steps for the airtableAPIKey and airtableBase to match these.
  • Edit the airtableTable define template tag step to match the name of one of your tables.
  • Edit the airtableFields define template tag step to be a comma-separate list of actual fields in your Airtable table.

CleanShot 2020-06-17 at 09.37.42@2x
CleanShot 2020-06-17 at 09.37.42@2x1094×346 29.8 KB

Run the Action

When you run the action, a preview window will appear, with your default table name and field names as configured above. Click the “Update” button, and if everything was configured right, you should see a table populated with rows from your Airtable table.

Click on “Select” on one of the rows, and the preview will close, and the script step after will just echo back the values you selected.

Conclusion

This action is just a demo, not useful in and of itself, but hopefully will get some ideas going for people interested in Airtable integration, and show how to configure such actions. If you look at the scripts embedded in the HTML Preview, you will note the preview loads the airtable.js library from a remove server, and when the “Update” button is pressed, triggers a script that loads data from the Airtable API, using example code from Airtable’s API explorer.

4 Likes