List
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).
Now, let's find out what are the common features of the block 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 types from Blocks => List, you’d also need to provide the URL of the Airtable Base (see how to find it here) where you want to import your data from. 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.
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).
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).
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.
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.
Lists can have up to two filters, where you can define specific fields and their options, using which users can filter the list.
Here you set the title of the filter.
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.
Next you need to set the available options for the selected fields. For instance, if you want to filter by the "Laguage" 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.
Further on, you can set the position of your filter (Top, Left, or Right). Please, note that if you have 2 filters, both of them have to be either on the Left or on the Right.
If you enable this, the users will be able to select more than one option at a time.
In this section, you can customize the placeholder text of your search bar.
This is where you configure how the Airtable base is going to be mapped to your list. Next to each list item parameter you can select a table field that corresponds to it. Moreover, it’s possible to disable any of the parameters in case you don’t need it. It can be done using the switch next to the parameter name as shown below.
This is for customizing the message that appears when the search doesn’t return any results.
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.
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.
