> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-record-detail.md). # AX - Record Detail ## Overview **AX - Record Detail** is an Experience Cloud component that displays Salesforce record fields and details in a customizable layout on Experience Sites pages. Use it to show portal users detailed information about specific records—such as account details, case information, order specifics, or standard or custom object data. Configure which fields appear, their layout, and styling in Experience Builder without code. Perfect for account detail pages, case detail views, order information displays, or anywhere portal users need to see comprehensive record information in a custom format. ## Getting Started Use this simple tutorial to learn the basics of the Record Details component and start building your use cases. {% @arcade/embed url="" flowId="F3WnyWtZCFNcb07r05cm" %} ## Configuration ### **Object Name** Specify the Salesforce object you want to display (e.g., Account, Contact, Opportunity, Case). This determines the type of record the component will fetch and present. ### **Record ID** Provide the unique identifier of the specific record you want to display. This ensures the component retrieves and displays the correct information. #### Example Imagine you want to add the Record Detail Component to a page about a specific account. To show the details of that account on the page (instead of just any random account), you'll need to use a special Experience Cloud expression. This tells the component to dynamically display the details of the account that the user is currently viewing.
``` {!recordId} ``` ### **Record Type** Sets the record type to use when the component has no Record ID, for example when you use it to create a record. It determines the picklist values, default values and page layout applied to the new record. When a Record ID is set, the record already carries its own record type. The component uses that one, and this setting is ignored. ### **Mode** Sets how editable fields are presented. It does not control whether the record can be edited — use **Read Only** for that. * **Inline:** Fields show their values as text. A small pencil icon appears next to a field, and clicking it turns that one field into an input. Best when users mostly read the record and occasionally correct a value. * **Input:** Every editable field renders as an input straight away, like a form. Best when users are expected to fill in or update several fields at once. ### **Read Only (Toggle)** Choose whether users can edit the displayed record data directly on your Experience Cloud site. Enable this option for a static, informational view, or disable it to allow users to update record details. ### **Layout** Choose how the component decides which fields to show: * **Full:** Uses the Salesforce page layout assigned to the record. Salesforce assigns page layouts by record type and by profile, so the fields follow that setup automatically. * **Compact:** Uses the object's compact layout, a short summary of the record. Useful for highlight panels and side columns. * **Custom:** Uses a field list you build yourself in the Custom Layout Builder, instead of the page layout. You pick the fields and their order. A Custom Layout replaces the page layout, so by default it does not follow page layout assignments. Every field you place appears on every record of the object, whatever its record type. To make a Custom Layout record type aware, turn on **Show Record Type Layout Fields Only** below.

Custom Layout Editor

### **Show Record Type Layout Fields Only** Requires **Layout** set to **Custom**. Restricts a Custom Layout to the fields that also appear on the page layout assigned to the record's record type. Fields you placed that are not on that page layout are hidden. This lets one Custom Layout serve several record types: place every field the object needs, and each record shows only the ones its record type uses. A US record type whose page layout has State shows State; a Canada record type whose page layout has Province shows Province instead. Leave it off to show every field you placed, whatever the record type. **Place mutually exclusive fields on the same row.** When a field is hidden, the remaining fields on that row move up to fill the gap, but fields never move between rows. So put the per-record-type alternatives — State for US, Province for Canada — side by side on one row, and every record type gets a full row. Spread across separate rows, each record type leaves a gap where the other's field would be. Two things to keep in mind: * Salesforce assigns page layouts by record type **and by profile**, so the fields a visitor sees follow the assignment for their profile. That can differ from what you see in Setup as an admin. * On a record with no record type, the component falls back to the object's default page layout. Turn the setting off if you want every placed field to show in that case. ### **Number of Columns** Define how record fields are arranged across the component. Choose multiple columns for a structured, tabular layout or a single column for a streamlined, vertical presentation. ### **Density** Control the spacing between elements in the component for optimal readability: * **Comfy:** Provides generous spacing for a relaxed reading experience. * **Compact:** Uses tighter spacing for a more condensed view. * **Auto:** Automatically adjusts spacing based on screen size and available space. ### Additional Settings **API Name** is a unique identifier used to reference the component (3–30 characters; letters, digits, underscores, and dashes). **Variant** selects the component's visual style. When editing is enabled, **Save Button Label** and **Cancel Button Label** set the text of the record's save and cancel buttons. **Fields Layout** extends **Number of Columns** responsively — set the number of columns per container size (extra-small through large). ## Styling {% tabs %} {% tab title="Size" %} Controls the component's dimensions. {% endtab %} {% tab title="Margin" %} Controls the outer spacing around the component. {% endtab %} {% tab title="Padding" %} Controls the inner spacing of the component. {% endtab %} {% endtabs %} ## Use Cases ### Example 1: Account Highlight Panel {% @arcade/embed url="" flowId="4kdHqm6vhNkcnPUq42E7" %} Give your account pages instant visual impact by surfacing the most critical account information in a clean, scannable highlight panel. This setup pulls key fields directly from the Account record and displays them in a compact format, right where your team needs them. *** #### **What You'll Achieve** * **Faster account scanning:** Key account details are immediately visible without opening the full record * **Consistent presentation:** A structured highlight panel creates a uniform experience across all account pages *** #### **Before You Begin** * **Profile card component:** Optionally use a profile card component as the container to frame your highlight panel *** **How to Set It Up:** {% stepper %} {% step %} #### **Add the component to your Account list page** * Drag the AX - Record Detail component into Experience Builder on the Account list page {% endstep %} {% step %} #### **Configure the data source** * Set Object Name to `Account` * Set Record ID to `{!Item.Id}` * Set Layout to `Compact` {% endstep %} {% step %} #### **Review your setup** * Preview the page to confirm the highlight panel displays the correct account fields {% endstep %} {% endstepper %} *** **Links** *** ### Example 2: Display parent account details on a case {% @arcade/embed url="" flowId="vu4akvJvLUqRGJUTl8Bv" %} Equip your service agents with instant account context as they work a case, so they can personalize every customer interaction without switching tabs or searching elsewhere for information. *** #### **What You'll Achieve** * **Customer 360 view:** Agents see relevant account details directly on the case, providing full customer context at a glance * **Improved case resolution rate:** Faster access to account information means agents can focus on solving the issue rather than hunting for background details *** #### **Before You Begin** * **Case object pages:** Ensure you have created Case Object pages, specifically the Case Detail page, in Experience Builder *** #### **How to Set It Up** {% stepper %} {% step %} #### **Add the component to your Case Detail page** * Drag the AX - Record Detail component into Experience Builder on the Case Detail page {% endstep %} {% step %} #### **Configure the data source** * Set Object Name to `Account` * Set Record ID to `{!Item.AccountId}` * Set Layout to `Compact` {% endstep %} {% step %} #### **Review your setup** * Preview the page to confirm parent account details are displaying correctly on the case record {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-record-detail.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.