Getting started with Airtable Interface Designer
  • 01 Jun 2023
  • 16 Minutes to read
  • Dark
    Light

Getting started with Airtable Interface Designer

  • Dark
    Light

Article Summary

Interface Designer is a powerful way for creators to work with end users without requiring those end users to navigate the full complexity of a base, offering flexible ways to simplify workflows, visualize data, and tailor information to different audiences across organizations. In this article, learn the basics about where and when to use Interface Designer in Airtable.

Introduction

Plan availabilityAll plan types/levels
Permissions

Please consult this support article for a breakdown of Interface Designer permissions.

  • Owner or Creator permissions are needed to create and publish interfaces.
  • Once an interface has been published, end users may have varying permission levels that correspond to the level of granular access that has been granted by an interface creator.
Platform(s)Web/Browser, Mac app, and Windows app
Related reading

Getting started with Interface Designer

Airtable terminology

Interface - An interface is a curated representation of base data created using Interface Designer. Interfaces are customizable, and can contain various visual elements, data sources, and permissions.

Interface page - A page is a screen within an interface; interfaces can have multiple pages.

Layout - Layouts are the design space framework within a given interface page.

Element - Elements are the essential building blocks of interfaces; builders can add visual elements like grids and timelines, design elements like text and dividers, and functional elements like buttons and comments, to present their base data in a new way. (Not all layouts include the option to utilize elements.)

Why use Airtable Interface Designer?

Suppose you are familiar with the data layer of Airtable or any relational database’s backend. Even a well-organized data set can be tedious or overwhelming in that case. Most end users in an organization do not need to interact with every piece of information in that data layer to do their work. Interface Designer can help here because there are ways to section out that data into smaller portions that individuals or working groups can manage more easily. By creating an interface for your team, you can likely simplify repeatable processes in a more visually pleasing way.

There are two general user roles in Interface Designer:
  1. Creator - Creating, editing, publishing, and sharing interfaces.
  2. End user - Interacting within published interfaces. This can involve viewing, editing, or commenting on records within an interface.
Note
Keep in mind that Interface Designer was created for flexibility. End users can provide feedback on editing options, filtering, visual layout, etc., to interface creators, helping to evolve their team’s interfaces as needs change.
Interfaces are ideal for:
  • Repeatability and data consistency
    • Example: Stakeholders who need to review and approve assets to unblock their teams.
    • Example: An interface for working in sprints
  • Granular permissions, including access and security to only certain data
    • Example: End users who need to make individual updates to certain information, like statuses
    • Example: Giving access to a set of data that only corresponds to a subset of Airtable users, like a marketing team
  • Simplifying collaboration and insights for users across an organization
    • Example: Leadership and cross-functional partners who need to check in on progress updates and results.
    • Example: Processes that involve action items or assigned tasks.


Basic setup of table layouts

When creating a new interface page, you’ll now see several new layout options. These full-page layouts are based around a single visualization, similar to an Airtable view. Layouts offer streamlined configuration controls and powerful features for interface users.

Step 1: Add a new interface
  1. Click on Interfaces in the top left portion of the screen in an open base. Then click Start building. If this isn't the first interface in the base, then you'll be taken to another screen where you'll click the + Create new button.
  2. Give the new interface a name and customize its color and icon to your liking. Then, click Next.
  3. Choose a table layout to create. There are 5 options to choose from (list, gallery, kanban, calendar, and timeline). You'll be able to change this later if needed. Then, click Next.
  4.  Next, you will connect the chosen layout to a specific table in the base. Then, click Finish.
Step 2: Interface table layout options

After clicking Finish in the initial setup flow, you'll be brought to the draft version of the interface you are building. This editor provides additional features that include:

  1. Record visibility - This option allows interface builders to set specific visibility rules related to which records end users will be able to see and interact within the interface.
  2. Visualization picker - This option allows builders to set the default way that data will be shown.
  3. Visualization toggle - Toggling on this option allows end users to change the way that the data is shown to them. Builders will choose which specific visualizations to set up and allow end users to interact with.
  4. Layout options - Here, builders will modify the specific options related to the visualization(s) that have been chosen. This involves setting default sorts, filters, groups, field visibility, appearance, and more. 
  5. Default interface actions - These four general settings (filtering, record details, inline record editing, and record creation) will always be available to disable or enable for end users
  6. + Add button action - Sometime, builders may want to create additional, customized actions that end users can perform by clicking a button.
Note
We'll cover more about each of these settings in the next section.

Step 3: Publish and share

Once you are done building, you can click Publish near the top right portion of the screen. You can also click Done to continue building the interface at a later time. 

Once published, the interface can be shared with other users. The first time an interface is published, we'll open up the share dialog where you can invite other users. After that, you'll want to click Share in the lower left corner of an open interface to add more interface users in the future.


Configuring layout settings

The features below each offer powerful customization options for the interface you are building. As you are building, you can choose to customize each of the settings or just a few. We recommend taking a look at each setting to see if you can add just a little more sophistication, precision, or ease of use to the interface.

Record visibility

