Custom Detail View

Audience: Low-code Engineers

Skill Prerequisites: Listings, Tokens, HTML/CSS

Shows extra information about a listing item in a panel, using an HTML template you write. The panel can open as a modal, a left or right sidebar, or inline under the row.

It's used on a listing's item buttons. The Inline Details preset in the listing's Item Buttons settings adds a button with this action.

Custom Detail View or Detail View?

The names are easy to mix up. Pick the one that matches how much control you need over the content.

Feature	Custom Detail View	Detail View
Content	Your own HTML Template	The item's fields, built automatically
Which fields	Whatever the template contains	Fields with Visible On > Detail View checked
Item buttons and ID in the panel	No	Yes, in modal and sidebar mode
Legacy view	Yes, with limits	No

Typical Use Cases

• Show a formatted summary of a record, such as a contact card with name, email and phone
• Show a long description or notes that don't fit in a listing column
• Expand a row inline to show related details, like an order's shipping address
• Show a record's details in a sidebar without leaving the listing

Don't use it to

• Show all the item's fields without writing HTML. Use Detail View instead.
• Edit the item. Use Datasource Edit, Datasource Inline Edit or Open Form Popup and Stop Execution.
• Go to the item's own page. Use Datasource View.

Related Actions

Action Name	Description
Detail View	Shows the item's fields automatically, without a template.
Datasource View	Redirects to the item's view URL.
Datasource Inline Edit	Turns on inline editing for the item.
Open Form Popup and Stop Execution	Opens a form in a popup, for example to show or edit the item.
Datasource Refresh	Reloads the listing data.

Input Parameter Reference

Parameter	Description	Supports Tokens	Default	Required
Display Mode	Where the panel opens: Modal, Left Sidebar, Right Sidebar or Inline. See Display modes. Ignored by the Legacy view.	No	Right Sidebar	No
Title	Text shown in the panel's header, for example [FirstName] [LastName]. It's shown as plain text, so HTML tags aren't rendered. Ignored by the Legacy view.	Yes	empty string	No
Template	The HTML shown in the panel's body. It's a rich text editor. Use item tokens such as [Email] or [CreatedOn:FormattedValue], plus any other tokens.	Yes	empty string	No

Both Title and Template have tokens applied on the server before the panel opens.

Item tokens

When the action runs from an item button, the clicked item's data is available as tokens:

Token	Value
[Id]	The item's ID.
[FieldName]	The raw value of the field, for example [Price] gives 1250.5.
[FieldName:FormattedValue]	The value as the listing displays it, for example [Price:FormattedValue] gives $1,250.50.

Use the field's Name from the listing's field settings. See Listing Tokens for other tokens available in listings.

Display modes

Value	Shown as
Modal	A centered dialog.
LeftSidebar	A panel that slides in from the left.
RightSidebar	A panel that slides in from the right. This is the default.
Inline	A panel under the clicked row.

Inline only works for item buttons in the Data Table view, when the item buttons are on the right. Everywhere else, the panel opens as a right sidebar.

Legacy view

Listings that use the Legacy view handle this action differently:

• Display Mode and Title are ignored.
• The template shows as an expanded area under the row, or in a dialog when the listing uses the legacy listing template. Clicking the same button again on the same row closes it.

Considerations

• It ends execution. It's a final action, so actions placed after it don't run. Put any preparation, such as loading extra data, before it.
• The template isn't sanitized. HTML and scripts in the template run as written. If a token can contain text entered by users, don't build HTML or scripts from it without care.
• Tokens come from the clicked item. On a root button there's no item, so item tokens aren't available.
• Only one inline panel per row. Opening another inline panel on the same row replaces the previous one.

Examples

tip

To understand how to use the below examples, please see Running Examples.

1. Show a contact card in a sidebar

This item button action opens a right sidebar with the contact's name in the header and a short card in the body. It uses the FirstName, LastName, Email, Phone and CreatedOn fields of the listing.

{
    "Title": "Custom Detail View",
    "ActionType": "DataSource.DetailView",
    "Description": "Show the contact card",
    "Parameters": {
        "DisplayMode": "RightSidebar",
        "Title": "[FirstName] [LastName]",
        "Template": "<p><strong>Email:</strong> <a href=\"mailto:[Email]\">[Email]</a></p><p><strong>Phone:</strong> [Phone]</p><p class=\"text-muted\">Added on [CreatedOn:FormattedValue]</p>"
    }
}

2. Expand an order row inline

This action shows the shipping address under the clicked row in a Data Table view.

{
    "Title": "Custom Detail View",
    "ActionType": "DataSource.DetailView",
    "Description": "Show the shipping address under the row",
    "Parameters": {
        "DisplayMode": "Inline",
        "Title": "Order #[OrderNumber]",
        "Template": "<address>[ShippingStreet]<br>[ShippingCity], [ShippingZip]<br>[ShippingCountry]</address>"
    }
}

Revised 09/26/2026