# AX - レコード詳細

## 概要

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

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

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

***

## はじめに

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

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

***

## 設定オプション

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

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

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

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

#### 例

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

<figure><img src="https://9391847-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}
```

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

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

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

レイアウトスタイルを選択してください:

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

<figure><img src="https://9391847-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>カスタムレイアウトエディター</p></figcaption></figure>

### **列数**

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

### **密度**

コンポーネント内の要素間の間隔を調整して、読みやすさを最適化します:

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

***

## ユースケース例

### 例1: アカウントハイライトパネル

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

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

***

#### **実現できること**

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

***

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

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

***

**設定方法:**

{% stepper %}
{% step %}

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

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

{% step %}

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

* オブジェクト名を `Account`
* レコードIDを `{!Item.Id}`
* レコードタイプを `Master`
* レイアウトを `Compact`
  {% endstep %}

{% step %}

#### **設定を確認します**

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

***

**リンク**

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

***

### 例2: ケースに親アカウントの詳細を表示する <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>" %}

ケース対応中にサービス担当者がすぐにアカウントの文脈を把握できるようにし、タブを切り替えたり、他の場所で情報を探したりすることなく、すべての顧客対応をパーソナライズできるようにします。

***

#### **実現できること**

* **Customer 360ビュー:** 担当者はケース上で関連するアカウント詳細を直接確認でき、顧客全体の文脈を一目で把握できます
* **ケース解決率の向上:** アカウント情報へのアクセスが速くなることで、担当者は背景情報を探すのではなく、問題解決に集中できます

***

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

* **ケースオブジェクトページ:** Experience Builderで、ケースオブジェクトページ、特にケース詳細ページを作成していることを確認します

***

#### **セットアップ方法**

{% stepper %}
{% step %}

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

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

{% step %}

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

* オブジェクト名を `Account`
* レコードIDを `{!Item.AccountId}`
* レコードタイプを `Master`
* レイアウトを `Compact`
  {% endstep %}

{% step %}

#### **設定を確認します**

* ページをプレビューして、親アカウントの詳細がケースレコードに正しく表示されていることを確認します
  {% endstep %}
  {% endstepper %}