Configuring elements in interfaces
  • 25 Aug 2022
  • 10 Minutes to read
  • Dark
    Light

Configuring elements in interfaces

  • Dark
    Light

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.

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:

01_open_whole_menu

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:

02_source_content.png

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:

03_record_list_Example.png

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.

04_table_vs_source.png

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:

05_change_table_source

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

Using the forms element

image.png

Interface forms are an easy way to create new records directly in Interfaces. Using the full power of the Interface Designer layout engine, you can customize exactly what information you’d like your users to enter each time they create a new record. Note that any user who has access to your Interface can access the forms you make to create new records.

To create an interface form, you can either:

  • Create a full-screen form using the new form layout. This should be available any time you create a new page in an Interface.
  • Add forms to existing pages that include a Record List or a Record Picker. Select either of these elements and toggle “Allow users to create new records” in the properties panel. From there, you can configure your form modal.

Sourcing from an element

your title goes here

The only way to add the Record List element is by selecting the “Record review” layout when initially creating an interface. The Record Picker element can be added at any time from the “All Elements” menu.

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:

06_change_to_record_list_field

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:

07_source_and_field_flip

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:

08_edit_only.png

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

09_editable_marketing_pic.png

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.

10_comment_on_photo

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.

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

12_edit_grid

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

image.png

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:

13_data_add_filter_timeline

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.

14_add_condition_group.png

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:

15_current_user_filter.png

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:

current_user_filter(1)

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:

17_create_filter_element.png

Interface viewers can not create conditions in a Filter element:

18_no_filter_condition.png

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.

19_look_at_filter

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

20_link_filter_element

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

21_fancy_timeline_filter

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:

22_filter_connect_to_status.png

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:

23_can_still_filter.png

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.

24_add_sort

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.

25_change_visible_fields

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

Appearance

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

26_spotlight_apperance.png

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:

27_change_label

Color records

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

28_record_color

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.

idElementDuplicationFind04262022.png

your title goes here

It's worth noting the "Record list" sidebar in the Record review layout is not currently an element that can be added or duplicated.

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.


Was this article helpful?