> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Linked List

> How to configure linked lists through a List Details block.

## Video

<iframe src="https://www.youtube.com/embed/U17Oo8RFK1U?rel=0" width="100%" height="500px" title="YouTube video" />

## Overview

Before reading this article, we highly recommend watching the above video and checking out our Item Details help article. It will really help you understand how this should all work.

One of the most powerful parts of Softr is being able to display not only individual details about a specific record, but also any other records that may be related to that specific record. For example, you may want to display a list of files, team members, or invoices related to a specific project. This is where Linked Lists come in.

Below we’ll look at a quick example using Projects and Tasks related to projects, but you can do this with any data type you can imagine.

<Tip>
  Linked Lists work best when they are placed below Item Details blocks that they are using for filtering, visibility, etc. Placing them above Item Details blocks they are using may cause issues in rendering them on the page.
</Tip>

# **Example Setup**

1. Create a "Projects" table<br />
   <Frame caption="Projects table">
     <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image1.png?fit=max&auto=format&n=tMZDAvcO0-kBoY1f&q=85&s=c3a75d4c93f86b688eacf8e0c78340c7" alt="Projects table" width="2078" height="830" data-path="building-blocks/images/linked-list/image1.png" />
   </Frame>

2. Create "Tasks" table to hold task-related data, including a field referencing the associated Project. It can be a [Lookup field](https://support.airtable.com/hc/en-us/articles/360042312194-Lookup-field-overview) that looks up the **Name** field from the **Projects** table, but it can also be a regular field that contains the names of the projects, as in the example below.<br />
   <Frame caption="Table with tasks">
     <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image2.png?fit=max&auto=format&n=tMZDAvcO0-kBoY1f&q=85&s=a9a6cd52c089762cf1f01ec088061f2d" alt="Table with tasks" width="2236" height="950" data-path="building-blocks/images/linked-list/image2.png" />
   </Frame>

# **Implementation**

1. On e.g. “Projects” page, add a **List** block linked to the Project [Airtable](/data-sources/1YYStCJukT15Lh2j93qo9A/airtable/jHX7kfH7QvkVcELQvS3VoX) table as shown below.
   <Frame caption="List block with projects">
     <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image3.png?fit=max&auto=format&n=tMZDAvcO0-kBoY1f&q=85&s=b9a9e1150cff9e6b262b92f89a2c8b41" alt="List block with projects" width="1996" height="1000" data-path="building-blocks/images/linked-list/image3.png" />
   </Frame>

2. On e.g. “Project details” page, add a List Details block, again linked to the Projects Airtable table.

3. On this detail page, add also a List block, linked to the Tasks Airtable table
   <Frame caption="Task list added to the Project details page">
     <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image4.png?fit=max&auto=format&n=tMZDAvcO0-kBoY1f&q=85&s=c1548b38d180b1afb883bbd4cd5d9e0c" alt="Task list added to the Project details page" width="3066" height="1734" data-path="building-blocks/images/linked-list/image4.png" />
   </Frame>

# **Configuration**

As soon as you add the **Tasks** list to the project's details page, you'll see that the **Projects** table's fields will start appearing inside **Conditional Filters** of the **Tasks** list block.

<Frame caption="Projects table inside Task List's conditional filters">
  <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image5.png?fit=max&auto=format&n=tMZDAvcO0-kBoY1f&q=85&s=451778b7b810d64304dc2787995e0524" alt="Projects table inside Task List's conditional filters" width="982" height="844" data-path="building-blocks/images/linked-list/image5.png" />
</Frame>

Using this, we can now set a condition to filter the **Tasks** list to show only the tasks that are associated with the project that's currently opened in the page. The condition will be set as shown below.

<Frame caption="Setting the filtering condition">
  <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image6.gif?s=c7a95bbecee575f8876e386213be0cdc" alt="Setting the filtering condition" width="1078" height="878" data-path="building-blocks/images/linked-list/image6.gif" />
</Frame>

So, only the tasks for which the value in the **Project** column corresponds to the current project's **Name** will be shown.

# Result

Let's check how that works for the **Ad Campaign** project that includes two tasks (assigned to [steven@softr.io](mailto:steven@softr.io) and [joanne@softr.io](mailto:joanne@softr.io)).

<Frame caption="Testing the result">
  <img src="https://mintcdn.com/softr-2b8a27e1/tMZDAvcO0-kBoY1f/building-blocks/images/linked-list/image7.gif?s=01177126a850b9aa5b55e78727c2a37e" alt="Testing the result" width="2880" height="1422" data-path="building-blocks/images/linked-list/image7.gif" />
</Frame>

That's it. Now, each project details page will also show all the tasks associated to it.
