List - Softr Docs

List is a key block type in Softr. You can link it to an Airtable base to build any collection of items such as a job board, product listing, a ranked list where users can upvote items, and so on. The block has a number of different layouts, which will be discussed in greater detail in the subsection to this article (see example layouts below). 
List block layouts
Now, let's find out what the common features of the block are and how they are configured.
To start with, you need to add your Airtable API key (check how to find it here) in Settings => Integrations => Airtable to be able to import your list data from Airtable.
After adding any of the list layouts from Blocks => List, you’d need to select the Airtable Base and Table where you want to import your data from. 
Linking the Airtable Base
In this section, we will not build a list but will rather review different list layouts and explore their specific features. You can find a detailed tutorial on how to build a list from your Airtable base (on the example of a job board) here. 
So, let’s review the common fields present in list configuration, and then we’ll discuss the unique features of each list type separately.
List
General List Settings
Default View
Here you can set one of your Airtable base 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
Sort by
Here you have a list of available sorting options based on your Airtable base fields (columns). Each field will have an ascending and descending order options (see below).
Sort by
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 appear at the end of the list, allowing the user to expand the list and view the additional items.
Items per row
If the list has multiple items per row, you can 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.
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.
Inline Filters
Lists can have up to two filters, where you can define specific fields and their options, using which users can filter the list.
Inline Filters
Label
Here you set the title of the filter.
Filter by
This is where you choose which table field you want to have the list filtered by. You are presented with the list of all the table fields to choose from as shown below.
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" and “ as its options, you can add any of these options here (separated by a semi-colon) to appear as the filter categories as shown below.
Setting 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
Below you can see how the options are generated after selecting the field in Filter by.
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 both on the Left and on the Right.
Show as
You can display the filter options as a List or Dropdown as shown below.
Switching from List to Dropdown
Allow multiselect
If you enable this, the users will be able to select more than one option at a time.
Search
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
Placeholder Search Text
Here you can customize the text that appears within the search bar as a placeholder.
Search By
Search by
Here 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 searching.
List Item Fields
This is where you configure how the Airtable base is going to be mapped to your list. For each layout (discussed in subsections to this article), there is a default set of fields, for which you can set a corresponding field (Content) from your Airtable base or disable the field if you don't need it.
​
Mapping the field and disabling/enabling 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
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
Email – mailto link
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
See More Button
See More Button
Here, you can configure the See More button (for showing more items in the list) label and styling.
Empty State
This is for customizing the message that appears when the search doesn’t return any results.
On Click
In this section, you can define what happens after clicking on the list item. Apart from the Do Nothing option, there is the Open external URL option, which allows to select one of the table fields as a URL.
Open external URL action
For example, if you are building a job board, the URL field can be the company website. Thus, after clicking on the list item, the user will be taken to the position’s company website.
Finally, the Open page option allows linking another page within the app.
Open Page Action
Stripe Checkout Form
List with horizontal cards and upvoting button
Last modified 2mo ago