Configuring elements in interfaces

Elements are the essential building blocks of interfaces. This guide will dive into everything you need to know to fully configure your elements to display what you want the way you want it.

If you aren’t familiar with adding and formatting elements, please read this support article before continuing.

Elements Overview

There are four primary purposes that elements can serve:

1. Elements are visual representations of information.
2. Elements can be used to design the look and feel of an interface.
3. Elements can be editable, allowing collaborators to update records directly through an interface.
4. Elements can be filtered to only show the most relevant information, including the ability to dynamically show information based on who is viewing the interface.
   • You can filter to ensure whoever the “Current User” of the interface is will see the information most useful to them.

We strongly recommend playing with different types of elements as you read along. Interface Designer was a feature built to be interacted with and is best learned by doing. Note that only collaborators with “Owner” or “Creator” collaborator permissions on an interface’s base will be able to add/edit an interface’s elements.

Watch the below video for a few ideas of how you can configure elements to create interfaces that best empower your team.

Viewing an element’s current configuration

While in editing mode, you can click on any element on your interface to see that element’s complete configuration by checking out the list of that element’s current properties:

Each element’s type has its own properties, so make sure to check what’s available on your interface’s elements to see how you can customize them.

Connecting an element to a source

The majority of elements on an interface serve as visual representations of your base’s information. To display data, an element needs to know where to find that data. Setting the “Source” property on an element essentially lets it know where to get its information. Elements can source their information directly from a table in your base or from a few special elements.

If your element is connected to a table, you will see a small cog icon in the “Properties” menu next to your table’s name that can be clicked to reveal the full source:

If the element you are viewing is connected to another element on the page, it will have the phrase “Connected to [Element Name].” Clicking on the dropdown here will reveal not only the source element but the specific field being referenced by that element:

To reconfigure the current source for an element, click on the arrow to reveal a dropdown of the available sources. Sources will be separated into two sections, “Elements” and “Tables” from your base.

Sourcing from a table

Each of the following elements can be connected directly to a table in your base:

• Grid: This element displays records from one of your tables in a grid, similar to the Grid view. Data filters, sorts, groups, and fields can be copied from a particular view.
• Number: A number that can be used to count or summarize the values of a field from the connected table.
• Timeline: This element displays records from one of your tables over time, similar to the Timeline view.
• Chart: Report on aggregated table data with a bar, line, scatter, pie, or donut chart.
• Record picker: A dropdown list that displays records from the connected table.
• Record List (from the “Record review” layout): A panel listing records from the connected table.
• Gallery: Show records from your base as visual cards similar to the gallery view.
• Calendar: Show records from your base as a calendar similar to calendar view. 

You can change the source of any element on an interface to display another table’s data by selecting one of the connected base’s tables from the “Source” dropdown:

You can also search for a table’s name in the Source’s “Find an option” box.

Sourcing from an element

The Record Picker and Record List elements are unique in that they are the only elements that can be used as the source for other elements on the page. If you’d like an in-depth guide to adding new elements connected to a Record list or Record picker, check out this support article!

You can use the “Sources” dropdown to select any other available element to use that elements as a data source:

If you are changing the source from one element to another, you will need to reconfigure the field from which the element is drawing its information. The field type will also need to match the current element type:

In the example above, we are using a Carousel element that only accepts the attachment field. So we need to swap an attachment field from our original source with another attachment field from our new source.

Making elements editable for collaborators

Interfaces are not just for making your data look good— collaborators can directly update a table’s records from an interface. Elements representing fields (i.e., the Field element, Hero Element, and Carousel element) can be made editable for collaborators by flipping the “Edit access” toggle:

When a field is “Editable,” it will allow collaborators to edit that field and the underlying record’s values directly.

If you create an element representing an Attachment field (i.e., the Field element, Hero Element, and Carousel element) and make it “Editable,” collaborators will be able to comment directly on that attachment.

Adding the Comment element will show any current record comments and allow collaborators to add, edit and remove comments directly in an interface that will push to the underlying record.

The Timeline and Grid elements look much like they do as views—and like the views, any changes made in these two elements will automatically be made in your corresponding base’s table in real-time.

Configuring an element’s data

