> 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-tree-grid.md). # AX - ツリーグリッド **AX - ツリーグリッド** は、Experience Sites ページ（旧 Community Cloud）上でツリー構造の階層データを表示する Experience Cloud コンポーネントで、行の展開・折りたたみと、任意の行選択に対応しています。 ## 概要 ツリーグリッドを使用すると、親子データ（アカウントと関連する取引先責任者、カテゴリとサブカテゴリ、または入れ子構造の任意のレコード）を 1 つのテーブルで表示できます。ユーザーは行を展開・折りたたみして階層を掘り下げます。各列はデータソースの項目にマップされ、行の選択、並べ替え、ページネーションが可能です。 データソースでは、 **クエリ** レベルは、異なる関連オブジェクトから取得するか、あるいは自分自身を参照する 1 つのオブジェクトから取得します。アカウント階層、レポート階層、カテゴリツリーなどです。 **モード** でのクエリはどれを使うかを決定し、 **階層** モードでは、指定したレコードを中心にツリーが構成されます。

3 レベルの入れ子構造で、すべての親行が展開されています。最初の列にはトグルアイコンが表示され、各レベルがインデントされます。

## 設定 Experience Builder でコンポーネントをページに追加し、右側のプロパティパネルから設定します。 ### データソース データソース セクションでは、ツリーグリッドをデータに接続します。利用可能なソースタイプは 2 つあります。 | データソースタイプ | 説明 | 使用例 | | --------- | ------------------------------------------- | --------------------- | | **手動** | 行とその列をビルダーで直接入力します。 | 動的でないデータ、テスト、デモに最適です。 | | **クエリ** | Salesforce オブジェクトの項目をテーブルの列にマップするクエリを作成します。 | 動的なリアルタイムデータに適しています。 | #### 階層の構築 * **クエリ:** で親オブジェクトを選択し **オブジェクト API 名**、次に **モード**クエリエディタの下部でレベルの構築方法を選びます: * **マルチレベル** （既定値）: それぞれの関連子オブジェクトを **子アイテム** に **アイテムを追加**します。クエリツリー内の各オブジェクトが展開可能な行の 1 レベルになり、ユーザーが展開すると親行がその子を読み込みます。 * **階層:** オブジェクトが自分自身を参照するルックアップをたどるため、各レベルは同じオブジェクトになります。 **親ルックアップ項目** で選択してください。リストにはそのオブジェクトの自己ルックアップのみが表示されます。さらに **現在のレコード ID** をコンポーネント設定で指定します。すると、そのレコードの最上位の祖先から下方向にツリーが構成され、現在のレコードにつながる枝が展開され、その行自体には **現在の** バッジが付与されます。クエリのフィルターと **Order By** はすべてのレベルに適用され、階層は最大 50 レベルまでたどられます。どちらの設定も必要です。 **親ルックアップ項目** がない場合、コンポーネントは階層モードには親ルックアップ項目とレコード ID が必要であると表示し、Experience Builder のプレビューでも **現在のレコード ID** が空のときは同じメッセージが表示されます。実ページでは、 **現在のレコード ID** が空であるか、クエリが到達できないレコードを指していると、グリッドには **結果なしメッセージ** の空状態が表示されます。 * **手動:** 列を定義し（各列に **ラベル** と **名前**タイプ **キー項目** を選んで各行を一意に識別し、 **データ** の下に行を入力して、行の下に子行を追加し、入れ子構造を作成します。

Account のクエリデータソースに Contact を子レベルとして追加し、各オブジェクトから 1 列ずつマップした例です。

