# AX - データテーブル ## 概要 **AX - データテーブル** は、Experience Sites ページ（旧 Community Cloud）上のインタラクティブなテーブルに Salesforce レコードを表示する Experience Cloud コンポーネントです。 ポータルユーザーに対して、列、並べ替え、検索、ページネーションを完全に制御しながら、フィルタリングされたデータセットを表示するために使用します。標準またはカスタムオブジェクトからレコードを取得し、外部ユーザーが自分のアカウントまたはプロフィールに関連するデータを表示、検索、操作できるようにします。 注文履歴を表示するカスタマーポータル、共有レコードを表示するパートナーポータル、またはユーザーが自分のデータを検索・表示する必要があるセルフサービスサイトに最適です。 {% hint style="success" %} Avonni データテーブルは [リアクティブ データ コンポーネントです](/experience-cloud/experience-cloud-ja/hajimeni/riakutibukonpnento.md) {% endhint %} *** ## はじめに このシンプルなチュートリアルで、データテーブルコンポーネントの基本を学び、ユースケースの作成を始めましょう。 {% @arcade/embed flowId="oAo6XOMWRBc7Vn4Y9XNd" url="" %} *** ## チュートリアル
データテーブルにエクスポートボタンを作成する/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
データテーブルの設定/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Salesforce CMS ファイルをデータテーブルに表示する/pages/1cf1f1115c9dc542fcae7bfcfd73820a98f2bddb
*** ## データテーブルを Salesforce データに接続する ### データソース データソースセクションでは、Avonni データテーブルを Salesforce データに接続します。2 つのオプションがあります。
データソースタイプ説明ユースケース
手動データソースデータテーブルにデータを手動で入力します。動的でないデータ、テスト、デモに最適です。
クエリクエリを作成して、Salesforce データでテーブルを自動入力します。動的、リアルタイム、大規模データセットに適しています。
CMS コレクションCMS コレクションをデータテーブル内にシームレスに表示し、動的なコンテンツ更新を実現します。リソース一覧やニュースフィードを自動更新するように作成します。
{% hint style="info" %} クエリモードでは、最適なサイトパフォーマンスを維持するために、データは 25 レコード単位で表示されます。 {% endhint %} ### データマッピング設定 データマッピングセクションで列を定義・カスタマイズすることで、データテーブルを活用できます。
Avonni データテーブルとのデータモデル共有 **Salesforce のデータ共有ルールへの準拠:** * **組織設定の尊重:** Avonni コンポーネントは、Salesforce 組織に既存のデータ共有設定とアクセス設定に完全に準拠します。 * **干渉しないポリシー:** これらのコンポーネントは、事前に設定されたデータ共有ルールをいかなる形でも変更したり影響を与えたりしません。 * **制御された表示とアクセス:** Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって決まります。
#### 列の追加 * 「列を追加」ボタンをクリックして、データソースから表示したいフィールドをデータテーブルの列として選択します。
* このセクションでは、どのデータを表示するか、またそれをどのように整理するかを決定します。 * 列をクリックすると、その列固有のすべてのプロパティにアクセスできます。
#### 列プロパティの設定 * **データ型:** フィールドの表示タイプ（例: テキスト、数値、日付）を調整して、正しいデータ表現を確保します。 * **リンク化:** セルデータを他のレコードや URL にリンクできるようにし、素早く移動できるようにします。 * **セル属性:** セルの配置やアイコンをカスタマイズして、より直感的で視覚的に魅力的なテーブルを作成します。 * **編集可能:** 列をテーブル内で直接編集可能にするかどうかを決定します。 * **フィルタ可能・検索可能:** 効率的なデータ管理のために、列ごとのフィルタリングと検索を有効にします。 * **非表示:** 特定の列を非表示にすることを選択します。機密データや関連性の低いデータに便利です。 * **並べ替え可能:** ユーザーが指定した列でデータを並べ替えられるようにします。 * **デフォルトアクションを非表示:** よりすっきりした見た目にするため、事前設定されたアクションを非表示にします。 * **テキストを折り返す:** 狭い列でも読みやすくなるよう、テキストの折り返しを有効にします。 * **列幅を設定:** 各列の幅を指定して、バランスの取れた整然としたレイアウトを実現します。 #### 行アクションの追加 データテーブルに行アクションを追加するための、ガイド付きインタラクティブチュートリアルです。 {% @arcade/embed flowId="db617gnzKCL8QA22aziq" url="" %} *** ## その他の設定 ### 基本設定 **テーブルヘッダーを非表示** * このオプションを使うと、テーブルヘッダーを削除して、よりすっきりしたミニマルな見た目にできます。
**チェックボックス列を非表示** * この設定を有効にすると、チェックボックス列を非表示にできます。通常は複数アクションのシナリオで行選択に使われます。
**行番号列を表示** * 各行に番号を付ける列を表示します。データ参照を簡単にするのに役立ちます。 ### ヘッダー設定 **タイトルとキャプション** * タイトルとキャプションでヘッダーをカスタマイズし、テーブルデータに関する文脈や要約情報を提供します。 **アイコン名とサイズ** * アイコンの種類とサイズを選んでヘッダーを強調し、視覚的なアクセントを加えます。 **結合済み** * この設定では、ヘッダーがテーブル本体と視覚的に接続されるかどうかを決定し、全体のデザインに影響します。 **ヘッダーアクション** * テーブルヘッダーから直接アクセスできるアクション（追加、削除、カスタム関数）を設定します。
### ヘッダー上のアクションボタン * 新規レコードの追加、データのエクスポート、その他のカスタムアクションのためのアクションボタンをテーブルヘッダーに実装し、ユーザー操作性と効率を高めます。
#### ボタンの操作を設定する 「オン クリック」セクションで、ユーザーがヘッダーアクションボタンを押したときの操作を設定します。「移動」操作の動作について理解するには、 [こちらをクリック](/experience-cloud/experience-cloud-ja/puropatipaneru/intarakushon/yi-dong.md) してください。詳細はこちら。
#### チュートリアル {% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %} [Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) {% endcontent-ref %} ### ページネーション属性 * 1 ページあたりの項目数やページネーションスタイルなどのページネーション設定を構成して、大きなテーブルでのデータ表示と移動を管理します。 {% hint style="info" %} クエリモードでは、サイトのパフォーマンスを最適に保つため、データは 25 レコード単位で表示されます。そのため、ページネーションの設定は有益です。 {% endhint %}
### 検索エンジン設定 * **プレースホルダー:** 検索ボックスにプレースホルダーテキストを設定し、ユーザーが何を検索できるかを案内します。 * **位置:** 最適なアクセス性のために、テーブルレイアウト内で検索ボックスの位置を選択します。 * **デフォルト検索値:** 読み込み時にテーブルデータをフィルタリングする検索値をあらかじめ設定します。 {% hint style="info" %} 検索ボックスを表示するには、少なくとも 1 つの列を「検索可能」に設定する必要があります。 {% endhint %}