With your element's data sources in place, it’s time to shape the incoming data to ensure only the information you want is included.

TIP

Have a view configured just right and want to copy that configuration into an element? You can do so by using the “Copy from View” button located under the “Data” tab in an Element’s “Properties” panel.

Filtering

In Interface Designer, you can set conditions to filter out records in individual elements on your interface. If you are not familiar with creating conditions, we recommend reading this support article to learn more about filtering.

Clicking on an element will reveal any filtering conditions currently set on that element:

You can create new conditions and condition groups directly on an element to filter out records from the element’s source by using the “Add condition” and “Add condition group” buttons.

Filtering with users

Filtering gets a power-up in Interface Designer when it comes to filtering users. If you are filtering on a collaborator field, you can use the dynamic “Current User” value:

When applied to elements, the “Current User” value dynamically filters the information for the current collaborator viewing the interface.

You can preview your interface as different collaborators and see your filter update only to show the information linked to the user currently viewing the interface:

Allowing collaborators to filter data using a filter element

Interface Designer is unique in that you can allow your collaborators to filter information themselves by connecting a Filter element to your elements. You can add a filter element from the “Add Elements” menu or through another element in your interface.

Clicking on an element with a “Filter” dropdown will reveal the “Create a new filter element” button:

Interface viewers can not create conditions in a Filter element:

So, for a Filter element to be usable, you must define at least one condition. Specifically, you need to select the field you are allowing your viewers to filter by.

Once a condition has been defined, a collaborator can change both the operator and value of that condition but not the field you specified.

Again, users cannot add or remove conditions from a Filter element, allowing you to create a very customized filtering experience for your end-user.

The Filter element creates an interactive experience for collaborators by letting them get hands-on with filtering their data:

If you’ve already set conditions to filter on an element, you can still add a Filter element, and the resulting data will be filtered by both the Filter element and the conditions you previously set:

So in the above example, the results of the filter would be both: “[Status] is [Reviews]” combined with whatever conditions you set with the Filter element.

You can also use the “Current User” variable in the filter element with a Collaborator field:

Sorting

Sorting records within an element works much the same way as it does when sorting records in a view. You can order your records in a particular order according to the values in specific fields.

Grouping

Certain elements will allow you to group your records based on one or more fields of your choosing. Please see this support article to learn more about grouping records.

Fields

For the Grid and Timeline elements, you can customize which fields are shown and in which order for that particular element. You can drag and drop fields to change their displayed order in the element from the dropdown. You can hide a field in the element by clicking on the “Hide” button that will appear on hover or by clicking and dragging the field to the “Hidden fields” header.

In the Timeline element, you can also customize the way your records are displayed the same way you would when using the Timeline view. There is one distinct difference for the Timeline element, allowing you to set the position and timescale of the initial view a user will see for that timeline. 

Appearance

The majority of elements will allow you to tweak the appearance of that element by changing the label associated with that element.

Toggling “Label” and inputting text will allow you to communicate to collaborators and give them context or calls to action to interact with your interface:

Color records

In certain elements, you can also color your records by a select field or by setting conditions.

Duplicating an element

Sometimes you may want to duplicate an element to add somewhere else in the same interface. It's also a helpful time-saver when you need to make a small tweak to an element and don't want to start configuring it from scratch. To find the duplication option, click on the element that you want to duplicate.

FAQs

Can I port view configurations into Interface Designer?

Yes! You can port view configurations directly into your elements by using the “Copy from View” button.

Can I port extension configurations into an element?

At this time, we only support copying over a view’s configurations.

Can I duplicate an element?

Yes, you can. That is covered in this section above.

Can I duplicate an element from one interface to another?

Not at this time. However, you can duplicate an interface to its own group or another group attached to the same base.

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

No, a base collaborator with “Commentor” or “Read-only” permissions on a base will not be able to edit or modify a base’s records through an interface.

Can an interface be connected to a shared view?

Yes, but maybe not in the way you might first think. You can add a Grid element to your interface and copy the view configuration of the shared view you are looking to showcase from the base where the interface is being built. If the shared view resides in another Airtable base, then you would need to create a synced table from that shared view and then add a Grid element to your interface connected to that synced table.