Details Element

What You'll Learn

This article will show you how to create and customize Detail Elements to effectively display record information. You'll learn how to configure layouts, add fields from connected tables, incorporate action links, and set up conditional display rules to create a polished, informative view for your users.

What are Detail Elements?

Detail Elements display the fields of a single record in a customizable layout within your Live App. They show information from the record's table and can also incorporate fields from connected parent records.

Users typically access Detail Elements by following a link from another element that displays multiple records, such as clicking a "view more" link on a record from a Table, List, or Search Element.

Detail Elements also support adding links to edit, delete, view more details about that record, link to other pages within the app, or trigger actions.

Configuration

To access the settings of a Detail Element, hover over the element and select the pencil icon that appears at the top left corner. This will open a menu with options for Settings, Add Details, and Rules, which can be modified in the toolbox on the left side of the page preview.

The element's data source is displayed at the top of the toolbox, showing the specific records associated with the element.

Design Settings

In the "Settings" section, you can customize the appearance and behavior of your Detail Element:

Hide Empty Values: Choose to hide fields when there is no value or keep fields visible without displaying any value next to the field label.
Label Format: Select from label formatting options including Left aligned, Right aligned, Top (above the value), or None (hide label).
Layout: Choose from various layout options to personalize the arrangement of your columns.
Title: Add a title that will be displayed above the element in your Live App.
Description: Include a description to provide users with additional context on how to use the element effectively.

Content Settings

The "Add Details" section gives you control over what content appears in your Detail Element. This section is divided into four areas:

Fields

Add or remove fields from the primary table of the record being displayed. You can click directly on a field in the list or drag and drop it into your Detail Element in the preview.

To delete fields, hover over the field in the preview and click the trash icon. To edit a field, click the pen icon to open Item Properties where you can update the label format, title, and styling options:

Label Format: Use the group's format or hide the label
Label: Customize the text shown next to the field value
Style: Format the text as header 1, header 2, bold, or italics
Map: For Address fields, display a map above the address

Field Layout & Grouping

The Detail Element offers pre-set layout options to organize fields into columns. You can also rearrange or group fields by clicking and dragging them to a new position.

Connections

Add fields from tables connected to the primary table being displayed. This allows you to show connected values without including them directly in the primary table's record.

Tip: For cascading connections, the element will only recognize a "great grandchild" table through the "grandchild" table relationship. Deeper connections are not available for field selections.

Actions

Incorporate action links into your Detail Element to enable various operations:

Edit record: Creates a new child page with a Form to edit the record
View record details: Creates a new child page showing all details for this record
Delete record: Adds a link to delete the record with confirmation
Link to another page: Links to an existing page in your app
Trigger an action: Adds a link to initiate actions like updating records or sending emails

Static Elements

Add static elements to provide structure and context:

Title/Copy: Add section titles or descriptive text
Divider: Insert visual separators between sections

Display Rules

In the Rules section, you can create conditional display logic to hide, show, or rename fields based on specific criteria.

Each rule consists of:

If: The condition that triggers the rule
Then: The action taken (show, hide, or rename the label)

For the "Rename label" option, you can select a field in the view and enter a new label for that field when the condition is met. Learn about Display Rules here

Notes & Troubleshooting

To learn more about table relationships, refer to our documentation on data connections.
Detail Elements work best when linking from elements that show multiple records, such as Tables, Lists, or Search results.
For complex hierarchical data, remember that Detail Elements can only access data up to "great grandchild" relationships.