Ask AI

List Block Overview

The features of the List block.

List block layouts
List block layouts

To get started, you need to connect a data source from Settings โ‡’ Data Source or or hit Connect Data Source directly from the block settings sidebar (Source tab). Learn more about data sources and how to configure them here.

As soon as you connect a data source, your block settings will become available and you can start setting it up. In this overview, we will not build a list but will rather review different list layouts and explore their specific features. So, letโ€™s review the settings that are common for all the list layouts, and then we'll take a closer look at each layout in the next sections.

Source

After adding any of the list layouts from Blocks => Dynamic => List, you need to select the source where you want to import your data from. This is done from the Source tab of the block settings. Below, weโ€™ve selected Airtable as a data source and can now select the specific base and table we want to connect to.

๐Ÿ’ก
Weโ€™re using Airtable in the below example. List block also works with the other data sources like Google Sheets, HubSpot, and SmartSuite .
Blockโ€™s Source tab
Blockโ€™s Source tab

As soon as we select a Base and Table, we'll see the rest of the Source settings appear below. Let's take a look at those as well.

Default View

Here, you can set one of your Airtable table views as a default view, and the items in the list will be sorted and filtered according to the sorting and filtering configuration of that particular view. It can be a different type (e.g. "Calendar") or the same type but with different configuration (e.g. with different filters applied).

Views on Airtable
Views on Airtable

List Settings

Sort by

Here you have a list of available sorting options based on your Airtable fields (columns). Each field will have an ascending and descending order options (see below).

Sorting
Sorting
ย 

Items per page

You can choose how many items appear in the list by default. If there are more items to display, a See More button will be added at the end of the list, allowing the user to expand the list and view the additional items.

Items per row

You can also choose how many items ("3" or "4") each row should contain.

๐Ÿ’ก
When there's an inline filter on the Right or on the Left the value is automatically set to "3" and can't be changed.

Empty state

This field allows you to customize the message that's shown when the block can't fetch any results for a given search query or due to some other reason.

Conditional Filters

Conditional Filters allow you to filter the list for one or more users based on the defined conditions. Check out the List Conditional Filters section for more details.

Content

Next, we have the Content tab, where we can configure some additional parameters for our list block as well as map the block fields to Airtable to specify what data needs to be displayed and how. Let's take a look.

Title and Subtitle

You can enable this toggle to add a Title and Subtitle to your List. You can also configure the position of the texts.

List Title and Subtitle
List Title and Subtitle

Inline Filters

Lists can have one or more Inline Filters, where you can define specific fields and their options, using which users can filter the list.

Inline filters
Inline filters

Label

Here you set the title of the filter.

Filter by

And this is where you choose which table field you want to have the list filtered by. All the table fields are available for selection (see below).

Selecting a filter by field
Selecting a filter by field

Options

Next, you need to set the available options for the selected fields. For instance, if you want to filter by the "Language" field, and it has "English" and "German" as its options, you can add any of these options here (separated by a semi-colon) to appear as the filter categories.

๐Ÿ’ก
Whenever you change an inline filter option in your data source, it will be automatically updated in your List block settings.
Selecting filter options
Selecting filter options
ย 

However, if the selected Filter by fields's type is single- or multi-select, the options will be fetched from Airtable automatically. In the example below, we select the Status field which is single-select and has task status options on Airtable as shown below.

โ€œStatusโ€ field on Airtable
โ€œStatusโ€ field on Airtable

Below you can see how the options are generated after selecting the field in Filter by.

Selecting a single-select field
Selecting a single-select field

Position

Further on, you can set the position of your filter (Top, Left, or Right).

๐Ÿ’ก
Please, note that you can't have filters on both the Left and the Right sides.

Show as

You can display the filter options as Tags or a Dropdown as shown below. If the Tags option is selected, you can also choose to display one tag per line as well as specify colors for tags. Letโ€™s take a closer look at the Colors settings.

Switching between Tags and Dropdown
Switching between Tags and Dropdown

Colors

This option is displayed if you choose to show your inline filters as tags. The Single option assigns all the tags with the same color scheme defined in inline filterโ€™s style settings.

The As defined in the data source option assigns the tags with the same colors that they have in the data source. Below we demonstrate how this works on the example of the โ€œStatusโ€ field on Airtable.

Applying the same colors as in the data source
Applying the same colors as in the data source

The last option simply applies random colors.

Allow multiselect

If you enable this, the users will be able to select more than one option at a time.

Search Bar

Show Search Bar

Using this toggle you can remove the search bar from your list if you don't need it.

Show/hide search bar
Show/hide search bar

Placeholder search text

Here you can customize the text that appears within the search bar as a placeholder.

Search by

Search by
Search by

Under this option, you choose which fields the search is going to be performed by. You can add one or more fields, but if you don't add anything, the search will return all the list items for any query. Therefore, it's best to select at least one field for meaningful results.

Item Fields

This is where you configure how the Airtable base is going to be mapped to your list. For each layout (discussed in the next sections under List), there is a default set of fields, for which you can set a corresponding field (Content) from your Airtable base or hide the field if you don't need it.

Mapping the field and hiding it
Mapping the field and hiding it

Apart from that, you can add new fields using the Add field button. After adding the field, you need to specify its Type and set Content (corresponding Airtable field). For some types, there is also a Label parameter added (appears above the field content), which can be modified or removed if not needed.

Adding a new field
Adding a new field

There is a variety of types to choose from, so let's go through them one by one:

  • Text โ€“ plain text
  • Rich Text โ€“ long text, markdown, or html
  • Headings โ€“ different size headings
  • Url โ€“ clickable Url
  • Button โ€“ button with the standard list of actions (Open Page, Scroll to Section, Open External Url)
  • Tag โ€“ for displaying one or more tags (e.g. if you have a multiselect field on Airtable with multiple values, they'll be displayed as multiple tags)
  • File โ€“ provides a link for downloading attachments
  • Video/Audio โ€“ for directly embedding audio/video content (e.g. from an Airtable Attachment field)
  • Image/Image Gallery - for displaying a single or multiple images (within a gallery)
  • Embed โ€“ can be used for embed snippets from different services (e.g. Calendly, YouTube, and so on)
  • Google Maps โ€“ for Google Maps embed code
  • Rating โ€“ for displaying a rating (Content can be a number from 1 to 5 or a "Rating" Airtable field)
  • Divider โ€“ a simple divider line
๐Ÿ’ก
Google Sheets doesnโ€™t have field types, so please check the Field Types section in Google Sheets data source overview before proceeding.

See More Button

Here, you can configure the See More button's (for showing more items in the list) label and styling.

Embed block

See how this works here.

Actions

In this tab, you can add Action Buttons to your List.

Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿคฉ

Last updated on March 7, 2024