In the record visibility section, you can change the source of the records you want to display. Record visibility can be set to the following 3 options:

  1. All records - End users will see all records and any records added in the future
  2. Viewer's records only- The interface will dynamically filter records to show only those records corresponding with the logged-in user who is viewing the interface. 
    1. To utilize this option, a user field or email field must be present in the table. Airtable will use the information from the user or email field as a cross-reference for record visibility. 
    2. If your table has two or more of these field types, then you can adjust that by clicking the name of the field currently being used as a reference. In the image below, that is the "DRI" user field:
  3. Specific records - This option allows builders to set conditions or a group of conditions that will filter out records that don't match those specific conditions.
Note
You'll see the fields that are visible to end users. If you want to modify the visibility of those fields, then you'll do that in the Fields section covered in "Individual visualization layout options" below.
Visualization picker and toggle

The visualization picker and toggle offer two general options:

  1. Picking a single, static visualization for end users to view and interact with. There are 6 visualizations to choose from. Each visualization shares respective similarities with a corresponding Airtable base view. 
  2. Choosing two or more visualizations and allowing end users to pick which visualization they want to view in the interface. When the Allow users to switch visualizations toggle is turned on, a dropdown menu will appear in the upper right corner of the layout where end users can pick how they want to see the data. Visualizations will appear in the section below and each visualization will have additional setup options that are discussed in the next section.

Individual visualization layout options

Builders will want to set additional options for each visualization that is included in an interface layout. Each visualization type has slightly different options that correspond to the purpose of that visualization type. In general, each set of visualization options includes the ability to configure settings related to the data being displayed, the appearance of that data, and the visibility of fields within that data set. For example:

  • Data - This section can include options related to sorting, grouping, images, and date settings.
  • Appearance - This section can include options related to coloring, fitting images, row height, and stacking.
  • Fields - This section allows builders to choose which fields are shown or hidden in the visualization.
Note
The list visualization also includes the ability to set up hierarchical relationships to visualize and interact with. For a deeper understanding of setting up hierarchies in interface list visualizations, we recommend that you check out our support article on the list view.
Default interface action: Filtering

Filter - There are two general options when the filter action is enabled. Only one of these options can be used per interface page:
  1. Tabs- This option allows interface builders to configure and name tabs that act as pre-defined filters on the interface page. 
    1. For end users, tabs function as quick filters that allow for switching to another "view angle" within the same interface visualization. For example, in a project tracking interface a builder might set a tab that filters records by each individual stage of project tracking that corresponds to a specific status field (i.e. "Todo", "In progress", "Complete").
  2. Dropdowns- This option allows end users more flexibility to choose what information they want to see. 
    1. Configuring 2 or more dropdowns will allow end users the flexibility to drill down into the data. 
    2. Supported field types for dropdowns include single select, multiple select, linked record, user, created by, and lookup or rollup fields that format their results in a way that matches any of these types.
Default interface action: Record details

Click into record details - By enabling the ability for end users to open record details, builders can create customized sidesheets or fullscreen pop-overs that provide more details related to the record that is opened. This functionality is similar to expanded records in bases but in interfaces, builders are able to customize the experience for end users in a much more targeted way. 
  • Within the same interface, these record detail pages are reusable. So, if you need to add the same record detail page in multiple places throughout the interface you are building, then you can simply pick a previously configured record detail page and use it again!
  • In most cases, we recommend using sidesheets over fullscreen record details since sidesheets offer additional information while still keeping end users rooted in the overarching workflow.
Default interface action: Record editing

Edit records inline - Enabling this option allows users with editor permissions and higher to edit the information shown on the interface page. Users with editor permissions or higher will also also be able to add new records. 
Default interface action: Adding records

Add records- Enabling this action will place a button in the interface that opens a form that end users can fill in to add a new record. Interface builders will have the ability to customize the form that end users will interact with by clicking View and edit form. Here, builders can choose which fields to show or hide, set default values for one or more fields, reorder field positions with drag-and-drop, and edit the label of the button added to the interface. 
  • Within the same interface, these record creation forms are reusable. So, if you need to add the form in multiple places throughout the interface you are building, then you can simply pick a previously configured form and use it again!
  • Similar to the inline record editing functionality covered just above, interface permissions can affect end users' abilities to add records, and field/table permissions will overrule any setting made in the interface. 
  • However, it's worth pointing out that in field permissions, enabling the option to Allow this field to be set in records created through forms will allow users to add information to fields that are otherwise locked for creation and editing.
Button action settings

+ Add button action - This option can be used to add additional buttons to the interface page such as adding a link to another interface page, a link to an external URL, or additional record creation forms. Each button has slightly different settings, but they can all be labeled to provide end users with additional context.


Editing previously configured interfaces

Step 1: Navigate to the interface you want to edit
  • If you have editor permissions or higher in the base connected to the interface, then you can navigate to the base connected to the interface and then click the Interfaces option. This will take you to a page where you can choose an interface. If you prefer, you can also use the method described below.
  • If you have interface-only editor permissions or higher, then you can search for the interface you'd like to edit from the Airtable home screen.
Step 2: Find the Edit option

At the top left portion of the screen, you'll find a dropdown menu located next to the name of the underlying base data layer.

