Exploring Airtable

Building an online directory without writing code

Exploring Airtable

Airtable could be succinctly described as Spreadsheets 2.0 or "Spreadsheets on Steroids."

That's because it feels like a spreadsheet app, but it has additional views (Grid, Form, Calendar, Gallery, and Kanban), more versatile cells (like multi-select options and images), and extensive collaboration features (including input directly through web forms).

Here's a look at the first project I created with Airtable and an explanation of some of the concepts I used to build it. I went beyond Airtable for my final output (using Airtable's built-in API), but I'll embed the Airtable base directly in this article to show what it'd look like as a purely "no code" project.

The project I built is the No Code List, and the goal was to upgrade my list of "no code" software, which was a static page on my website, into something more interactive.

Blank Slate

The idea of using a spreadsheet to build a list is a pretty straightforward concept. Starting off was simple. Here's the blank slate view when you start a new project.

One of the first things to notice, though, is the View selector under the project tab. Here's that same blank slate in a Gallery view. It's the original data, viewed in a different way.

I built my columns in the Grid view, so it felt just like adding columns to a spreadsheet, but you can build and design in any view.

Ultimately, my sheet ended up looking like this...

With a Gallery view that looked like this...

And a Form view (to embed on a website for open submissions) that looked like this...

Building Blocks

Here are the different components I used to make this happen. At the end, I'll embed the live version.

Views

I briefly touched on views already. The key thing to understand is that all of the underlying data is separate from the view, and any changes made in one view are reflected in every other view.

For my demo, I used Grid, Gallery, and Form views, but Calendar and Kanban views each have additional interactions and displays.

Special cells

Airtable has more cell functionality than a traditional spreadsheet. A few highlights include Multiple Select cells (that I used for filtering) and image cells (that I use for the logos).

The list of cell types is extensive.

Embed code (and API)

The only other building block for my specific demo is the embed code and the API, but more on those below.

My Online Directory Demo

Requirements

The No Code List already existed as a text-based list. It had some category headers, but a lot of items fell into multiple categories, and there was no good way to filter or search.

I needed a way to add new items quickly, tag them with one or more categories, automate new software suggestions, and search or filter on the front end.

The flow

To start, this project was as simple as creating column headers and filling out rows of information.

I added the obvious columns, like name and url, and then I started playing with special column types. First, I added a Multiple Select column for one or more standardized category names.

Then I added an image column to store a logo file. In a traditional spreadsheet, I might have a column for the logo's url, but Airtable stores the actual file and displays it.

I also took advantage of a Formula column, which is something traditional spreadsheets already do well. However, with the hints and online documentation, I found Airtable's formulas to be more intuitive. I used a formula column to create a "display link" that cleans up the website urls for display.

Beyond that, I used boolean columns that let you choose an icon instead of a traditional checkmark, and I used the special columns for urls and email addresses.

After filling everything out, I had a working list that was already better than my static list. The last step was an easy, automated way for people to submit new "no code" software to the list.

I didn't want people to add to the main list directly, so I duplicated the main table and created a Submissions table. Then, I created a Form view and hid some of the fields that the submitter doesn't need to fill out. Once embedded on a website, someone can submit a suggestion through this form, I'll see it, and I can copy it to the "master list" if it makes the cut. It's mostly automated with a pause for moderation.

Embedding

Display and collaboration are big reasons that Airtable stands out, and it's simple to display Airtable data on a website with their embed code.

Here's what the No Code List looks like as a straight-up embed.

Here's what the submission form looks like.

While I didn't ultimately embed the main No Code List (I used the API instead), I did use the Form embed for the submission part.

API

I wanted an interactive filter system that was a little more custom than the embeds could get me. Luckily, Airtable's API is legit.

I was able to build out a micro web app using the Airtable data, because everything in Airtable is accessible via their API. In fact, each base gets custom documentation!

Although building a web app with Airtable's API is beyond the scope of this article, it's an important and powerful feature that Airtable offers, so it's worth mentioning.

See the final No Code List in action →

Overall, Airtable was really fun and pretty robust. I think one of its strengths is the similarities it keeps with traditional spreadsheet user interfaces. If it's your first crack at no code, that familiarity could be the difference between completing the project and quitting early.

If you can use APIs, Airtable also works as a great backend for an application. Almost anyone can pick up the interface to populate data, or data can be pulled from forms on the web.