Getting started with Airtable Interface Designer

1. Builder - 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.

• Repeatability and data consistency

  • Example 1: Stakeholders who need to review and approve assets to unblock their teams.

  • Example 2: An interface for working in sprints

• Granular permissions, including access and security to only certain data

  • Example 1: End users who need to make individual updates to certain information, like statuses

  • Example 2: 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 1: Leadership and cross-functional partners who need to check in on progress updates and results.

  • Example 2: Processes that involve action items or assigned tasks.

From here you can: 

• View data - Navigate to the underlying Airtable base, so long as you have base access

• Edit - Access interface builder if you have owner/creator permissions in the base. Editing previously configured interfaces is covered more extensively in the section below.

• <- Back to home - Navigate back to your account's home screen.

Clickable navigation to access the various interface groups and pages of the app. Some interfaces or interface pages may not appear if:

• They have not yet been published.

• Certain pages were hidden from the navigation by the interface builder. 

• Only one interface has been published. Once another interface has been published, both interfaces will appear in the navigation.

More details are available here.

You can find more about notifications in this support article.

Details are discussed in this article.

1. There are two potential entry points where builders can add a new interface:

   1. From within a base - Inside a base where you would like to build a base click the Interfaces option in the top left portion of the screen.
      

      1. If this is the first interface in the app, then you'll be brought to a screen where you can click Start building. Then, click the Build an interface option. To learn more about building forms, see this support article. Name the interface and choose an icon (this can be edited later). Then, click Next.

      2. Otherwise, you'll be brought to the interface editor where you will see previously created interface pages. From here, click the dropdown icon at the top left next to the name of the base and select the Edit option (Option 1 shortcut). Then jump down to the " Editing previously configured interfaces" section below.

   2. From the home screen (beta) - This option is covered in a separate support article that you can find here.

2. Choose a layout to create a new interface page.

   1. Table layouts (recommended) - These full-page layouts are based on a visualization of a table in the underlying base, similar to an Airtable view. Layouts offer streamlined configuration controls and powerful features for interface users. There are several options to choose from (list, gallery, kanban, calendar, and timeline). You'll be able to change this later if needed. Click Next. After choosing the type, you'll choose the specific table you want to represent with the visualization. Click the dropdown menu to choose a different table from the underlying base. Then, click Finish.

   2. Other supported layout styles include overview, form, dashboard, and record review. Click on the links provided to learn about configuring each of these layout options as the options below cover the table layout experience.

   3. Under the "More" section you'll find the option to build an interface from scratch by choosing the “Blank” interface layout. We only recommend using blank layouts when other available layout types don’t fit your use case.

Note

Certain interface layouts are now also supported on our mobile Airtable apps. In these cases, you’ll see the option to preview the layout as Desktop or Mobile in the preview window.

Note

Older legacy, element-based layouts such as Record review and Blank utilize different setup options. Consult the articles in this section for more information.

After clicking Finish in the initial setup flow, you'll be brought to the draft version of the interface you are building. From the properties panel on the right you'll see several options including:

• Page

  • Title - Rename the page's title

• Data

  • Source - Click the dropdown to choose the source table for the layout

  • Filter by - Add conditions or conditional groups that will filter the records shown on the interface page. These are hard set by you, the interface builder, and are not able to be changed by end users. One use case example is the ability to filter records to only show the "viewer's records."

• Appearance

  • Show description - Toggle the ability to show a description of what kind of data the visualization shows so that end users have a better understanding when they interact with the interface you are building.

  • Visualizations - Click the cogwheel icon to change the layout visualization. You can also enable more than one visualization per interface page by clicking the eye icon. When multiple visualizations are enabled, they will appear as a dropdown for end users to choose from on the interface page.

User filters

Elements - Filter elements allow end users to filter records on the layout page using predefined tabs or interactive dropdowns. Only one of these options can be used per interface page.

• Tabs- This option allows interface builders to configure and name tabs that act as predefined filters on the interface page. Click the cogwheel to add/delete a previously configured tab to use or click the blue + button on the canvas next to the "All records" to configure a new tab.

  • 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").

