2 Ways to Build an Airtable UI (Interface Designer & Alternative)

While Airtable is great for storing data and optimizing workflows, its traditional spreadsheet view can be overwhelming when working with lots of data.

Fortunately, there are ways to avoid this problem by building custom user interfaces (UIs) for your Airtable data.

In this article, we’re going to show you two ways to build Airtable UIs:

1. Airtable’s Interface Designer. This is a new feature for creating an interface on top of your Airtable base using a drag-and-drop editor. It allows you to customize the UI’s look and interactivity by changing colors, adding buttons, filtering records, and more. However, anyone with access to a UI built with the Interface Designer also has access to the underlying Airtable base. As a result, this first option is suitable primarily for sharing UIs with people inside your team or organization.
   ‍
2. Stacker, our tool for building no-code apps, powered by your data in Airtable (or 60+ other data sources). Similar to the Interface Designer, Stacker lets you build a UI and customize how your Airtable data is presented. You can change colors, add buttons, drag and drop design elements, and so on. However, unlike Airtable, Stacker allows you to set granular permissions for who can access your data at the table, record, and field levels. This means you can share your UIs with both team members and external users — customers, partners, freelancers, etc. — without worrying about them seeing certain information.

If you want to build custom UIs for your Airtable data with granular permissions for each user start a free 30-day Stacker trial today.

The Interface Designer is a relatively new feature, which helps you create UIs (or simply “interfaces”) for your Airtable data. 

These UIs act as a layer on top of Airtable bases and show collaborators only the information that’s relevant to them, without overwhelming them with unnecessary data. This makes Airtable interfaces useful for giving internal teams or stakeholders the information and functionality they need to get their work done.

To get started, open your base and click on “Interfaces”.

In the next sections, we’ll show you how to create one interface, but note that you can actually create multiple interfaces per base.

Choose a Layout

The first step when building your UI is to select between one of the five layout types.

1. Record Review, which helps switch between records quickly, making it useful for triaging or reviewing many records at once. It also lets you group records based on one or more fields from your base.
   ‍
2. Record Summary, which provides an overview of key information based on the records you select. This layout is ideal when you want to focus on one record at a time and don’t need to make quick switches.
   ‍
3. Dashboard, which is useful for providing a high-level overview of key information like customer feedback or revenue numbers and letting collaborators highlight metrics with charts and graphs.   
   ‍
4. Form, which provides an easy way to create new records directly in an Interface.
   ‍
5. Blank, which lets you build your UI from scratch.

For this example, we’ll be using the first option — Record Review.

Connect the Layout to a Table

The next step is to select what information your layout will show. This is done by connecting to a table, then sorting and filtering the relevant data.

For example, you can create a UI for tracking all tasks with a status of “In Progress” and then sort them by their due date.

Pick and Customize Elements

After connecting to a table, you can start picking which elements will appear in your UI using an on/off toggle.

Additionally, when you click on “Next”, you’ll get a chance to fully tailor the UI with more customizable elements.

To get a list of all the available Airtable elements, click “Add Elements” in the lower left-hand corner. 

As you can see, you can choose between different types, like text, numbers, dividers, grids, charts, and more.

The button element deserves a special mention here because you can use it to place buttons anywhere in the UI and then change their properties so that they do what you want them to do, e.g., delete recordings, go to an external URL, run automations, and so on.

This is a highly versatile element, so check out Airtable’s documentation for more details.

Preview, Publish, and Share Your UI

Once your UI looks how you want it to look, it’s a good idea to test it with the “Preview” mode.

Airtable lets you easily toggle this mode on and off and you can also preview as yourself, or as all other collaborators.

‍After you’ve tested the UI, click the “Publish” button to save all changes and push it live. 

Then, to share it with others, click on the “Share” button on the top right. 

Now, as you enter each collaborator’s email, Airtable will send you the following warning:

As we said, this is the biggest limitation of the Interface Designer (and Airtable’s permissions in general) — all collaborators can access the interface and the underlying base.

This means that the Interface Designer isn’t a viable option when you don’t want collaborators to see your data. This is usually the case when sharing your base with people outside of your team or organization.

But sometimes the need to restrict access also arises within the same organization. 

For example, Brandi Shuttera — Accounting Manager at Zapier — used Airtable bases to track employees’ budget spending. However, the accounting team couldn't just give employees access to their Airtable base. That would’ve resulted in everyone having access to everyone else’s budget data, which wasn’t acceptable.

And since this data was only visible to her team, they’d spend hours answering questions from employees about their budget. 

That’s why Brandi and her team used Stacker to connect all of their Airtable bases, pull them into one system, and let people see only their own information. 

As a result:

• Employees have a secure portal where they can log in and access only their information.
  ‍
• Zapier’s accounting team saves tons of time from having to constantly answer questions about budgets, while still keeping all of their data in Airtable.

In the next sections, we’ll show you exactly how to build similar apps for your business.

Stacker is our no-code web app builder. You can use it to build a front end for your Airtable data, as well as create all sorts of useful apps (like CRMs, internal tools, project management tools, and much more) without writing a single line of code.

Stacker apps can be powered by Airtable data, or by data from 60+ other sources. 

Additionally, Stacker lets you:

• Control who can see and edit data in each table, record, or field, which you can’t do with Airtable. This means you can build a UI on top of your Airtable data and share it with users, without worrying about them accessing all the info in your base.
  ‍
• Customize the UI to your needs by changing how your data is presented, adding or removing buttons, dragging and dropping design elements, and more (similar to the Interface Designer’s capabilities).

Note: Start a free 30-day Stacker trial today, so you can follow along and build a UI for your Airtable data.

