> 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 で、コードなしで表示するフィールド、レイアウト、スタイルを設定できます。 アカウント詳細ページ、ケース詳細ビュー、受注情報の表示、またはポータルユーザーがカスタム形式で包括的なレコード情報を確認する必要があるあらゆる場所に最適です。 ## はじめに この簡単なチュートリアルで Record Details コンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed url="" flowId="F3WnyWtZCFNcb07r05cm" %} ## 設定 ### **オブジェクト名** 表示したい Salesforce オブジェクトを指定します（例: Account、Contact、Opportunity、Case）。これにより、コンポーネントが取得して表示するレコードの種類が決まります。 ### **レコード ID** 表示したい特定のレコードの一意の識別子を指定します。これにより、コンポーネントが正しい情報を取得して表示できます。 #### 例 特定のアカウントに関するページへ Record Detail コンポーネントを追加したいとします。ページ上にそのアカウントの詳細を表示するには（単に任意のアカウントを表示するのではなく）、特別な Experience Cloud 式を使用する必要があります。これにより、コンポーネントはユーザーが現在表示しているアカウントの詳細を動的に表示するようになります。
``` {!recordId} ``` ### **レコードタイプ** コンポーネントにレコード ID がない場合、たとえばレコードを作成するときに使用するレコードタイプを設定します。これにより、新しいレコードに適用される選択リスト値、デフォルト値、ページレイアウトが決まります。 レコード ID が設定されている場合、そのレコードにはすでに独自のレコードタイプが含まれています。コンポーネントはそのレコードタイプを使用し、この設定は無視されます。 ### **モード** 編集可能なフィールドの表示方法を設定します。レコードを編集できるかどうかは制御しません — その場合は **読み取り専用** を使用します。 * **インライン:** フィールドはテキストとして値を表示します。フィールドの横に小さな鉛筆アイコンが表示され、クリックするとそのフィールドが入力欄に切り替わります。主にレコードを閲覧し、時々値を修正する場合に最適です。 * **入力:** 編集可能な各フィールドは、フォームのように最初から入力欄として表示されます。複数のフィールドを一度に入力または更新することが想定される場合に最適です。 ### **読み取り専用（トグル）** Experience Cloud サイト上で表示されているレコードデータをユーザーが直接編集できるかどうかを選択します。静的な情報表示にするにはこのオプションを有効にし、ユーザーにレコード詳細を更新させるには無効にします。 ### **レイアウト** 表示するフィールドをコンポーネントがどのように決定するかを選択します: * **フル:** レコードに割り当てられている Salesforce のページレイアウトを使用します。Salesforce はレコードタイプとプロファイルに基づいてページレイアウトを割り当てるため、フィールドはその設定に従って自動的に表示されます。 * **コンパクト:** オブジェクトのコンパクトレイアウトを使用します。これはレコードの簡単な要約です。ハイライトパネルやサイドカラムに便利です。 * **カスタム:** ページレイアウトの代わりに、Custom Layout Builder で自分で作成したフィールド一覧を使用します。フィールドとその順序を選択できます。 カスタムレイアウトはページレイアウトを置き換えるため、既定ではページレイアウトの割り当てに従いません。配置した各フィールドは、レコードタイプに関係なく、そのオブジェクトのすべてのレコードに表示されます。カスタムレイアウトをレコードタイプ対応にするには、 **レコードタイプのレイアウトフィールドのみを表示** を下でオンにします。

カスタムレイアウトエディター

