Detail Page Layout

1. Detail Page Layout — Web

• The Detail Page layout configuration interface on the Web is divided into three areas from left to right: Navigation, Page Preview, and Settings.

1.1 Navigation area:

(1) The left side of the layout configuration interface contains two main parts: Components and Field Information.

• Supported component types:
  • Generic components: platform-provided components that exist for every custom object
    • Title & Buttons: configure whether the label and buttons are visible on the detail page and how many buttons are exposed
    • Summary: displays key detail information; configure which fields are shown
    • Others: Related Teams, Follow-Up Activity, Details, Change Log, Process List, Approval List, Embedded Page, Chart component
  • Business components: include Related Objects, Sub-objects, and SFA preset components
    • Sub-object component: independent configuration is not available; it inherits the Sub-object list page configuration.
  • Containers: Tabs container, Grid Container
• Field addition and visibility
  • Field Information includes 32 supported field types and 3 scenario-based field groups. See: Fields and Field Dependencies for details.

1.2 Page Preview area:

The center area provides a live preview of the page. (1) Drag components directly onto the page to configure them. (2) Configure field visibility (show/hide).

1.3 Settings area:

Note: The right side of the layout configuration interface mainly contains Global Settings and Component Settings.

1.3.1 Global Settings

Global Settings include Basic Information and UI Events.

• Basic Information:
  • Layout Name: customize the layout name.
  • API Name: auto-generated by the system and cannot be modified.
  • Layout Description: add a custom description for this detail page layout.
  • Switch Layout Template: while editing you can choose Vertical (top-bottom) layout or Classic (top-left-right) layout.
    • Note: If you configure the Vertical layout, the right-side area from the classic top-left-right layout that held the Related Teams card will not be visible.
  • The system supports Web and mobile detail page JS plugins.
  • Field Layout: enable independent field layout with three alignment options — left-aligned, center-aligned, or top-bottom aligned.

• UI Events: trigger custom functions via UI events to change interface data. Note: 1. UI event results apply only on Create/Edit pages; changes take effect after save. 2. All custom objects support UI events; some preset objects also support them (Leads, Account, Orders/Order Products, Opportunity 2.0/Opportunity 2.0 Details). 3. UI Events are available only in the Enterprise and Group editions.

• Data Update Events

  • Field Event: on Create/Edit page, when a field value changes (and the field loses focus), trigger a custom function to update Primary Object or Sub-object data.
    • Example: On a new Order, selecting an Account copies the Account address into the Order’s Shipping Address field.
    • Configure: UI Events → Add Data Update Event → choose Field Event.
  • Sub-object Event: on a simultaneous Primary Object + Sub-object Create/Edit page, when creating/editing/deleting a Sub-object row, trigger a custom function to update Primary Object/Sub-object data (entry appears only if the object has Sub-objects).
    • Example: For each added Order Product row, set that row’s discount based on the Account tier.
    • Configure: UI Events → Add Data Update Event → choose Sub-object Event and select triggers (create row / edit row / delete row).
  • Page Load Event: on Create/Edit page, when the page loads, trigger a custom function to update Primary Object or Sub-object data.
    • Example: When creating an E-Signature record, automatically create signer Sub-object rows based on the related business data.
    • Configure: UI Events → Add Data Update Event → choose Page Load Event.

• Validation Events:
  • On Create/Edit page: when a field value changes (and loses focus), trigger a custom function to validate whether the field value meets specific criteria.
    • Example: Provide immediate frontend feedback when phone/email format is invalid.
    • Configure: UI Events → Add Validation Event.

1.3.2 Component Settings

1. Title card settings - Choose card template - Basic style: only toggle template visibility. - Advanced template: configure field layout, colors, etc. After selecting, set parameters in Field Settings. - Button management: control button visibility and exposed count. Hover over a button option to set show/hide. Buttons configured with position = Detail Page (in the Admin Console) will appear here. - Configure fields, component basic info, and visibility conditions.

2. Summary field management - Manage which Summary fields appear on the detail page. Hover a field option to set show/hide.

3. Details section - If Create/Edit page layout is not enabled, you can configure field visibility and data scope in the Details section on the detail page.

4. When you select Related Object or Sub-object components (from Business components), you can configure: - Show only entries with data - Record Type display style - Whether Sub-object has independent configuration separate from its list page layout - Predefine data filters

