Adding and removing elements in interfaces

Elements are the essential building blocks of interfaces. Elements are customizable, drag-and-droppable pieces that enable you and other collaborators to see and interact with your table’s data in real time. In this article, we’ll be covering how to add, remove, and format elements on an interface. 

Elements Overview

There are four primary purposes that elements can serve:

1. Visual representations of information. Elements can show a table’s data directly or aggregate a table’s data to present information in a more visual way.
2. Design the look and feel of an interface. You can add text and divider elements to add context and change the formatting and spacing of your interface.
3. Decide on which elements can be editable, allowing collaborators to update records directly through an interface. Elements can directly link to fields, allowing you to update the underlying record from which the element is drawing its information.
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.

List of elements to choose from

You can learn more about each element below. For more complex elements, we offer more in-depth articles about each element in their own individual support article.

• Button element - Button elements allow you to configure a button that will perform a certain action when clicked. For instance, you can have the button run an automation, navigate to an external URL, update a record with specific information, and more.
• Calendar element - This element is similar to a calendar view in a base.
• Chart element - Chart elements are similar to the Chart extension. You can configure bar, line, pie graphs, and more using this element.
• Divider element - Divider elements are horizontal lines meant to help break up different sections of the interface you are designing.
• Field element- Certain elements like the Record list or Record picker elements allow you to choose specific fields to display that correspond to the record that has been chosen from the list or picker.
• Filter element - Filter elements can have other elements connected to them. This is a very powerful feature that allows charts, grid, calendar, number elements, and more to dynamically change depending upon the filter(s) chosen.
• Gallery element - This element is similar to a gallery view in a base.
• Grid element - This element is similar to a grid view in a base.
• Kanban element - This element is similar to a Kanban view in a base.
• Number element - Number elements can display record counts or summaries derived from an underlying base's data.
• Record list element - The only way to add the Record List element is by selecting the “Record review” layout when initially creating an interface. 
• Record picker element - The record picker element allows interface collaborators to choose individual records. Depending upon the configuration, you can provide users with various levels of filters to ensure that they are only seeing the records most relevant to their work. 
• Text element - Text elements allow you to add helpful formatted text, links, lists, descriptions, and more to your interfaces.
• Timeline element - This element is similar to a timeline view in a base.

Adding elements

1. Open the interface in Edit mode if you haven't already done so.
2. Click + Add element in the lower left portion of the interface editor. You can select from the available element options or search for a specific element’s name using the Search box located near the top right side of the menu.
   
3. You'll then place the element somewhere in the layout of your interface page. Don't worry if it isn't in perfect positioning yet, as you can always move the element later. Notice that as you drag and drop elements, a grid comprised of dashed lines appears to help you visualize where your element will be placed and how other elements on the interface will move in response to that placement. If you are in the process of dragging and dropping a new element, you can press the Esc key to remove the new element. You can also use Ctrl+Z at any time to undo an action you took in your interface.
   
4. Once an element has been placed, you'll see a menu of options at the top. Hovering over the dotted rectangle on the left ¹ will show the hand icon allowing you to move the element around the interface layout. You can expand or contract the element using the two icons ² in the middle. You can also duplicate any elements ³. And finally, you can delete elements by clicking the trash icon ⁴.
   

Adding elements connected to other elements

If you have either the Record picker or Record list elements on your interface, they will populate in the side menu of the “Add element” menu below “All Elements." The Record picker and Record list elements will allow you to add elements that will display specific fields directly from the linked source of that element. The Record list element will tell you its current data source, so you know where the listed fields are coming from. In the image below, the Record list element gets information from the “📚 Content pipeline” table, so all the fields are from that table.

Creating a new element with either the Record Picker or Record List element selected in the “Add Element” sidebar will create a new element directly connected to the chosen Record List or Record picker:

You can also add a Comment element to create a space for collaborators to add to comments and view all comments made on a selected record.

Changing an element's 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 certain special elements. To better understand the source of an element, open the interface in Edit mode, click the element of your choosing, and open the Source dropdown in the sidebar on the right of the interface editor.

To reconfigure the current source for an element, click on the arrow to reveal a dropdown of the available sources. 

Duplicating an element

To duplicate an element:

1. In Edit mode, click the element you would like to duplicate
2. Then press the double square icon next to the trash icon.

Removing an element

You can remove any element in editing mode by clicking on that element, then selecting the “trash can” icon. You can also remove an element by clicking on the “Delete” button at the bottom of the Properties menu.

A few notes on deleting elements:

• If you used a layout when setting up your interface, some elements might not be able to be deleted.
• If you remove an element being used as the source of information for another element on an interface— the connected elements will show an error until another data source is connected.
  

FAQs

What permissions are required to add/edit/remove elements from an interface?

Collaborators with “Owner” or “Creator” collaborator permissions can create and edit interfaces and their elements.