### **レコードタイプのレイアウトフィールドのみを表示** 必要です **レイアウト** に設定 **カスタム**. カスタムレイアウトを、レコードのレコードタイプに割り当てられたページレイアウトにも表示されるフィールドに制限します。配置したフィールドのうち、そのページレイアウトにないものは非表示になります。 これにより、1 つのカスタムレイアウトで複数のレコードタイプに対応できます。オブジェクトに必要なすべてのフィールドを配置すると、各レコードにはそのレコードタイプで使用されるものだけが表示されます。ページレイアウトに State がある米国のレコードタイプでは State が表示され、ページレイアウトに Province があるカナダのレコードタイプでは Province が表示されます。 オフのままにすると、レコードタイプに関係なく、配置したすべてのフィールドが表示されます。 **相互に排他的なフィールドは同じ行に配置します。** フィールドが非表示になると、その行の残りのフィールドは空き部分を埋めるために上へ移動しますが、フィールドが行をまたいで移動することはありません。そのため、レコードタイプごとの代替項目である State（米国）と Province（カナダ）は 1 行の中で並べて配置し、すべてのレコードタイプが完全な 1 行を持つようにします。別々の行に分けると、各レコードタイプには相手側のフィールドが入るはずの空白が残ります。 覚えておくべき点が 2 つあります: * Salesforce はページレイアウトをレコードタイプごとに **およびプロファイルごとに**割り当てるため、訪問者が見るフィールドは、その人のプロファイルへの割り当てに従います。これは管理者として Setup で見る内容とは異なる場合があります。 * レコードタイプのないレコードでは、コンポーネントはオブジェクトの既定のページレイアウトにフォールバックします。その場合に配置したすべてのフィールドを表示したいなら、この設定をオフにしてください。 ### **列数** レコードフィールドをコンポーネント全体でどのように配置するかを定義します。構造化された表形式のレイアウトには複数列を、すっきりした縦方向の表示には 1 列を選択します。 ### **密度** 読みやすさを最適化するために、コンポーネント内の要素間の間隔を制御します: * **ゆったり:** ゆとりのある間隔で、落ち着いた読書体験を提供します。 * **コンパクト:** より詰めた表示にするため、間隔を狭くします。 * **自動:** 画面サイズと使用可能なスペースに基づいて、間隔を自動的に調整します。 ### 追加設定 **API 名** コンポーネントを参照するために使用される一意の識別子です（3〜30 文字、英字、数字、アンダースコア、ダッシュ）。 **バリアント** コンポーネントの視覚スタイルを選択します。 編集が有効な場合、 **保存ボタンのラベル** および **キャンセルボタンのラベル** でレコードの保存ボタンとキャンセルボタンのテキストを設定します。 **フィールドレイアウト** は **列数** レスポンシブに拡張されます — コンテナサイズごとの列数を設定します（最小〜大）。 ## スタイル {% tabs %} {% tab title="サイズ" %} コンポーネントの寸法を制御します。 {% endtab %} {% tab title="マージン" %} コンポーネントの外側の余白を制御します。 {% endtab %} {% tab title="パディング" %} コンポーネントの内側の余白を制御します。 {% endtab %} {% endtabs %} ## ユースケース ### 例 1: アカウントのハイライトパネル {% @arcade/embed url="" flowId="4kdHqm6vhNkcnPUq42E7" %} 最も重要なアカウント情報を、見やすくすっきりしたハイライトパネルに表示することで、アカウントページに即座に視覚的なインパクトを与えます。この設定では、Account レコードから主要フィールドを直接取得し、チームが必要とする場所にコンパクトな形式で表示します。 *** #### **実現できること** * **アカウントの確認が高速化:** 完全なレコードを開かなくても、主要なアカウント詳細がすぐに確認できます * **一貫した表示:** 構造化されたハイライトパネルにより、すべてのアカウントページで統一された体験を提供します *** #### **始める前に** * **プロフィールカードコンポーネント:** 必要に応じて、ハイライトパネルを囲むコンテナとしてプロフィールカードコンポーネントを使用します *** **設定方法:** {% stepper %} {% step %} #### **アカウント一覧ページにコンポーネントを追加する** * Account list ページの Experience Builder に AX - Record Detail コンポーネントをドラッグします {% endstep %} {% step %} #### **データソースを設定する** * オブジェクト名を `Account` * レコード ID を `{!Item.Id}` * レイアウトを `コンパクト` {% endstep %} {% step %} #### **設定を確認する** * ページをプレビューして、ハイライトパネルに正しいアカウントフィールドが表示されていることを確認します {% endstep %} {% endstepper %} *** **リンク** *** ### 例 2: ケースに親アカウントの詳細を表示する {% @arcade/embed url="" flowId="vu4akvJvLUqRGJUTl8Bv" %} ケース対応中に、サービス担当者が即座にアカウントのコンテキストを把握できるようにし、タブを切り替えたり別の場所で情報を検索したりすることなく、すべての顧客対応をパーソナライズできるようにします。 *** #### **実現できること** * **Customer 360 ビュー:** 担当者はケース上で直接、関連するアカウント詳細を確認でき、顧客全体のコンテキストをひと目で把握できます * **ケース解決率の向上:** アカウント情報へのアクセスが速くなることで、担当者は背景情報を探すのではなく、問題解決に集中できます *** #### **始める前に** * **ケースオブジェクトページ:** Experience Builder で Case Object ページ、特に Case Detail ページを作成していることを確認してください *** #### **設定方法** {% stepper %} {% step %} #### **Case Detail ページにコンポーネントを追加する** * Case Detail ページの Experience Builder に AX - Record Detail コンポーネントをドラッグします {% endstep %} {% step %} #### **データソースを設定する** * オブジェクト名を `Account` * レコード ID を `{!Item.AccountId}` * レイアウトを `コンパクト` {% 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=&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.