AX - データテーブル

概要

AX - データテーブル は、Experience Sites ページ（旧 Community Cloud）上のインタラクティブなテーブルに Salesforce レコードを表示する Experience Cloud コンポーネントです。

ポータルユーザーに対して、列、並べ替え、検索、ページネーションを完全に制御しながら、フィルタリングされたデータセットを表示するために使用します。標準またはカスタムオブジェクトからレコードを取得し、外部ユーザーが自分のアカウントまたはプロフィールに関連するデータを表示、検索、操作できるようにします。

注文履歴を表示するカスタマーポータル、共有レコードを表示するパートナーポータル、またはユーザーが自分のデータを検索・表示する必要があるセルフサービスサイトに最適です。

Avonni データテーブルは リアクティブ データ コンポーネントです

---

はじめに

このシンプルなチュートリアルで、データテーブルコンポーネントの基本を学び、ユースケースの作成を始めましょう。

---

チュートリアル

データテーブルにエクスポートボタンを作成する

データテーブルの設定

Salesforce CMS ファイルをデータテーブルに表示する

---

データテーブルを Salesforce データに接続する

データソース

データソースセクションでは、Avonni データテーブルを Salesforce データに接続します。2 つのオプションがあります。

データソースタイプ	説明	ユースケース
手動データソース	データテーブルにデータを手動で入力します。	動的でないデータ、テスト、デモに最適です。
クエリ	クエリを作成して、Salesforce データでテーブルを自動入力します。	動的、リアルタイム、大規模データセットに適しています。
CMS コレクション	CMS コレクションをデータテーブル内にシームレスに表示し、動的なコンテンツ更新を実現します。	リソース一覧やニュースフィードを自動更新するように作成します。

クエリモードでは、最適なサイトパフォーマンスを維持するために、データは 25 レコード単位で表示されます。

データマッピング設定

データマッピングセクションで列を定義・カスタマイズすることで、データテーブルを活用できます。

Avonni データテーブルとのデータモデル共有

Salesforce のデータ共有ルールへの準拠:

• 組織設定の尊重: Avonni コンポーネントは、Salesforce 組織に既存のデータ共有設定とアクセス設定に完全に準拠します。

• 干渉しないポリシー: これらのコンポーネントは、事前に設定されたデータ共有ルールをいかなる形でも変更したり影響を与えたりしません。

• 制御された表示とアクセス: Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって決まります。

列の追加

• 「列を追加」ボタンをクリックして、データソースから表示したいフィールドをデータテーブルの列として選択します。

• このセクションでは、どのデータを表示するか、またそれをどのように整理するかを決定します。

• 列をクリックすると、その列固有のすべてのプロパティにアクセスできます。

列プロパティの設定

• データ型: フィールドの表示タイプ（例: テキスト、数値、日付）を調整して、正しいデータ表現を確保します。

• リンク化: セルデータを他のレコードや URL にリンクできるようにし、素早く移動できるようにします。

• セル属性: セルの配置やアイコンをカスタマイズして、より直感的で視覚的に魅力的なテーブルを作成します。

• 編集可能: 列をテーブル内で直接編集可能にするかどうかを決定します。

• フィルタ可能・検索可能: 効率的なデータ管理のために、列ごとのフィルタリングと検索を有効にします。

• 非表示: 特定の列を非表示にすることを選択します。機密データや関連性の低いデータに便利です。

• 並べ替え可能: ユーザーが指定した列でデータを並べ替えられるようにします。

• デフォルトアクションを非表示: よりすっきりした見た目にするため、事前設定されたアクションを非表示にします。

• テキストを折り返す: 狭い列でも読みやすくなるよう、テキストの折り返しを有効にします。

• 列幅を設定: 各列の幅を指定して、バランスの取れた整然としたレイアウトを実現します。

行アクションの追加

データテーブルに行アクションを追加するための、ガイド付きインタラクティブチュートリアルです。

---

その他の設定

基本設定

テーブルヘッダーを非表示

• このオプションを使うと、テーブルヘッダーを削除して、よりすっきりしたミニマルな見た目にできます。

チェックボックス列を非表示

• この設定を有効にすると、チェックボックス列を非表示にできます。通常は複数アクションのシナリオで行選択に使われます。

行番号列を表示

• 各行に番号を付ける列を表示します。データ参照を簡単にするのに役立ちます。

ヘッダー設定