• Dropdowns- This option allows end users more flexibility to choose what information they want to see. Click the cogwheel to add/delete a previously configured dropdown to use or click the blue + button on the canvas next to the "All records" to configure a new dropdown.

  • Configuring 2 or more dropdowns will allow end users the flexibility to drill down into the data.

  • Supported field types for dropdowns include date, single select, multiple select, linked record, user, created by, and checkbox.

    • Additionally, any lookup, rollup, or formula fields that format their results in a way that matches any of these field types are supported.

User actions

• Sort - Toggle whether to allow end users to sort the records shown on the interface page.

• Search - Toggle whether to allow end users to search records.

• Filter - Toggle whether to allow users to set up their own conditions or conditional groups to filter records in the interface.

• Group - Toggle whether to allow end users to group records.

• Add records through a form - Toggle on whether to allow interface end users to add a record via form.

  • End users will click an Add record button. As a builder, you'll need to configure the form that the end users will utilize when they click this button.

• Buttons - 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. More about buttons in another section below.

Advanced

• Allow users to export data as CSV - Allow end users the ability to export the data set shown in the interface as a CSV file.

• Allow users to print - Toggle whether to allow end users to print record details that are currently shown on the interface page.

  • End users will click the ... icon near the top right corner of the screen. Then, they will click the Print all records option. This will cause a new menu to show where end users can toggle the option to "Format for printers" and click Continue. This will open your computer's print dialog where more options can be configured. It's important to note that this also allows end users to save the interface page as a PDF. More on printing in another section below.

• Allow users to import data as CSV - Allow users with creator permissions to add new data via the interface by importing a CSV.

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, you will see a share dialog where you can invite other users. After that, you'll want to click Share in an open interface to add more interface users in the future.

1. Click on the interface page containing a table layout from the left sidebar. Click the Pages button on the upper left portion of the screen if you don't see the sidebar.

2. If your interface page contains several visualizations, click the dropdown on the canvas showing the visualization type and choose the visualization you want to configure.

3. Then, click on the canvas where the visualization appears so that a blue square highlights that area. You'll see the properties panel on the right populate with the settings that pertain to that visualization.

4. Consult the resources below for more about each visualization's properties.

• Hierarchy

  • Levels - Levels help to show relationships between data across different tables. Click the cogwheel icon to set up or adjust levels. If you are unfamiliar with the setup for this, consult the following article.

• Data

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Sort by - Set the way that records will be sorted in this visualization. Choosing a Manual sort field from this menu will allow users to drag and drop records when "Edit records inline" is enabled.

  • Group by - Configure up to 2 fields to group the records by in the visualization.

  • Prefix field - Set a field that will give end users more details to get their work done. Popular choices are status fields or checkboxes that denote completion.

  • Fields - Pick which fields are visible in the visualization.

• Appearance

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Row height - Change the height for each record to be short, medium, tall, or extra tall.

  • Show field descriptions - End users will see an i icon on any fields that contain a description, allowing them to click to see that field's description.

  • Collapse all by default - This will collapse all levels each time the interface is open.

• User actions

  • Edit records inline - Allow end users (with the appropriate permissions) to edit those records from the visualization page.

  • Add/delete records inline - Allow end users (with the appropriate permissions) to add or delete records from the visualization page.

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

• Data

  • Source - Not configurable from visualization properties, but you can view the source table from the underlying base.

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Title field - Configure which field will appear as the title on the cards in the gallery.

  • Image field - Configure which attachment field will be used as the card's image.

  • Sort by - Set the way that cards will be sorted in this visualization.

  • Fields - Pick which fields are visible in the visualization.

• Appearance

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Fit image size - This option will resize images from the chosen image field to fit into the card's available space.

  • Display field names - Choose whether cards will show or hide field names.

• User actions

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

  • Allow users to export data as CSV - Allow end users the ability to export the data set shown in the interface as a CSV file.

• Data

  • Source - Not configurable from visualization properties, but you can view the source table from the underlying base.

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Stacking field - Choose a single select, user, or created by field to "stack" records together.

  • Sort by - Set the way that cards will be sorted in this visualization. Choosing a Manual sort field from this menu will allow users to drag and drop records when "Edit records inline" is enabled.

  • Fields - Pick which fields are visible in the visualization.

  • Image field - Configure which attachment field will be used as the card's image.

