New layouts in Interface Designer
  • 02 Mar 2023
  • 8 Minutes to read
  • Dark
    Light

New layouts in Interface Designer

  • Dark
    Light

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


Introduction

Plan availabilityAll plan types/levels
Permissions
Platform(s)Web/Browser, Mac app, and Windows app
Related reading

Interface Designer overview - A general overview of the Interface Designer feature


Basic setup of table layouts

Step 1: Add a new interface
  1. Click on Interfaces in the top left portion of the screen in an open base.
  2. Give the new interface a name and optionally customize its color and icon. 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 upper right corner of an open interface to add more interface users in the future.


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


FAQs

Which field types are supported in 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?