### データマッピング ある **クエリ** ソースでは、テーブルの列を **データマッピング**で定義します。各列は次のいずれかです。 **オブジェクト項目**。階層内の 1 つのオブジェクトの項目を表示します（ **オブジェクト API 名**を設定し、次にその **ソース項目**を設定します）。または **カスタム**、背後に項目を持たない列（ **名前**で識別されます）。各列では次を設定できます: * **ソース項目:** 列がバインドされる項目です。 * **ラベル:** 列ヘッダーに表示されるテキストです。 **カスタムラベル** を有効にして、項目自体のラベルを上書きします。 * **種類:** 値の書式設定と編集方法（`テキスト` が既定）。テキスト、数値、通貨、日付、パーセント、メール、電話、URL、バッジ、アバター、進捗バー、評価、リッチテキストなど 30 種類以上があり、選択したタイプに応じた属性があります。 **アクション**, **ボタン** と **ボタン-アイコン** は行アクションを追加します（以下参照）。 * **アイコン名:** 列用のアイコンです。 * **並べ替え可能:** ユーザーがこの列でテーブルを並べ替えられるかどうかです。 * **テキストの折り返し:** 長いセルテキストを切り捨てずに折り返すかどうかです。通貨、日付、メール、場所、数値、パーセント、電話、テキスト、時刻、URL タイプで利用できます。 * **非表示:** 列を表示から隠すかどうかです。 * **初期幅** （詳細設定）: 列の初期幅です。 * **セル属性:** コンテンツの配置と、任意のセルアイコンおよびその位置です。一部のタイプでのみ利用できます。 * **アクション:** 列ヘッダーのドロップダウンメニューへの独自のエントリです。各アクションには **ラベル**、 **名前**、 **アイコン名**、および任意の **チェック済み** と **無効** 状態があり、独自の **クリック時** インタラクションを持ちます。 ある **手動** ソースの列は、 **ラベル**、 **名前** 同じ列ヘッダーを持ち、 **アクション**値をテキストとして表示します。 最初の列は常にツリー列です。設定したタイプにかかわらず、展開アイコンと各行のラベルを表示します。 #### 行アクション タイプが **アクション**, **ボタン** または **ボタン-アイコン** には独自の **クリック時** インタラクションがあり、クリックした行を `{{Record.}}`として利用できる状態で実行されます。レコードを開いたり、フローを起動したり、行から他のインタラクションを実行したりできます。 ### 一般 **API 名** は、コンポーネントを参照するために使う一意の識別子です（3〜30 文字。英字、数字、アンダースコア、ダッシュを使用できます）。 **現在のレコード ID** は、ツリーが **階層** モードで中心とするレコードの ID です。ツリーにはそのレコードの祖先と子孫が表示され、行には **現在の** バッジが付与されます。レコードページでは、 `{!recordId}` 式を設定して、ユーザーが表示しているレコードにツリーを追従させます。 **マルチレベル** モードでは効果はありません。 **テーブルヘッダーを非表示** はテーブルのヘッダー行を削除し、 **チェックボックス列を非表示** は行選択に使う列を削除します。 **選択したアイテム数を表示** は、行が選択されている間、ヘッダーに「N 件のアイテムが選択されています」と表示します。行が選択されると、ヘッダーには **選択をクリア** リンクも表示されます。 **行番号列を表示** は、各行に番号を付ける列を追加し、 **行番号オフセット** でその番号付けをずらします。1 行目はオフセット + 1 を表示します（既定は 0 なので、番号は 1 から始まります）。 ### ヘッダー **ヘッダータイトル** と **ヘッダーキャプション** テーブルの上にタイトルと補助キャプションを追加します; **ヘッダータイトルのテキストスタイル** と **ヘッダーキャプションのテキストスタイル** それぞれのテキストスタイル（見出しまたは段落スタイル）を設定します。 **ヘッダーアイコン名** タイトルの横にアイコンを追加し、 **ヘッダーアイコンサイズ** そのサイズを設定します（**XXS**, **XS**, **小**, **中** が既定、または **大**). **ヘッダーを結合** にすると、ヘッダーの下部の角丸と影がなくなり、下のテーブルとぴったり揃います。

キャプション、タイトル、アイコン、2 つのヘッダーアクションを備えたヘッダーに、行番号列とカスタムのトグルアイコン（開いている行は utility:dash、閉じている行は utility:add）を加えたものです。

