> 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-cloud-ja/experience-components/ax-record-detail.md).

# AX - レコード詳細

## 概要

**AX - レコード詳細** Experience Sites ページ上で Salesforce レコードのフィールドと詳細をカスタマイズ可能なレイアウトで表示する Experience Cloud コンポーネントです。

ポータルユーザーに、アカウント詳細、ケース情報、注文の詳細、標準オブジェクトまたはカスタムオブジェクトのデータなど、特定のレコードに関する詳細情報を表示するために使用します。Experience Builder で、どのフィールドを表示するか、そのレイアウトやスタイルをコードなしで設定できます。

アカウント詳細ページ、ケース詳細ビュー、注文情報の表示、またはポータルユーザーがカスタム形式で包括的なレコード情報を確認する必要があるあらゆる場所に最適です。

***

## はじめに

この簡単なチュートリアルを使って、レコード詳細コンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed url="<https://app.arcade.software/share/F3WnyWtZCFNcb07r05cm>" flowId="F3WnyWtZCFNcb07r05cm" %}

***

## 設定オプション

### **オブジェクト名**

表示したい Salesforce オブジェクトを指定します（例: Account、Contact、Opportunity、Case）。これにより、コンポーネントが取得して表示するレコードの種類が決まります。

### **レコード ID**

表示したい特定のレコードの一意の識別子を入力します。これにより、コンポーネントが正しい情報を取得して表示できます。

#### 例

特定のアカウントに関するページにレコード詳細コンポーネントを追加したいとします。そのアカウントの詳細をページに表示するには（単に任意のアカウントではなく）、特別な Experience Cloud 式を使う必要があります。これにより、コンポーネントはユーザーが現在閲覧しているアカウントの詳細を動的に表示します。

<figure><img src="/files/f3895893bdf141d0afef2148e4a05755e39cc1d3" alt=""><figcaption></figcaption></figure>

```
{!recordId}
```

### **読み取り専用（トグル）**

Experience Cloud サイト上で、表示されているレコードデータをユーザーが直接編集できるようにするかどうかを選択します。静的な情報表示にする場合はこのオプションを有効にし、ユーザーがレコード詳細を更新できるようにする場合は無効にします。

### **レイアウト**

レイアウトスタイルを選択:

* **フル:** 利用可能なすべてのフィールドを詳細な形式で表示します。全体を確認するのに最適です。
* **コンパクト:** スペースを節約するために最も重要なフィールドのみを表示します。素早く概要を把握するのに最適です。
* **カスタム:** レイアウトを必要に合わせて調整します。表示するフィールドを手動で選び、希望の順序に並べ替えます。

<figure><img src="/files/fcc78241ab58bef75cf42a2c94274b7116012001" alt=""><figcaption><p>カスタムレイアウトエディター</p></figcaption></figure>

### **列数**

レコードフィールドをコンポーネント全体でどのように配置するかを定義します。構造化された表形式のレイアウトにするには複数列、すっきりした縦長の表示にするには 1 列を選択します。

### **密度**

最適な可読性のために、コンポーネント内の要素間の間隔を調整します:

* **快適:** ゆったりとした読書体験のために十分な余白を提供します。
* **コンパクト:** より詰めた間隔で、よりコンパクトな表示にします。
* **自動:** 画面サイズと利用可能なスペースに基づいて、間隔を自動的に調整します。

***

## ユースケース例

### 例 1: アカウント強調表示パネル

{% @arcade/embed url="<https://app.arcade.software/share/4kdHqm6vhNkcnPUq42E7>" flowId="4kdHqm6vhNkcnPUq42E7" %}

最も重要なアカウント情報を、見やすく確認しやすいハイライトパネルに表示することで、アカウントページに即時の視覚的なインパクトを与えます。この設定では、アカウントレコードから主要フィールドを直接取得し、チームが必要とする場所にコンパクトな形式で表示します。

***

#### **達成できること**

* **アカウント確認の高速化:** 主要なアカウント詳細が、レコード全体を開かなくてもすぐに表示されます
* **一貫した表示:** 構造化されたハイライトパネルにより、すべてのアカウントページで統一された体験を提供します

***

#### **始める前に**

* **プロフィールカードコンポーネント:** 必要に応じて、ハイライトパネルを囲むコンテナとしてプロフィールカードコンポーネントを使用できます

***

**設定方法:**

{% stepper %}
{% step %}

#### **アカウント一覧ページにコンポーネントを追加する**

* Experience Builder のアカウント一覧ページに AX - Record Detail コンポーネントをドラッグします
  {% endstep %}

{% step %}

#### **データソースを設定**

* Object Name を `Account`
* Record ID を `{!Item.Id}`
* Record Type を `Master`
* Layout を `コンパクト`
  {% endstep %}

{% step %}

#### **設定を確認する**

* ページをプレビューして、ハイライトパネルに正しいアカウントフィールドが表示されていることを確認します
  {% endstep %}
  {% endstepper %}

***

**リンク**

{% content-ref url="/pages/924d004abfc4a926bc3a7a9525fc146d65fdba98" %}
[AX - プロフィールカード](/experience-cloud/experience-cloud-ja/experience-components/ax-profile-card.md)
{% endcontent-ref %}

***

### 例 2: ケース上に親アカウントの詳細を表示する <a href="#id-4b86f04a-b256-490c-a0ee-834ee0a4e968" id="id-4b86f04a-b256-490c-a0ee-834ee0a4e968"></a>

{% @arcade/embed url="<https://app.arcade.software/share/vu4akvJvLUqRGJUTl8Bv>" flowId="vu4akvJvLUqRGJUTl8Bv" %}

ケース対応中にアカウントのコンテキストを即座に把握できるようにし、タブを切り替えたり別の場所で情報を探したりすることなく、すべての顧客対応をよりパーソナライズできるようにします。

***

#### **達成できること**

* **Customer 360 ビュー:** エージェントはケース上で関連するアカウント詳細を直接確認でき、ひと目で完全な顧客コンテキストを把握できます
* **ケース解決率の向上:** アカウント情報へより迅速にアクセスできるため、エージェントは背景情報を探すのではなく、問題解決に集中できます

***

#### **始める前に**

* **ケースオブジェクトページ:** Experience Builder で、特に Case Detail ページを含む Case Object ページを作成しておいてください

***

#### **設定方法**

{% stepper %}
{% step %}

#### **ケース詳細ページにコンポーネントを追加する**

* Experience Builder のケース詳細ページに AX - Record Detail コンポーネントをドラッグします
  {% endstep %}

{% step %}

#### **データソースを設定**

* Object Name を `Account`
* Record ID を `{!Item.AccountId}`
* Record Type を `Master`
* Layout を `コンパクト`
  {% endstep %}

{% step %}

#### **設定を確認する**

* ページをプレビューして、親アカウントの詳細がケースレコード上で正しく表示されていることを確認します
  {% 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-cloud-ja/experience-components/ax-record-detail.md?ask=<question>&goal=<endgoal>
```

`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.