Connect to Your Airtable Base (Or 60+ Other Data Sources)

When you first open Stacker, you’ll need to select a data source.

As we said, Stacker can quickly sync to your Airtable base. When you connect to Airtable (or Google Sheets), Stacker automatically creates a working app for you, which you can then customize. Any changes made on the front end are reflected in the data source (i.e., in Airtable or Google Sheets), removing the need for you to manually update entries. 

For example, say you use Stacker as a CRM on top of your Airtable base. When someone adds a new lead and changes its status to “Negotiation” in Stacker, that change is automatically reflected in your Airtable base. 

While many of our customers use Airtable as their data source, there are also other options:

1. Use Stacker Tables as your database. This option lets you house your data directly in Stacker, so you can use only one tool for your app’s front end and back end. This simplifies your workflow and reduces the number of paid tools you’re using.
   ‍
2. Bring in data from 60+ different sources. Stacker supports lots of read-only data sources, like HubSpot, Salesforce, Asana, Jira, MySQL, MongoDB, QuickBooks, Square, and more. You can also import data from an Excel spreadsheet by uploading a CSV file to Stacker. Note: Because these sources are read-only, any changes made on the front end won’t be automatically reflected on the back end (i.e., on the original data source).
   ‍

Control What Users Can See and Edit in Each Table, Record, or Field

Once you’ve selected your data source, you can add users and customize their permissions.

To start, click on the “App settings” button.

From here, you can change two essential permission settings — Permission Rules and User Roles.

Create Granular Permission Rules

As we said, Stacker lets you create highly specific permission rules that apply at the table, record, or field levels. Just click on “Permissions”, find the table for which you’d like to create a new rule, and click on “Add permission”.  

For example, you can choose which fields users can read or update by simply toggling checkboxes, as shown in the screenshot below.

Create User Roles with Different Permissions

You can also create different User Roles and assign permission rules to them.

To do so, click on “Roles” and then on “Enable roles”.

This will let you add new roles, name them, and decide what permissions they have.

For example, say you have a project management app that's used by your development and quality assurance teams. You can create different roles for the employees on each team, as well as for their managers. Employees can have a set of permissions that let them see and update only their tasks, while managers can be allowed to see, update, and reassign tasks for everyone on their team.

Add Users to Your App

Lastly, Stacker also makes it easy to add users to your app by:

• Entering their email addresses.
  ‍
• Connecting a user table from your data source. 
  ‍
• Using Open Signup to create a link that allows anyone to register and gain access to your app.

Customize the UI to Your Needs

Next, click on “Edit layout” to start customizing the UI.

This will bring up a bunch of different options, some of which are similar to the ones we showed in the Interface Designer section, e.g., filtering and sorting the records, adding a cover image, adding charts, and more.

This is a good place to start deciding how the UI should be presented overall.

Choose the How the Layout is Presented

Clicking on the “Display” button will open up seven different views — Cards, Rows, Kanban Board, Calendar, Table, Inbox, and One Record Only. 

Here are a few examples of how some of these views look:

• Cards view. This view shows each record as a separate card, making it very useful when you want to combine an image with data.

• Inbox view. The Inbox view shows all records in a sidebar while also displaying the Detail layout of a selected record. It’s most useful when you need to browse records and see their details very quickly.

• One record only view. This view is useful for showing users their profile, or as a home/welcome page for your app.

For more details and examples, refer to our documentation on list display types.

Add Buttons for Important Functions

Similar to the Interface Designer, Stacker lets you add interactive buttons to your UI.

For example, the app below has buttons for updating statuses and assignments.

When you click on “Update Status”, a new window opens where you can select from different options in a drop-down menu.

Again, if you’ve synced to an Airtable base or Google Sheets, the updated status will automatically be reflected in your data source.

Besides that, you can add buttons for many other actions, like delete, edit, save, mark as done, archive, send update, etc. Additionally, buttons can trigger advanced workflows using Stacker’s Zapier integration. 

Lastly, you can also:

• Select which tables appear in your navigation by clicking on “App settings” → “Navigation” and using the toggle buttons.

• Drag and drop design elements such as widgets, banners, headers, and pipelines.
• Change your app's color, add your (or your clients’) logos, and much more.

3 Real-Life Examples of Airtable Apps Built with Stacker

Here are three examples of our clients using Stacker to build apps with custom UIs and permissions on top of their Airtable data:

1. Growth Collective is a platform that connects clients with pre-vetted marketing experts. Before Stacker, they used Airtable to store customer and freelancer data, which meant they lacked an interface that allowed clients and freelancers to only access data relevant to them. With Stacker, they were able to build multiple portals, which clients and freelancers can both use to log in and view their matches, without having access to each others’ data.
   ‍
2. Table Investments is a real estate consulting firm that helps its clients invest in, develop, and manage real estate in Oklahoma City. Their team used Airtable to manage properties, work orders, and payments, but they didn’t have a simple way to communicate their work to clients. With Stacker, they built a no-code app on top of their Airtable base. Now, clients can simply log in and monitor their portfolios, projects, and weekly updates.
   ‍
3. The University of Central Arkansas is a public university founded in 1907 that serves more than 8,000 undergraduates. Dr. Gary Bunn — Director of the Office of Candidate Services — found Stacker while looking for a way for his office to improve how they communicate with education students. To achieve this goal, Dr. Bunn built a Stacker portal. Students now use the portal to view the status of their teaching licensure applications, get information about the next steps in their journeys, and update important contact details when needed.

If you’re ready to build your own UIs and apps with Stacker, sign up for a free 30-day trial (no credit card required).