# List Details

The **List Details** blocks are for viewing the details of a [list](https://softr.gitbook.io/softr-documentation/building-blocks/listings) 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.&#x20;

{% hint style="success" %}
In the **List Details** block settings, you should link to the same Airtable **Base** and **Table** that your **List** block (to which you want to connect the List Details) is linked.
{% endhint %}

You choose the Airtable base and table that you want to link to In the **Data** tab of the block settings.

![Choosing Airtable base and table](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FafRhau3oLMqo9TNXNVVc%2Fdetails-table-b.png?alt=media\&token=104cd62b-ebdb-465f-8c3a-8712d73f1d71)

We'll examine [Conditional Filters](#conditional-filters) a bit later. Now, let's see how you can make the **List** and **List Details** blocks work together.

## Linking the Details Page to the List

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.

![Setting "Open Page" to the list details page](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F6Y6O7LjJNq68xrNkaRhl%2Fopen-details-b.png?alt=media\&token=3a8236e5-0623-464f-be1f-475d7697741c)

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.

{% hint style="warning" %}
You only need one page with a **List Details** block. The content for each list record will be generated automatically on that page depending on which list item the user has navigated to the **List Details** page from.
{% endhint %}

## Configuring the Fields

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 delete/hide the field if you don't need it. The fields are mapped from the **Features** tab of the block settings.

![Deleting fields and setting Content](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F4yamqJRd0bfxfjGvbjQc%2FScreen%20Recording%202022-08-02%20at%2010.54.11.gif?alt=media\&token=72bac87e-ee02-4c0d-857b-217da46d2adf)

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.

![Adding a new field](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FaUMUUWrYa3NvUgATHvVD%2Fnew-field-b.png?alt=media\&token=ada59252-62e4-4876-8a84-f3b72b932238)

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](https://en.wikipedia.org/wiki/Markdown), or html
* **Headings** – different size headings
* **Email** – [mailto](https://en.wikipedia.org/wiki/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
* **PDF** - embeds a PDF file inside a viewer to display the file directly on the details page. It needs to be mapped to an **Attachment** type field on Airtable, which contains a PDF file. Below, you can see how it looks inside a list details block.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FcdIDPXWifpi7yhak0m7p%2FScreen%20Recording%202022-09-29%20at%2016.53.32.gif?alt=media&#x26;token=3466d69e-f0f6-44a2-b386-5919a6e65bad" alt=""><figcaption><p>PDF field type</p></figcaption></figure>

## Conditional Filters

Now let's go back to the Data tab of the block and explore the Conditional Filters feature. The Conditional Filters of the Details block work similar to that of the [List block](https://softr.gitbook.io/softr-documentation/listings#conditional-filters), allowing you to show a specific record from Airtable based on your defined condition. This allows you to use the **List Details** block separately from the **List** block, showing Airtable records that match the defined condition instead of displaying the record based on user's action on the connected **List block**. For instance, you can apply a conditional filter to use the Details block as a **User Profile** section. Let's consider this use case in greater detail.

### Use Case: User Profile

First of all, we need to have a users Airtable base [linked](https://docs.softr.io/memberships/data/connect-to-airtable) in Users section. The table with the list of users is shown below.

![Users' Airtable base](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FOGmZncuHUf71zGQXCJgV%2Fusers-base-b.png?alt=media\&token=75724f47-93c2-4c98-a1bc-c43ac5253393)

Then, we are going to create a separate page (called "My Profile"), add a List Details block there, and link it to the same Users base and table. Moreover, we are going to define a conditional filter so that a logged-in user sees the record where the **Email** matches his/her **Email value**.

{% hint style="info" %}
Please, note that if there are multiple records that meet the defined condition, the **first** record in the list will be shown.
{% endhint %}

![Details block linked to the Users' base with conditional filter](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FnBbFa31OVKiJARWVONva%2Fcond-details-b.png?alt=media\&token=e5695ea7-dd12-428e-a9ce-45235296675c)

So, that's the setup. Now, any logged-in user that opens the My Profile page, will see his/her own profile info. The process is shown below.

![User seeing his/her profile](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FsgRXEa3UyoDLKEUbBJE5%2FScreen%20Recording%202021-11-22%20at%2012.44.41.gif?alt=media\&token=6ccb57f5-076e-4db1-a484-067a73c47626)

## SEO

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.

{% hint style="info" %}
The SEO parameters will be applied only if the List Details page is valid, i.e. it is linked to a specific List block.
{% endhint %}

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](https://en.wikipedia.org/wiki/Clean_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.

![SEO fields example](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MVvi_xYokKKaoQ4B2S-%2F-MVvoEnhI_fIPBx9Ti7P%2Fdetails_seo%20\(1\).png?alt=media\&token=d3eb0737-a34e-4034-94ff-5b23fc5562cd)

## Social Media

Similar to [SEO](#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:

* **Social:Image**
* **Social:Title**&#x20;
* **Social:Description**

You can check out how the page social parameters work [here](https://softr.gitbook.io/softr-documentation/studio/pages#social). The names are not case-sensitive. Below is an example of the social fields added for a particular list item.

![Social fields example](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0NiyhsmXAcV5u1c6XK%2F-MVvupzcdfx_gMWt_Ihp%2F-MVvxLjeyIYyEgIrzLnZ%2Fdetails_social%20\(1\).png?alt=media\&token=acdbeede-a781-49e5-b44b-4f242b788494)

There are tools for [Twitter](https://cards-dev.twitter.com/validator) and [LinkedIn](https://www.linkedin.com/post-inspector/) that can be used to check how the page's social tags will appear on those social networks.
