Linked List
How to configure linked lists through a List Details block.
As an example let’s say you want to show a main list of e.g. projects, and upon clicking on a specific project, you want to display this project’s details, including this project’s associated tasks. Here’s how you can do it using Airtable data source as an example.
Setup
- Create a "Projects" table
![Projects table](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd6d1ac41-c144-4d3e-8046-d32b0ae7fbf1%2Fprojects-table.png?table=block&id=4cd2c601-c14e-4d91-a1da-92f21fa3cb9a&cache=v2)
- Create "Tasks" table to hold task-related data, including a field referencing the associated Project. It can be a Lookup field 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.
![Table with tasks](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdea84a80-bd95-4133-9dc5-079b1a2990c8%2Ftable-wit-tasks.png?table=block&id=2d4184ef-9241-4168-9f79-a99872772f78&cache=v2)
Implementation
- On e.g. “Projects” page, add a List block linked to the Project Airtable table as shown below.
![List block with projects](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F01fecaab-7b14-4a2f-9943-a926c2b8864c%2Flist-block-with-projects.png?table=block&id=d36be249-f582-40a5-a404-934f13bc7799&cache=v2)
- On e.g. “Project details” page, add a List Details block, again linked to the Projects Airtable table.
- On this detail page, add also a List block, linked to the Tasks Airtable table
![Task list added to the Project details page](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F98e44a18-992e-4308-8d13-01d433130854%2Ftask-list-added-as-linked-list.png?table=block&id=c0cbc58f-eeb0-4d15-9803-020a4a8a00bd&cache=v2)
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.
![Projects table inside Task List's conditional filters](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F122901bc-94e2-4a89-93ae-7ee0281d186f%2Fprojects-in-conditional.png?table=block&id=975d34f5-4158-4430-bf88-fc42935a647d&cache=v2)
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.
![Setting the filtering condition](https://media.helpkit.co/proxy?url=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8a89d859-3734-494e-ba45-4d7bfe5efed1%2Fsetting-filtering-condition.gif&blockId=28529164-2a13-4e50-a007-b745303ac0ee&projectId=1032)
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 and joanne@softr.io).
![Testing the result](https://media.helpkit.co/proxy?url=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F289f328f-b060-4517-a7cf-da6869b84e61%2Ftesting-linked-lists.gif&blockId=1b04bbf0-9f20-438a-89e6-3d8ec72f2328&projectId=1032)
That's it. Now, each project details page will also show all the tasks associated to it.
Last updated on July 25, 2024