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 each.

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:

Add an Item details block to a new page.

Connect the Item details block to the same data source (e.g., Airtable Base and Table) as the List block.

Go to the List block settings and navigate to the Actions tab.

Set the Item On Click action to Open page and select the page containing the Item details block you created.

Result: When users click on a list item, they’re directed to a page showing detailed information for that item.

Once you connect to your source data, you can configure Conditional Filters, Content, Actions, and block Visibility settings.

ℹ️

Some configuration options depend on the data source. For more details, check the documentation for your specific data source.

Content

In the Content tab, customize the Item detail block layout and the data fields and adjust their display.

Sections

The Item Details block includes two types of sections for organizing fields:

Default Top Section: Ideal for key information like titles, images, or categories (e.g., a product name and featured image).

Custom Sections: Add multiple sections for additional details (e.g., project assets or milestones).

This structure keeps detail pages organized and easy to navigate.

Item fields

Item Fields lets you connect fields from your data source to each list item, making it easy to display the information you need. You can control what information appears by adding, removing, or rearranging fields such as task names, assignees, or descriptions.

For each field in the Item Fields section of the secondary section, you can customize the following options:

Type: Defines the display field type that controls how content appears in the block (e.g., text, checkbox, or image).

Content: Chooses the specific data field from connected data sources to display.

Label (Optional): Adds context to the field. If left blank, the label will not be visible to users.

ℹ️

Note: Some display field types are compatible only with specific data formats. For example, if a field is set to display images, you cannot map it to text data. Ensure the field type matches your data source field format to avoid display issues.

Supported Field Types

Display Field	Description
Cover Media	Display a featured image as a prominent top section element.
Text	Displays plain text. Ideal for names, titles, or short descriptions.
Rich Text	Supports long text, markdown, or HTML formatting. Allows for more detailed descriptions or notes.
Headings	Various heading sizes
Email	Displays email addresses as clickable mailto links, allowing users to start an email directly.
URL	Displays website links as clickable URLs, allowing users to navigate to external pages.
Tag	Allows you to display one or more tags, helpful for organizing items by category or status.
File	Provides a link for users to download attachments, such as PDFs or other documents.
Video	Embed video content from a supported source, allowing users to watch content directly in the block.
Audio	Embed audio files, letting users listen to content directly within the block.
Image	Displays a single image, useful for things like profile pictures or product images.
Image gallery	Displays multiple images in a gallery format, useful for showcasing a collection of visuals.
Embed	Allows you to embed content from other services, such as YouTube videos, Calendly, or social media posts.
Rating	Displays a rating system, typically with stars, to visually represent ratings or scores.
Checkbox	Shows a checkbox, useful for indicating completed items or allowing users to mark items as done.

Filtering the Filter Options

You can also filter the filter options to display different options based on user attributes, selected records, etc. Just click on the branching icon next to the Options subtitle:

Then toggle it on and setup the conditions you want to apply to filter to the filter.

Embed Block

You can embed any Softr block in another application. Learn how in our Page and Block Embed guide.

Actions

Actions let you define what happens when users interact with a block, such as navigating to a new page, editing records, or triggering workflows. This ensures your app not only displays data but also offers dynamic user engagement.

Item buttons

Edit record: Modify the details of a specific record.

One-Click Update: Apply predefined updates to a record with a single click.

Open details page: Open the details page of the selected record.

Delete Record: Remove a record from your data.

Open URL: Redirect users to an external link.

Download file: Provide users with a direct option to download associated files.

Export: Export visible record or page.

Scroll to: Move the view to a specific section within the block.

Call API: This action triggers a custom API call for advanced integrations (available for Professional, Business, and Enterprise plans).

Visibility

Control who can see a block by setting up visibility rules. This helps tailor the user experience by showing relevant content to the right audience, improving personalization and security.

Style

Customize the look and feel of your blocks with styling options. Adjust fonts, colors, spacing, and more to align with your app’s branding and create a polished, professional design.

Showing detailed information based on logged-in user data

In addition to showing Item details connected to a list block, you can also set up an Item details block to show details based on logged-in user data without needing an additional list block. E.g., show company profile details for the logged-in client.

Follow these steps to set it up:

Create a new page and add an Item details block.

Connect the Item details block to the same data source (e.g., Airtable Base and Table) where you store the user data.

Apply Conditional Filters to display data based on user attributes dynamically.

Example: Filter records where the logged-in user’s company matches the name field in the company database. Result: Users who open the page with this detail block will see only their company information.