# 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 flowId="F3WnyWtZCFNcb07r05cm" url="<https://app.arcade.software/share/F3WnyWtZCFNcb07r05cm>" %}

***

## Configuration Options

### **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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJdQltF6RELKiE4iUEK13%2F2024-07-05_16-26-43.png?alt=media&#x26;token=9b920b24-f426-460c-a96d-1a1ab7651df6" alt=""><figcaption></figcaption></figure>

```
{!recordId}
```

### **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**

Select a layout style:

* **Full:** Displays all available fields in a detailed format, perfect for seeing everything.
* **Compact:** Shows only the most important fields to save space, ideal for quick overviews.
* **Custom:** Tailor the layout to your specific needs. Handpick which fields to display and arrange them in your desired order

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FCrMiIjXHCYIaf0tQb3uF%2FJuly%203%202024.gif?alt=media&#x26;token=adc06821-a3e8-4430-9534-057c44b279fa" alt=""><figcaption><p>Custom Layout Editor</p></figcaption></figure>

### **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.

***

## Use Case Examples

### Example 1: Account Highlight Panel

{% @arcade/embed flowId="4kdHqm6vhNkcnPUq42E7" url="<https://app.arcade.software/share/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 Record Type to `Master`
* 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**

{% content-ref url="ax-profile-card" %}
[ax-profile-card](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-profile-card)
{% endcontent-ref %}

***

### Example 2: Display parent account details on a case <a href="#id-4b86f04a-b256-490c-a0ee-834ee0a4e968" id="id-4b86f04a-b256-490c-a0ee-834ee0a4e968"></a>

{% @arcade/embed flowId="vu4akvJvLUqRGJUTl8Bv" url="<https://app.arcade.software/share/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 Record Type to `Master`
* 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 %}