• Appearance

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Wrap long cell values - Toggling this option allows values to look more natural and take up less space. Experiment with this option to your liking.

  • Hide empty stacks - If there are no records associated with a value in the “Stacking field” configured in the Data section, then toggling this option on will hide that stack or stacks.

• User actions

  • Edit records inline - Allow end users (with the appropriate permissions) to edit those records from the visualization page.

  • Add/delete records inline - Allow end users (with the appropriate permissions) to add or delete records from the visualization page.

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

• Data

  • Source - Not configurable from visualization properties, but you can view the source table from the underlying base.

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Date settings - Configure a date field to be used for the start and optional end date in the visualization. Also, configure the "Initial view" settings by setting the "Position," "Timescale," and optional "Set for all visits" toggle.

  • Sort by - Set the way that cards will be sorted in this visualization.

  • Fields - Pick which fields are visible when clicking on a calendar event shown in the visualization.

  • Label - Configure which fields will be shown in a calendar event’s label. Due to space constraints, this option doesn't always show all fields.

  • Label image - Add an attachment field that will be used as the calendar event's label image.

• Appearance

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Fit image size - This option will resize images from the chosen image field to fit into the calendar event label’s available space.

• User actions

  • Edit records inline - Allow end users (with the appropriate permissions) to edit those records from the visualization page.

  • Add/delete records inline - Allow end users (with the appropriate permissions) to add or delete records from the visualization page.

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

• Data

  • Source - Not configurable from visualization properties, but you can view the source table from the underlying base.

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Date settings - Configure a date field to be used for the start and optional end date in the visualization. Set "Date visibility" to be all days of the week or just Monday through Friday (When the "Only workdays" option is chosen you can also set custom holidays). Also, configure the "Initial view" settings by setting the "Position," "Timescale," and optional "Set for all visits" toggle. Finally, configure custom quarters that match your organization's calendar.

  • Sort by - Set the way that timeline events will be sorted in this visualization.

  • Group by - Configure up to 3 fields to group the records by in the visualization.

  • Summarize - Set customized summaries of the timeline events. The "Utilization" function is particularly useful and outlined in this support article.

  • Fields - Pick which fields are visible in the visualization. Due to space constraints, this option doesn't always show all fields on a timeline event.

  • Label - Configure which fields will be shown in a timeline event’s label. Due to space constraints, this option doesn't always show all fields.

  • Label image - Add an attachment field that will be used as the event's label image.

• Appearance

  • Layout - Choose between “Stacked” and “Gantt” layouts.

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Record height - Change the height for each record to be short, medium, tall, or extra tall.

  • Width - Set the width styling for the timeline event. Options include “Precise” and “Expanded.”

  • Stack labels vertically - Setting record height to Extra tall and toggling this option on will allow end users to see more information.

  • Wrap labels - Toggling this option allows values to fill the timeline event without spilling over. Experiment with this option to your liking.

  • Split multiple values into groups - This option changes the way that grouping behavior will work. Multi-value groups will appear as their own "pseudo" group.

  • Collapse groups by default - This option will collapse all groups of records when the interface page is loaded.

• User actions

  • Edit records inline - Allow end users (with the appropriate permissions) to edit those records from the visualization page.

  • Add/Delete records inline - Allow end users (with the appropriate permissions) to add or delete records from the visualization page.

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

• Data

  • Source - Not configurable from visualization properties, but you can view the source table from the underlying base.

  • Filter by - You'll see any filters that have been configured for this visualization and modify the settings. Filters are initially configured in the main page's properties.

  • Sort by - Set the way that timeline events will be sorted in this visualization. Choosing a Manual sort field from this menu will allow users to drag and drop records when "Edit records inline" is enabled.

  • Group by - Configure up to 3 fields to group the records by in the visualization.

  • Fields - Pick which fields are visible in the visualization. Due to space constraints, this option doesn't always show all fields on a timeline event.

• Appearance

  • Color by - Set up record coloring based on a Select field or Conditions.

  • Row height - Change the height for each record to be short, medium, tall, or extra tall.

  • Field descriptions - Options include Hidden from everyone, Visible to everyone, and Visible to base collaborators. End users will see an i icon on any fields that contain a description, allowing them to click to see that field's description.