タイトルとキャプション

• タイトルとキャプションでヘッダーをカスタマイズし、テーブルデータに関する文脈や要約情報を提供します。

アイコン名とサイズ

• アイコンの種類とサイズを選んでヘッダーを強調し、視覚的なアクセントを加えます。

結合済み

• この設定では、ヘッダーがテーブル本体と視覚的に接続されるかどうかを決定し、全体のデザインに影響します。

ヘッダーアクション

• テーブルヘッダーから直接アクセスできるアクション（追加、削除、カスタム関数）を設定します。

ヘッダー上のアクションボタン

• 新規レコードの追加、データのエクスポート、その他のカスタムアクションのためのアクションボタンをテーブルヘッダーに実装し、ユーザー操作性と効率を高めます。

ボタンの操作を設定する

「オン クリック」セクションで、ユーザーがヘッダーアクションボタンを押したときの操作を設定します。「移動」操作の動作について理解するには、 こちらをクリック してください。詳細はこちら。

チュートリアル

Create an Export To button on the Data Table

ページネーション属性

• 1 ページあたりの項目数やページネーションスタイルなどのページネーション設定を構成して、大きなテーブルでのデータ表示と移動を管理します。

クエリモードでは、サイトのパフォーマンスを最適に保つため、データは 25 レコード単位で表示されます。そのため、ページネーションの設定は有益です。

検索エンジン設定

• プレースホルダー: 検索ボックスにプレースホルダーテキストを設定し、ユーザーが何を検索できるかを案内します。

• 位置: 最適なアクセス性のために、テーブルレイアウト内で検索ボックスの位置を選択します。

• デフォルト検索値: 読み込み時にテーブルデータをフィルタリングする検索値をあらかじめ設定します。

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

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

設定

🎛️ 一般

名前	説明
テーブルヘッダーを非表示	テーブルのヘッダーを非表示にする切り替え
チェックボックス列を非表示	行選択用チェックボックスに使われる列を削除する
行番号列を表示	行番号を表示する列
行番号オフセット	行番号の開始番号を設定する
最大行選択数	選択できる行数の最大値を制限する
下部バーを抑制	通常、アクションや情報表示に使われる下部バーを非表示にする
選択アイテム数を表示	現在選択されているアイテム数を表示する
読み取り専用	テーブルを操作不可にし、編集や選択を許可しない
すべての列を編集可能にする	すべての列の編集を有効にする
すべての列でフィルタを許可	すべての列でフィルタリングオプションを有効にする
すべての列で折り返しを許可	すべての列でテキストの折り返しを許可する
デフォルトアクションを非表示	編集や削除などの既定アクションを非表示にする
列幅モード	列幅設定で「fixed」または「auto」を選択する
最大/最小列幅	列幅の最大値と最小値を設定する
テキスト折り返しの最大行数	セル内のテキスト折り返しの最大行数を定義する
列のサイズ変更を無効化	列のサイズ変更機能を無効にする
サイズ変更ステップ	列サイズ変更時の増分を設定する
ソート済み/既定のソート方向	初期ソート方向として「asc」または「desc」を選択する
ソート対象の値を表示	現在どの列で並べ替えが行われているかを表示する
ヘッダータイトル/キャプション	テーブルヘッダーのタイトルとキャプションを設定する
ヘッダーアイコン名/サイズ	サイズをカスタマイズできるアイコンをヘッダーに追加する
ヘッダーが結合されている	ヘッダーをテーブル本体と視覚的に接続する
ヘッダーアクションを非表示/無効化	ヘッダーアクションの表示と操作性を制御する
表示するヘッダーアクションボタン	ヘッダーに表示するアクションボタンを指定する
ヘッダーアクション	テーブルヘッダーにカスタムアクションを追加する

⏩️ ページネーションと検索

🗄️ フィルタリングとデータソース

🎨 スタイリング

ユースケース例

例 1 : 拡張されたアカウント一覧と関連コンタクト

インライン検索、フィルタリング、ナビゲーションに合わせて更新されるライブのコンタクトパネルを使って、パートナーがアカウントデータを強力かつ直感的に探索できるようにします。

---

実現できること

• 検索・フィルタ可能なアカウント一覧: 組み込みの検索とフィルタコントロールを使って、パートナーが名前や業界でアカウントをすばやく見つけられるようにします。

