Adding and formatting elements in interfaces
  • 08 Jul 2022
  • 9 Minutes to read
  • Dark
    Light

Adding and formatting elements in interfaces

  • Dark
    Light

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.

If you haven’t created an interface yet, we recommend pausing and reading this support article before continuing onward.

Elements Overview

There are four primary purposes that elements can serve:

  1. Elements are visual representationsof information.
    • Elements can show a table’s data directly or aggregate a table’s data to present information in a more visual way.
  2. Elements can be used to 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. 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.

In this article, we’ll be covering how to add, remove, and format elements on an interface. Please see this support article if you’d like to learn more about customizing an element once it’s been added to an interface.

We strongly recommend playing with different types of elements as you read along. Interface Designer is built for interactivity 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.

For the rest of this article, we will be building interfaces connected to a base built using the Content Calendar template; please feel free to create a copy of the base if you’d like to follow along!

TIP

We recommend reading this support article about interface layouts before adding new elements to an interface or building one from scratch. Layouts provide a helpful framing structure for you to build upon, and it can be beneficial to start with a layout then tweak it as you go.

Adding elements

After first navigating to the interface where you’d like to add an element and clicking “Edit” to enter editing mode, you will see an “Add element” button appear at the bottom of the left side of your interface.

add_element.png

Clicking on “Add element” will bring up a list of elements that can be added to the current interface:

add_element_Scroll

You can select from the available options or search for a specific element’s name using the Search box located near the top of the right side of the menu.

Clicking on a new element from the options in the “Add Element” list will allow you to drag that new element onto your interface:

add_element(1)

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.

Adding elements connected to other elements

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. You can add the Record Picker element at any time from the “All Elements” menu.

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

add_elements_to_other_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:

connected_to_record_list(1)

As you can see above, the Record list element will tell you its current data source—so you know where the listed fields are coming from. In the above example, 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:

add_attached_field(1)

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.

add_comments(1)

your title goes here

If you are curious to learn more about creating elements connected to other elements, please read this support article on configuring elements.

Now that we’ve talked about adding field elements connected to your Record Picker or Record List elements, we’ll dive into what shapes your fields can take in Interface Designer.

Choosing element types for fields

When you add a new element based on a field from the table, depending on the field type, you will have a couple of variations to choose from.

Linked Record field elements

If you have a linked record field on your table, you can choose to display that linked record using a variety of different elements.

linked_Record_diagram

You can use the following element types to capture a linked record field’s information:

  1. Field: showing your linked records in a vertical list
  2. Grid: display your linked records in a user-editable grid.
  3. Timeline: displays linked records in a horizontally scrolling user-editable timeline.
  4. Chart: Gather aggregated linked record data with a bar, line, scatter, pie, or donut chart.
  5. Number: A number that can be used to count or summarize the values from a selected field from the connected linked records.
  6. Record Picker: A new record picker element that will use linked records as its source.

TIP

Multi-series line charts are just one powerful example of how data can be leveraged and presented in interfaces.

ID_multi_series_line_chart(1)

Try playing around with different element types for your linked record to get your interface looking just right!

add_linked_records(1)

Attachment field elements

If you have an attachment field on your table, you can choose to display that field using three different types of elements: Field, Hero, or Carousel.

attachments_connected_to_record_list(1)

Carousel is excellent for showcasing multiple images at once, while Hero shines in showcasing a single photo at a time. Using either of the Hero or Carousel elements will allow you to choose the number of attachments to show at once when configuring the element using the “Show” dropdown.

number_of_attachments

If you choose to use the “Field” type of element, all attached files for the current record will be shown and will take up as much vertical space as needed to show every file.

Removing an element

You can remove any element from editing mode by clicking on that element, then selecting the “trash can” icon.

delete

You can also remove an element by clicking on the “Delete” button at the bottom of the Properties menu.

If you used a layout when setting up your interface, some elements might not be able to be deleted:

no_delete

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.

source_goes_empty(1)

Formatting elements in an interface

Interface Designer is all about the flexibility to create visual spaces that let you show data in a way you design. Interface layouts can provide an initial structure, but you get to decide the final look.

An interface’s formatting is fluid by design. Interfaces are built on flexible grids that will keep elements neat by stacking them together. The flexible grid also ensures elements on your interface are always snapped in place and aligned, with no awkward shifting needed. Stacking elements by dragging and dropping them on an interface is a core feature of Interface Designer.

You can easily drag and drop new elements anywhere on your interface, and your interface’s grid will adapt:

move_that_Zeeb (1)

If you want to move an element already on your interface, clicking on that element will reveal a small dark grey box with a pull handle that you can click to drag and drop that particular element:

pull_handle

The formatting of an interface will always try to work with you as you drag and drop elements.

flexibility_grid(1)

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.

When you move elements close together on an interface, Interface Designer will automatically mark that element grouping with a square of grey dashed lines:

01-which-workspace(1)

Adding background colors

As we mentioned above, groups of elements are indicated by squares of grey dashed lines. These squares are not only great for visualizing formatting but can also draw a user’s attention to a particular group of elements by adding a colored background to that square:

outline_square

Hovering over the group of elements will reveal a dark grey menu which includes available background colors for the group of elements:

background_color

Hovering over the different options in this menu, you’ll see two background colors available. The first color will always be “Grey Background,” but the second background will match the icon’s color for this interface group.

icon_equal_background

So, for example, this interface group’s icon’s color is blue, which means we have a “Blue Background” as our additional background color. Clicking on either of the two background colors will add a colored background to the whole square and slightly center that square to draw attention to it.

add_color(1)

Using a background color is an excellent way to add emphasis or create a visual connection for a group of elements.

connected_images

If you change the color of your icon, your background color will update to match that of your icon:

icon_color_backgroun

You can remove an existing background color at any time by hovering over a group of elements and selecting “No Background.”

Remember, you can always adjust your elements groups by reshaping your grid via dragging and dropping elements.

Resizing elements

You can adjust the width of an element on an interface in two ways. The first way is to manually adjust the size of an element by clicking on that element to reveal its pull handles:

pull_handles_width

You can click and drag on these pull handle to adjust and resize the element until it looks good to you:

resize(2)

your title goes here

You cannot adjust the height of any “Field” type elements. You can adjust the width, but all Field elements will only be as tall as needed to show the underlying record’s value for that field.

The second way to adjust the size of an element is by using one of the two buttons that pop up the top left corner of a single element, or a group of elements, when clicked:

wid_and_narrow

You can click on the “wide” or “narrow” buttons to quickly grow and shrink the selected element within the current grid box it is located in:

get_wide

If your element is currently in a group of elements, indicated by the square made of gray dashed lines, clicking “wide” or “narrow” will widen the whole group:

group_get_wide

If your current grid isn’t working for you, you can always drag and drop your elements into a whole new arrangement!

your title goes here

Configuring your elements will allow you to adjust an element’s contents, interactivity, and appearance. We strongly recommend reading the support article on configuring elements to get the most out of your interfaces.

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.


Was this article helpful?