• User actions

  • Edit records inline - Allow end users (with the appropriate permissions) to edit those records from the visualization page.

  • Add/delete records inline - Allow end users (with the appropriate permissions) to add or delete records from the visualization page.

  • Click into record details - Allow end users to open up more details about a record. Learn more about configuring record details here.

• If you have creator/editor permissions 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.

• You can also search or browse for interfaces you'd like to edit from the Airtable home screen.

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. Click Edit.

From the Interface Designer editor, click on the Pages button shown in the upper left side of the screen. 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. Remember that, edits to interfaces will be saved as you work, and you will need to Publish your changes before end users can see them.

1. Click the Pages button in the upper left corner of the screen. 

2. Click the ...three-dot icon next to the name of the interface or individual interface page that you want to rename, change icon, duplicate, hide, unpublish, or delete.

   1. Note that interface pages can be hidden by clicking the eye icon next to the name of the interface page.

3. Click the option for your use case.

• List

• Timeline

• Calendar

• Record Detail

  • Individual record detail pages

  • Up to 100 record detail pages in one PDF

• Charts

1. From an open interface, type Cmd (or Ctrl) + P. 

   1. Alternatively, Click the ... icon in the top right corner of the screen, then click Print this page.

2. Next, you can choose to toggle on the Format for printing option to help printouts be more legible. This will change the background and border colors of the records to make it a bit easier to read in print form.

3. Then, click Continue

1. Enter an interface in “Edit” mode.

2. Click on an interface page built from a visualization layout.

3. Navigate to the properties panel on the right side of the page and find the “User actions” section.

4. Find the “Allow users to export data as CSV” setting and toggle it on.

1. Navigate to an interface page with the “Allow users to export data as CSV” option toggled on as described above. You may have to find someone else to toggle this option on if you don’t see the ability to export the interface page as a CSV as described below.

2. Click the … icon in the upper right corner of the page.

3. Click the Download data option.

4. The CSV file should download to your computer and the file name should match the name of the interface page that you are downloading.

1. First, open an interface that you can edit. Click the dropdown next to the name of the interface and choose the Edit option.

2. If the left sidebar isn't open, click the Pages option in the upper left corner of the screen.

3. From the sidebar find the interface or interface page that you want to move.

4. Click, hold, and drag the interface to reorder it.

5. 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.

• End users may not necessarily have access to the underlying base. If you haven't already consulted the Interface Designer permissions article, then now may be a good time to do so.

• On Free plans, only base collaborators can see interfaces on a connected base. More on Interface Designer permissions here.

• Learn more about managing and sharing interfaces here.

• 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.

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

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.

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.

While interfaces are available to all customers on all plans, the ability to share interfaces separately from the base is restricted to paid plan workspaces only. Learn more in this article.

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 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.

We do not support duplicating an interface or an interface page into another base because an interface’s configuration options rely on the underlying base’s structure (field names, source tables, etc.) to build the interface layer.

• Single select

• Multiple select

• Linked record

• User

• Created by

• Date

• Checkbox

Additionally, lookup, rollup, and formula fields that format their results in a way that matches any of the types listed above are also available to use.

You can disable the preview box feature by hiding all the fields in the “Preview” portion of the properties panel on the right side of the interface visualization in “Edit” mode. Once you do this, the preview will no longer show and the record details will open automatically.  Here's a short video showing the process of enabling/disabling the preview setting. 

Airtable Layout interfaces (List, Calendar, etc.) have a limit of 200 results (records), even if there are more than 200 records that match the query. If possible, we recommend narrowing the search with more keywords or accessing the underlying base and searching there if you need to sift through larger search results.

Yes, but only in Record detail and Form layouts.

In the layout configuration you’ll find the “Visibility” properties below the Rules section. Here, creators can click the cogwheel icon to set up conditions for when to show a field. By default, the visibility rules will be set to “Always show field.” A few important callouts:

• This functionality is only available on Business and Enterprise plans.

• This functionality is not supported on iOS or Android interface experiences.

• We don’t recommend using this for sensitive fields. Although visually hidden, underlying record/field values may still be exposed. Visibility should not be equated with security in this case.