The List Details blocks are for viewing the details of a list item. The details block can be added to a separate page within your Softr app to be opened when the user clicks on the list item.
In the List Details block settings, you should set the same Airtable Base and Table as for the List you want to link to.
Now, let's see how you can make the List and List Details blocks work together.
In order to link the details page to the list, you need to go back to your List page and set the Action in the On Click section of the list to Open page and from the Page dropdown choose the List details page to which the list items are supposed to be linked. You can also do the same for a Button on a list item.
That’s it. Now when the user clicks on a particular list item, he/she will be taken to the page with the details of the item.
Check out the video below to see how it's done.
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.
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). There is also a placeholder Label added (appears above the field content), which can be modified or removed if not needed.
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
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
Since there's only one List Details page for a specific List, you can define custom SEO parameters for each List item page within the Airtable base.
The following fields can be added (please, take into account that the names are not case-sensitive):
SEO:Index – indicates whether the list item page should be indexed or not. Can take yes/no, 1/0, true/false values. If positive, the page will be indexed by search engines and added to Sitemap.
SEO:Slug – Here you can define a custom URL slug for the item page. If left empty, the automatically-generated slug will be used for the item page.
SEO:TItle – Custom meta title for the page.
SEO:Description – Custom meta description for the page.
In the example below, you can see how the SEO fields filled in for a "Leather Shoes" product.
Similar to SEO fields, you can also add the following social media parameters to specify how each list item page should appear when shared on social media:
You can check out how the page social parameters work here. The names are not case-sensitive. Below is an example of the social fields added for a particular list item.