Step 3: Find the interface page you want to edit

Click on All pages shown in the right-side settings menu. Clicking this button will reveal any previously configured interfaces and interface pages. Choose the one you want to edit and use the walkthrough guides throughout this article to alter settings for desired results.


Duplicating, hiding, unpublishing, or deleting an interface

In edit mode:
  1. Click the All pages button. 
  2. Click the ... three-dot icon next to the name of the interface or individual interface page that you want to hide, unpublish, or delete.
  3. Choose the option for your use case.

When accessing a published interface, there's a navigation menu on the left side of the screen. Certain options will only appear for users with the appropriate permissions, such as the ability to edit the interface, but in general, most users will have a similar experience to the one shown below.

1: Interface dropdown menu

From here you can: 

  1. Navigate to the underlying base, so long as you have base access
  2. Edit the interface, if you have creator permissions in the base or the interface. Editing previously configured interfaces is covered more extensively in the section below.
  3. Navigate back to the home screen.
2: Interface and interface page navigation

All of the interfaces and interface pages connected to an underlying group can be shown here. End users can navigate between different pages to accomplish their work. Some interfaces or interface pages may not appear if:

  • They have not yet been published.
  • They were hidden from the navigation. 
  • Only one interface has been published, then only the pages from that interface will appear in the navigation. Once another interface has been published, both interfaces will appear in the navigation.
3: User account menu
4: Notifications

You can find more about notifications in this support article.

5: Interface share menu


Reordering interfaces or interface pages

Navigated to the All pages view:

First, open an interface that you can edit. Then, click the dropdown next to the name of the base and choose the Edit option. Now, click the All pages button.

interface_designer_all_pages_05092023

Reorder interfaces or interface pages

Now, you should see a list of all of the interfaces and interface pages associated with the base. Here you can click and drag interfaces or individual interface pages to reorder them. You'll see the order change in the editor as you modify it. However, you will need to Publish the changes before end-users can see the new order appear. 

interface_designer_reorder_interfaces_05172023


Interface Designer dependencies

Plan dependencies
Sharing and publishing dependencies
  • Users will be unable to see your new interface outside of editing mode until you publish that interface.
  • From the share menu, you can share an interface via email with an individual Airtable user or a user group.

FAQs

Who can create new interfaces/interface pages?

Collaborators with Owner or Creator collaborator permissions on a base can create new interfaces and groups of interfaces.

When should I create a new interface versus a new interface page?

The key here is understanding the audience that will ideally be interacting with the interface you are building. Since all interface pages in an interface are shared with users who have access, you can use different interfaces to provide granular permissions to the underlying information from a base. If you expect that an interface page would be best used by a different group of people, then that is often a sign you should create a new interface instead. 

Are there any limits related to how many interfaces or interface pages I can create?

Yes. For functional reasons, we've capped the number of interfaces per base at 50. Additionally, there is a limit of 50 interface pages per interface.

Can I share an interface without sharing the base?

While interfaces are available to all customers on all plans, the ability to share interfaces separately from the base is restricted to Pro & Enterprise users only.

If I share an interface with another individual or team, can they see the underlying data?

Not necessarily. It depends on whether the option to allow access to the base was checked when the invitation was sent. Ultimately, only base collaborators can view the underlying base.

What happens if more than one collaborator is editing an interface at the same time?

Interface Designer will save the most recent changes to an interface. So, if more than one collaborator is editing the same interface, Interface Designer will reflect the last changes to both collaborators.

If a base collaborator has "Commenter" or "Read-only" base permissions, can they edit an interface’s "Editable" fields?

No, a base collaborator with Commenter or Read-only permissions on a base can't edit or modify a base’s records through an interface. This also means that commenters and read-only users are not able to fill out form elements in interfaces.

I updated an interface's appearance, why isn't the change visible to other users?

If you made a change to an interface or to the elements contained in an interface itself, you must first publish the changes for that interface in order for other collaborators in a base to see those changes.

What happens if someone who is not a base collaborator tries to navigate to an interface URL?

Please consult the Interface Designer permissions article. In some cases, this might allow access to users who have interface-only permissions (Pro and Enterprise plans). However, in other cases, the user would not be able to access the interface in question.

Can I duplicate an interface into another base?

We do not support duplicating interfaces into another base. You can think of interfaces as being directly tied to the data held in the underlying base, so duplicating an interface to another base would not work in most cases since the underlying bases would be configured differently.

How do field and table permissions impact interfaces?

Field and table permissions set in the base will extend and be respected in Interfaces as well.

Who can share Interfaces?

All Interfaces users will be able to share the Interface further at their permission level or below. For the Enterprise & Pro plans, if workspace sharing restrictions are turned on, then only workspace owners can share the base. See this workplace restrictions article for more information.

Can I only share a specific interface page from an interface?

No, sharing an interface will share all published interface pages on that interface.

Which field types are supported in visualization layout filter dropdowns?

Supported field types for dropdowns include:

  • Single select
  • Multiple select
  • Linked record
  • User
  • Created by
  • Lookup or rollup fields that format their results in a way that matches any of the types listed above

Was this article helpful?