Video

https://www.youtube.com/watch?v=U17Oo8RFK1U

Overview

The Item details block displays detailed information for a specific record, like a project or client. Users typically access it by clicking on an item in a dynamic block, such as a List or Grid. **** This action triggers the display of relevant details pages for that specific record, eliminating the need to create separate pages for every individual item in your database.

The item detail block is for showing detailed information about one record (or one row) in your database. Therefore, we need a way to define which record will be shown in it. We have three ways to do this:

1. Easiest and Best Method: You can set a list of many records on a previous page so that when a user clicks on an item in the list, they are taken to an item details to see more info about the record they selected. This is the method we are demonstrating in this guide.
2. For specific use cases: If no list or records exists for them to click on first (for instance showing a logged-in users company details), you can setup filtering to narrow down the record shown by the items details block to a specific record. Be careful though - if the filter is not specific enough, Softr will try to find a good example record from your database to display.
3. For advanced use cases: The third option is to specify which record to display using a URL to your Softr app for a specific record. You can get these by copying from a live version of the app or you can also create them in your database by constructing URLs using the ?recordId= parameter on the end of the page slug like https://yourapp.softr.app/item-details?recordId=XXXXX

<aside> 💡

The Item Details block works best when placed at the very top of the page, especially if there are other blocks on the page that are using its details for filtering, visibility, etc.

</aside>

Use case examples

• Product Details: Showcase detailed product information when a user selects an item from a product list. For example, display product descriptions, images, prices, and ratings.
• Task Management: Provide task-specific details, including deadlines, assigned users, and notes. For example, create a task detail page for team collaboration.
• Client Details: Display client information when a user selects a client from a list. For example, show client contact information, recent interactions, project history, or account status.

Configure an Item details block

To configure the Item details block to show a specific record detail when the user clicks on an item on a dynamic block, you will need to have a dynamic block, e.g., List, connected to the data source. Once you have it ready, follow these steps:

1. Add an Item details block to a new page.
2. Connect the Item details block to the same data source (e.g., Airtable Base and Table) as the List block.
3. Go to the List block settings and navigate to the Actions tab.
4. Set the Item On Click action to Open page and select the page containing the Item details block you created.