### 列幅 **列幅モード** を選択します **固定** または **自動** 列幅。 **最大列幅** （既定は 1000 px）と **最小列幅** （既定は 50 px）が幅の上限と下限を設定し、 **列のサイズ変更を無効化** で手動による列幅変更をオフにします。 ### 行トグルアイコン 行を展開・折りたたみするために使うアイコンを設定します: **開くアイコン名** は、行が開いているときに表示されます（`utility:chevrondown` が既定）と **閉じるアイコン名** 、閉じているときに表示されます（`utility:chevronright` が既定）。どちらも Lightning Design System のアイコン名を指定できます。 ### ヘッダーアクション テーブルヘッダーに表示されるアクションボタンを設定します。各アクションには **ラベル**、 **名前**、 **アイコン名**、ホバー時の **タイトル**、および **代替テキスト** （詳細設定）があります。各ボタンが実行する内容は、その **クリック時** セクションで設定します: トーストを表示、移動、ダウンロード、アラートモーダルを開く、確認ダイアログを開く、フローダイアログを開く、フローを実行、すべてのクエリを更新、またはクエリを更新。ほとんどには、Interactions 配下に独自のページがあり、たとえば [移動](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md). **表示するアクションボタン数** は、表示するアクションボタンの数を設定し、残りはメニューに折りたたみます。 これらはテーブル独自のヘッダーボタンです。個々の列ヘッダーのドロップダウンメニューは別途、その列の **アクション** 設定で [データマッピング](#data-mapping). ### ページネーション **追加行数** （既定 100、1〜500）で、 **クエリ** ソースの場合、ユーザーがレベルの終わりに到達するたびに読み込む追加行数を設定します。追加行の読み込みは Experience Builder のプレビューでは有効ではありません。 ### 並べ替え **既定の並べ替え方向** は方向（**昇順** または **降順**）を設定します。これは列が最初に並べ替えられるときに適用されます。 ### 結果なしメッセージ **結果なしメッセージ** データソースが行を返さない場合、既定の空状態を独自のテキストに置き換えます。 **結果なしメッセージ属性** その空状態に何を表示するかを制御します: **結果なし画像を非表示** イラストを削除し、 **結果なしメッセージを非表示** テキストを削除します。どちらも既定ではオフです。 ## スタイル {% tabs %} {% tab title="マージン" %} コンポーネント周囲の外側の余白を制御します。 {% endtab %} {% tab title="パディング" %} コンポーネント内側の余白を制御します。 {% endtab %} {% tab title="サイズ" %} コンポーネントの寸法を制御します。 {% endtab %} {% tab title="境界線" %} ツリーグリッドの周囲の枠線を制御します（色 / サイズ / スタイル / 角丸）。 {% endtab %} {% tab title="ヘッダー" %} ヘッダーの背景色、内部パディング、下部の余白を設定します。 {% endtab %} {% tab title="ヘッダーボーダー" %} ヘッダーの枠線の色、サイズ、スタイル、角丸を設定し、 **ヘッダーを結合** がオンのときに使われる下側の枠線も設定します。 {% endtab %} {% tab title="ヘッダータイトル" %} ヘッダータイトルの色、フォントサイズ、フォント太さ、フォントスタイルを設定します。 {% endtab %} {% tab title="ヘッダーキャプション" %} ヘッダーキャプションの色、フォントサイズ、フォント太さ、フォントスタイルを設定します。 {% endtab %} {% tab title="Flow ダイアログ & パネル" %} 次によって開かれるダイアログまたはサイドパネルのスタイルを設定します: **フローダイアログを開く** または **Open Flow Panel** インタラクションは 4 つのグループに分かれます: **フローダイアログヘッダー**, **フローダイアログフッター**, **フローパネル** と **フローパネルヘッダー**. {% endtab %} {% endtabs %} --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-tree-grid.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.