• インラインリンク付きレコード: アカウント名をクリック可能にして、パートナーがレコード詳細ページへ直接移動できるようにします。

• ライブの関連コンタクトパネル: 選択されたアカウントに紐づくコンタクトを自動更新して表示する、2 つ目のテーブルを表示します。

• ページ分割された結果: ページごとの表示レコード数を制限して、インターフェースをすっきり保ち、パフォーマンスを維持します。

---

始める前に

• 2 列レイアウトのページ: Experience Builder のアカウント一覧ページに、両方のコンポーネントを配置できる 2 列レイアウトがすでに用意されていることを確認してください。

---

設定方法

1

最初の AX - Datatable をページに追加する

• AX - Datatable コンポーネントを Experience Builder のアカウント一覧ページの左列にドラッグします。

2

データソースを選択する

• 選択 Query Accounts をこのコンポーネントのデータソースとして使用します。

3

データマッピングを設定する

• 次の列を追加します: Name、Industry、Owner.FullName、Phone。

• 有効にする Linkify を Name 列で有効にして、アカウント名をクリック可能なリンクにします。

• 設定する Industry をフィルターフィールドとして

• 設定する 名前 検索フィールドとして。

4

コンポーネントを設定する

• 次を設定します API 名 を AccountsTable.

• 設定する 最大行選択数 を 1 にして、同時に選択できるアカウントを 1 件のみにします。

• ページネーションを有効にして、 最大レコード数 を 10.

5

ヘッダーをカスタマイズする

• 次を設定します ヘッダータイトル を Accounts.

• 次を設定します ヘッダーアイコン を standard:account_info.

6

2 つ目の AX - Datatable をページに追加する

• 同じページの右列に、2 つ目の AX - Datatable コンポーネントをドラッグします。

7

コンタクトテーブルのデータソースを選択する

• 選択 Query Contacts をデータソースとして使用します。

• 次のようにフィルタを追加します AccountId が {{AccountsTable.selectedRecord.Id}}に等しいようにして、このテーブルの結果を現在選択されているアカウントに紐づけます。

8

データマッピングを設定する

• 次の列を追加します: Name と Title。

9

コンポーネントを設定する

• 次を設定します API 名 を relatedContactsTable.

10

ヘッダーをカスタマイズする

• 次を設定します ヘッダータイトル を 関連コンタクト.

• 次を設定します ヘッダーアイコン を standard:contact.

11

ページをプレビューする

• Experience Builder でプレビューをクリックし、アカウント行を選択して、関連コンタクトテーブルが選択したレコードに応じて動的に更新されることを確認します。

---

リンク

連携データテーブル

---

例 2 : アカウントページ上の関連商談

レコードページを離れることなく、アカウントに紐づくすべての商談を一目で確認できるように、営業ユーザーに提供します。

---

実現できること

• より豊かなカスタマー 360 ビュー: 主要な商談データをアカウントページに直接表示し、営業ユーザーが 1 か所で全体像を把握できるようにします。

• 完全に積み上げられたレコードページ: タブやオブジェクト間を移動する必要をなくし、パイプライン業務に必要な情報が詰まった濃い内容のページを作成します。

---

始める前に

• 既存コンポーネントを含むアカウントレコードページ: Experience Builder のアカウントレコードページに、レコード詳細、バナー、および新しいコンポーネントを配置できる列レイアウトがすでに含まれていることを確認してください。

---

設定方法

1

アカウントページに AX - Datatable を追加する

• AX - Datatable コンポーネントを Experience Builder のアカウントレコードページにドラッグします。

2

データソースを選択する

• 選択 Query Opportunities をこのコンポーネントのデータソースとして使用します。

3

データマッピングを設定する

• 次の列を追加します: Name、Stage、Amount。

• 有効にする Linkify Name 列で、商談名をクリック可能なリンクにします。

4

コンポーネントを設定する

• 次を設定します API 名 を RelatedOpportunities.

• 次のようにフィルタを追加します AccountId が {!Item.id}として、結果を現在表示しているアカウントに限定します。

5

ヘッダーをカスタマイズする

• 次を設定します ヘッダータイトル を 商談.

• 次を設定します ヘッダースタイル を 見出し 2.

• 次を設定します ヘッダーアイコン を standard:opportunity.

6

ページをプレビューする

• Experience Builder でプレビューをクリックして Account レコードへ移動し、そのアカウントに関連する商談のみがテーブルに表示されることを確認します。