検索ボックスを表示するには、少なくとも 1 つの列を「検索可能」に設定する必要があります。

## 設定 {% tabs %} {% tab title="🎛️ 一般" %} | 名前 | 説明 | | --------------------- | ----------------------------- | | **テーブルヘッダーを非表示** | テーブルのヘッダーを非表示にする切り替え | | **チェックボックス列を非表示** | 行選択用チェックボックスに使われる列を削除する | | **行番号列を表示** | 行番号を表示する列 | | **行番号オフセット** | 行番号の開始番号を設定する | | **最大行選択数** | 選択できる行数の最大値を制限する | | **下部バーを抑制** | 通常、アクションや情報表示に使われる下部バーを非表示にする | | **選択アイテム数を表示** | 現在選択されているアイテム数を表示する | | **読み取り専用** | テーブルを操作不可にし、編集や選択を許可しない | | **すべての列を編集可能にする** | すべての列の編集を有効にする | | **すべての列でフィルタを許可** | すべての列でフィルタリングオプションを有効にする | | **すべての列で折り返しを許可** | すべての列でテキストの折り返しを許可する | | **デフォルトアクションを非表示** | 編集や削除などの既定アクションを非表示にする | | **列幅モード** | 列幅設定で「fixed」または「auto」を選択する | | **最大/最小列幅** | 列幅の最大値と最小値を設定する | | **テキスト折り返しの最大行数** | セル内のテキスト折り返しの最大行数を定義する | | **列のサイズ変更を無効化** | 列のサイズ変更機能を無効にする | | **サイズ変更ステップ** | 列サイズ変更時の増分を設定する | | **ソート済み/既定のソート方向** | 初期ソート方向として「asc」または「desc」を選択する | | **ソート対象の値を表示** | 現在どの列で並べ替えが行われているかを表示する | | **ヘッダータイトル/キャプション** | テーブルヘッダーのタイトルとキャプションを設定する | | **ヘッダーアイコン名/サイズ** | サイズをカスタマイズできるアイコンをヘッダーに追加する | | **ヘッダーが結合されている** | ヘッダーをテーブル本体と視覚的に接続する | | **ヘッダーアクションを非表示/無効化** | ヘッダーアクションの表示と操作性を制御する | | **表示するヘッダーアクションボタン** | ヘッダーに表示するアクションボタンを指定する | | **ヘッダーアクション** | テーブルヘッダーにカスタムアクションを追加する | | {% endtab %} | | {% tab title="⏩️ ページネーションと検索" %} ### ページネーション属性 | 名前 | 説明 | | ---------------- | ----------------------- | | **ページネーションを表示** | ページネーションコントロールの表示を切り替える | | **1 ページあたりの項目数** | 1 ページに表示する項目数を設定する | ### ピルコンテナオプション * 選択した項目用のコンテナを表示します。通常、行選択と一緒に使用されます。 ### 検索エンジンオプション | 名前 | 説明 | | ------------ | ---------------------- | | **プレースホルダー** | 検索入力のプレースホルダーテキストを設定する | | **位置** | 検索バーの位置を定義する | | **デフォルト検索値** | 検索バーに既定値をあらかじめ入力する | | {% endtab %} | | {% tab title="🗄️ フィルタリングとデータソース" %} | 名前 | 説明 | | ---------------- | --------------------------------------- | | **フィルタリングオプション** | 各列のポップオーバーとして表示されるフィルタリングを設定します。 | | **データソース** | テーブルデータの入力方法として「manual」と「query」から選択します。 | | **列** | データテーブルに列を定義・追加し、各列のプロパティと動作をカスタマイズします。 | | {% endtab %} | | {% tab title="🎨 スタイリング" %} ### ヘッダー | 名前 | 説明 | | ----------------- | ---------------------------------------- | | **背景色** | ヘッダーの背景色を設定します。 | | **枠線色** | ヘッダーの枠線の色を定義します。 | | **枠線サイズ** | 枠線の太さを調整します。 | | **枠線スタイル** | 枠線のスタイル（solid、dotted、dashed など）を選択します。 | | **角丸** | ヘッダーの角を丸くします。 | | **下枠線色（結合済み）** | ヘッダーがテーブル本体と視覚的に結合されている場合の下枠線の色を指定します。 | | **下枠線サイズ（結合済み）** | 結合された下枠線の太さを決定します。 | | **下枠線スタイル（結合済み）** | 結合された下枠線のスタイルを設定します。 | | **パディングとマージン** | ヘッダーの内側の余白（padding）と外側の余白（margin）を制御します。 | ### ヘッダータイトル | 名前 | 説明 | | ------------ | ------------------------------ | | **色** | タイトルテキストの色を設定します。 | | **フォントサイズ** | タイトルテキストのサイズを調整します。 | | **フォントの太さ** | タイトルテキストの太さを変更します。 | | **フォントスタイル** | タイトルテキストに特定のスタイル（斜体、通常）を適用します。 | ### ヘッダーキャプション | 名前 | 説明 | | ------------ | ---------------------- | | **色** | キャプションテキストの色を定義します。 | | **フォントサイズ** | キャプションテキストのサイズを調整します。 | | **フォントの太さ** | キャプションテキストの太さを制御します。 | | **フォントスタイル** | キャプションテキストのスタイルを設定します。 | ### ヘッダーアイコン | 名前 | 説明 | | -------------- | ------------------------------ | | **背景色** | アイコンの背景色を設定します。 | | **前景色** | アイコン自体の色を変更します。 | | **前景色ユーティリティ** | コントラストや強調のためのユーティリティカラーを調整します。 | | **角丸** | アイコンの角を丸くして、より柔らかい印象にします。 | ### ピルコンテナ | 名前 | 説明 | | -------------- | ---------------------------- | | **ピルの背景色/ホバー** | ピル要素の背景色を設定し、ホバー時には別の色にします。 | | **ピル文字色/ホバー** | ピル内のテキスト色を変更し、ホバー時には別の色にします。 | | **ピルの行の高さ** | テキストの配置のために、ピル内の行の高さを調整します。 | ### アバター | 名前 | 説明 | | ---------------------- | ---------------------------------------------------------------------------------------- | | **アバター画像の object-fit** | アバター画像をコンテナ内にどのように収めるかを決定します。オプションには 'fill'、'contain'、'cover'、'none'、'scale-down' があります。 | ### ページネーションボタン | 名前 | 説明 | | ---------- | ----------------------------------------- | | **スタイル設定** | 色、サイズ、枠線プロパティなど、ページネーションボタンの外観をカスタマイズします。 | ### フッター | 名前 | 説明 | | ------------- | ---------------- | | **背景色** | フッターの背景色を設定します。 | | **枠線色** | フッターの枠線の色を定義します。 | | **枠線サイズ** | 枠線の太さを調整します。 | | **枠線スタイル** | 枠線のスタイルを選択します。 | | **角丸** | フッターの角を丸くします。 | | {% endtab %} | | | {% endtabs %} | | ## ユースケース例 ### 例 1 : 拡張されたアカウント一覧と関連コンタクト {% @arcade/embed flowId="sxcJn4NliMFN6qTRk5Mi" url="" %} インライン検索、フィルタリング、ナビゲーションに合わせて更新されるライブのコンタクトパネルを使って、パートナーがアカウントデータを強力かつ直感的に探索できるようにします。 *** #### **実現できること** * **検索・フィルタ可能なアカウント一覧:** 組み込みの検索とフィルタコントロールを使って、パートナーが名前や業界でアカウントをすばやく見つけられるようにします。 * **インラインリンク付きレコード:** アカウント名をクリック可能にして、パートナーがレコード詳細ページへ直接移動できるようにします。 * **ライブの関連コンタクトパネル:** 選択されたアカウントに紐づくコンタクトを自動更新して表示する、2 つ目のテーブルを表示します。 * **ページ分割された結果:** ページごとの表示レコード数を制限して、インターフェースをすっきり保ち、パフォーマンスを維持します。 *** #### **始める前に** * **2 列レイアウトのページ:** Experience Builder のアカウント一覧ページに、両方のコンポーネントを配置できる 2 列レイアウトがすでに用意されていることを確認してください。 *** #### **設定方法** {% stepper %} {% step %} #### **最初の AX - Datatable をページに追加する** * AX - Datatable コンポーネントを Experience Builder のアカウント一覧ページの左列にドラッグします。 {% endstep %} {% step %} #### **データソースを選択する** * 選択 **Query Accounts** をこのコンポーネントのデータソースとして使用します。 {% endstep %} {% step %} #### **データマッピングを設定する** * 次の列を追加します: Name、Industry、Owner.FullName、Phone。 * 有効にする **Linkify** を Name 列で有効にして、アカウント名をクリック可能なリンクにします。 * 設定する **Industry** をフィルターフィールドとして * 設定する **名前** 検索フィールドとして。 {% endstep %} {% step %} #### **コンポーネントを設定する** * 次を設定します **API 名** を `AccountsTable`. * 設定する **最大行選択数** を `1` にして、同時に選択できるアカウントを 1 件のみにします。 * ページネーションを有効にして、 **最大レコード数** を `10`. {% endstep %} {% step %} #### **ヘッダーをカスタマイズする** * 次を設定します **ヘッダータイトル** を `Accounts`. * 次を設定します **ヘッダーアイコン** を `standard:account_info`. {% endstep %} {% step %} #### **2 つ目の AX - Datatable をページに追加する** * 同じページの右列に、2 つ目の AX - Datatable コンポーネントをドラッグします。 {% endstep %} {% step %} #### **コンタクトテーブルのデータソースを選択する** * 選択 **Query Contacts** をデータソースとして使用します。 * 次のようにフィルタを追加します **AccountId** が `{{AccountsTable.selectedRecord.Id}}`に等しいようにして、このテーブルの結果を現在選択されているアカウントに紐づけます。 {% endstep %} {% step %} #### **データマッピングを設定する** * 次の列を追加します: Name と Title。 {% endstep %} {% step %} #### **コンポーネントを設定する** * 次を設定します **API 名** を `relatedContactsTable`. {% endstep %} {% step %} #### **ヘッダーをカスタマイズする** * 次を設定します **ヘッダータイトル** を `関連コンタクト`. * 次を設定します **ヘッダーアイコン** を `standard:contact`. {% endstep %} {% step %} #### **ページをプレビューする** * Experience Builder でプレビューをクリックし、アカウント行を選択して、関連コンタクトテーブルが選択したレコードに応じて動的に更新されることを確認します。 {% endstep %} {% endstepper %} *** #### **リンク** {% content-ref url="/pages/4bf5a4b8c092ce6f9765b58cfa7449cf2e6a1daa" %} [リンクされたデータテーブル](/experience-cloud/experience-cloud-ja/chtoriaru/riakutibukonpnento/rinkusaretadtatburu.md) {% endcontent-ref %} *** ### 例 2 : アカウントページ上の関連商談 {% @arcade/embed flowId="tZa89LmaWt8n5CoQhwB8" url="" %} レコードページを離れることなく、アカウントに紐づくすべての商談を一目で確認できるように、営業ユーザーに提供します。 *** #### **実現できること** * **より豊かなカスタマー 360 ビュー:** 主要な商談データをアカウントページに直接表示し、営業ユーザーが 1 か所で全体像を把握できるようにします。 * **完全に積み上げられたレコードページ:** タブやオブジェクト間を移動する必要をなくし、パイプライン業務に必要な情報が詰まった濃い内容のページを作成します。 *** #### **始める前に** * **既存コンポーネントを含むアカウントレコードページ:** Experience Builder のアカウントレコードページに、レコード詳細、バナー、および新しいコンポーネントを配置できる列レイアウトがすでに含まれていることを確認してください。 *** #### **設定方法** {% stepper %} {% step %} #### **アカウントページに AX - Datatable を追加する** * AX - Datatable コンポーネントを Experience Builder のアカウントレコードページにドラッグします。 {% endstep %} {% step %} #### **データソースを選択する** * 選択 **Query Opportunities** をこのコンポーネントのデータソースとして使用します。 {% endstep %} {% step %} #### **データマッピングを設定する** * 次の列を追加します: Name、Stage、Amount。 * 有効にする **Linkify** Name 列で、商談名をクリック可能なリンクにします。 {% endstep %} {% step %} #### **コンポーネントを設定する** * 次を設定します **API 名** を `RelatedOpportunities`. * 次のようにフィルタを追加します **AccountId** が `{!Item.id}`として、結果を現在表示しているアカウントに限定します。 {% endstep %} {% step %} #### **ヘッダーをカスタマイズする** * 次を設定します **ヘッダータイトル** を `商談`. * 次を設定します **ヘッダースタイル** を `見出し 2`. * 次を設定します **ヘッダーアイコン** を `standard:opportunity`. {% endstep %} {% step %} #### **ページをプレビューする** * Experience Builder でプレビューをクリックして Account レコードへ移動し、そのアカウントに関連する商談のみがテーブルに表示されることを確認します。 {% endstep %} {% endstepper %} --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dtatburu.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.