1. Enable independent configuration - Scene (scenario) visibility settings - Sub-object generic / bulk / row-level action buttons - 5.1 Sub-object generic buttons — currently not supported - 5.2 Bulk action buttons 1) Can be shown or hidden 2) In Admin Console button configuration, set button position to List Page Bulk Actions 3) After configuration, when rows are selected in the Sub-object list page, the button appears above the list Note: Bulk buttons remain visible whenever rows are selected; rows that don’t meet preconditions won’t execute the action after the button is clicked. - 5.3 Sub-object row-level action buttons 1) Can be shown or hidden 2) In Admin Console button configuration, set button position to List Page Row Actions 3) After configuration, the button appears under the Operations column on the right of each Sub-object row

2. Detail Page Layout — Mobile

Note: Mobile detail page layout can either inherit the Web layout or be configured independently.

1. Inheriting the Web layout syncs Summary fields and related configuration from the Web detail page.
2. Mobile detail pages support independent layout configuration.

• Summary fields: control which Summary fields display on the detail page. Hover a field option to set show/hide.
• Navigation container: tap a tab to configure it — reorder tabs, add custom tabs; tap a component under navigation to configure component properties.
  • Note: Sub-object can enable independent configuration; if not enabled, it inherits the Web component settings.
  • Note: If mobile detail page tabs don’t match the Admin Console layout, it may be because the user manually customized tabs on the frontend; that manual configuration affects only the current user. To restore system defaults, open Tab Configuration → Navigation Settings → Restore Default Configuration, which resyncs mobile tabs with the Admin layout.
• Button management:
  • Control show/hide
  • In Admin Console button configuration, set button position to Detail Page
  • After configuration, buttons display at the bottom of the mobile detail page

3. FAQ

1. Why can’t I configure field style on the detail page?

If the object has an enabled Create/Edit page layout, the detail page cannot configure field styles independently.

2. Why don’t buttons configured on the Web detail page appear on the mobile detail page?

The user has not enabled an independent mobile detail page layout.

3. Where can I disable inline editing on the detail page (Quick Edit / Real-time Edit)?

Request the gated feature “Disable Real-time Edit for all objects”. After approval, the inline edit button will be removed for all objects. Apply with caution.

4. Can table components in form layouts lock rows?

No. Table components are fixed within the page; they scroll with the overall detail/Create/Edit page and do not support locking rows/columns independently.

5. How to configure aggregate fields for related lists?

Admin Console → Related object’s detail page layout → Configure related list independently. Note: Aggregation under related — Tile style sums data across all pages. If the detail page related section does not enable independent layout, aggregation fields under related → Tile style inherit the large-list aggregation across all pages.

6. I renamed the default layout and it works when opened, but the list page still shows the old name. Why?

Answer: You changed the layout’s default name, not the localized (language-specific) value. Click the globe icon to edit the translation for the current language.

Caption: Default layout name change not reflected

7. Which components does the floating quick-navigation support linking to?

To-Do, My Orders, Charts (Sales Briefing, Leads Conversion, Leaderboard), Scenes, Dashboard, Custom Components, Announcements, Tasks, Calendar, Menu Entry.

8. If I rename a tab object on the detail page, why doesn’t the mobile object name change?

Both Web and Mobile default tab names use the object name. When mobile layout inherits from Web, the tab name is not inherited.

9. I translated a related list name and it works on Web but not Mobile. Why?

Web tabs display the tab name, and clicking into the component shows the component name. Mobile navigation and component views both display the component name. For mobile, translate the component name (not the tab name). In the Translation Workbench find: Detail Page Layout → Object Name → Page Component to translate the component name.

10. I set colors for picklist or multi-select options and use them as tag fields in detail page or Web list table tag columns, but the tags don’t show those colors. Why?

Tag colors are fixed and do not take picklist option colors.

11. I adjusted column order in a related list, but the change didn’t take effect. Why?

Check the related list display style — column ordering applies only when you select Record Type dropdown display. Tile (Record Type Tile) style does not support column ordering.

picture coming soon:

12. I exposed a row-level button in the Sub-object list, but it doesn’t appear in the Related list. Why?

Related Sub-object lists do not currently support exposed row-level buttons.