Published at: 2026-09-17
02-configure-details-page-layout.md
Customize how users view one record so key business information is easy to find.
Overview
A details page layout controls fields, components, buttons, related lists, and the mobile summary. Assign a dedicated layout by user role and Record Type.
Before you begin
- Create the target object.
- Configure the core business fields.
- Identify the fields and buttons required by each role and Record Type.
- Decide whether Web and mobile need independent layouts.
Desktop details page layout
The editor has a navigation area, canvas, and settings area.
Navigation area
| Category | Components | Description |
|---|---|---|
| General | Title and buttons | Configures labels, buttons, and exposed-button count |
| Summary | Configures key fields | |
| Other | Related Teams, Follow-Up Activity, details, Modification Record, process and approval lists, embedded pages, and charts | |
| Business | Related Object and detail object | Includes SFA components; detail objects inherit list settings unless Standalone Configuration is enabled |
| Container | Tab Container and Grid Container | Configures grid count and proportions |
The field area supports creating fields and configuring visibility. It includes 32 Field Type values and three scenario-based field groups.
Canvas
Drag components from the left and configure field visibility in the live preview.
Settings area
The right area contains Global Settings and Component Settings.
Procedure
Step 1: Open the layout editor
- Sign in to Setup, and go to Object Management.
- Open the target object, and select Layout.
- Select Details Page Layout, then create or edit a layout.
Step 2: Configure global settings
Basic Info
| Setting | Description |
|---|---|
| Layout Name | Custom multilingual name |
| API Name | Generated and read-only |
| Description | Custom layout description |
| Layout Template | Header and One Region or Header and Right Sidebar |
| JS Plugin | Desktop and mobile details-page plugins |
| Field Layout | Left aligned, Midline Aligned, or Top Aligned |
[!WARNING] Header and One Region removes the right-side Related Teams card area from Header and Right Sidebar.
UI events
UI events run functions that dynamically change the page.
[!IMPORTANT] UI events affect only the Form Page, and saved data determines the final result. All Custom Object values are supported. Some Standard Object values are supported, including Sales Lead, accounts, Order Product, and opportunities. This feature requires the Ultimate or Group edition.
| Event | Trigger Timing | Example | Configuration |
|---|---|---|---|
| Field event | A field changes and loses focus | Copy an Account Address to an order delivery address | UI Event > Add Data Update Event > Field Event |
| Detail-object event | A detail is created, edited, or deleted | Set a Product Details discount by Account Level | UI Event > Add Data Update Event > Detail Object Event |
| Page-load event | The Form Page loads | Create signer details from Business Data | UI Event > Add Data Update Event > Page Load Event |
A Validate Event runs a Custom Function after a field changes and loses focus. Use it to validate a phone number or email immediately.
Step 3: Configure components
Title card
- Select a general or advanced template.
- Configure field arrangement and colors in advanced templates.
- Manage button visibility and the number of exposed buttons.
- Configure component details and visibility conditions.
[!NOTE] Only buttons placed on the details page appear here. Other buttons appear under More Actions.
Summary fields
Configure summary field visibility.
Details
When the Form Page layout is disabled, configure field visibility and Data Range in details.
Step 4: Configure buttons
- Select Title and Buttons on the canvas.
- Click Button Management.
- Configure each button’s visibility.
- Set the exposed-button count.
Step 5: Configure related lists
Configure whether to show only nonempty lists, the Record Type style, independent detail-object settings, and preset filters.
Related lists can expose a Batch Operation when configured for the detail object.
| Button type | Support | Configuration |
|---|---|---|
| Detail general button | Not supported | Not applicable |
| List Page Bulk Operation | Visible or hidden | Set the button location on the detail object |
| List Page Single Operation | Visible or hidden | Set the button location on the detail object |
[!NOTE] Bulk buttons remain available after selection. Records that fail preset conditions do not run the operation.
Mobile details page layout
The mobile layout can inherit the desktop layout or use Standalone Configuration.
Summary fields
Configure summary field visibility.
Navigation container
- Configure, sort, and add custom tabs.
- Select a component under navigation to configure its properties.
[!NOTE] Detail objects inherit Web settings unless configured independently. If user tabs differ from Setup, select Navigation Settings > Restore Initial Configuration on mobile.
Button management
Set visibility for details-page buttons. They appear at the bottom of the mobile details page.
Expected results
- On Web, verify the title, buttons, summary, tabs, and related lists.
- On mobile, verify the summary card, bottom buttons, and tabs.