AX - データテーブル

概要

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

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

注文履歴を表示する顧客ポータル、注文履歴を表示するパートナーポータル、共有レコードを表示するパートナーポータル、またはユーザーが自分自身のデータを見つけて表示する必要があるセルフサービスサイトに最適です。

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

---

はじめに

このシンプルなチュートリアルで Data Table コンポーネントの基本を学び、ユースケースの構築を始めましょう。

---

チュートリアル

Data Table に Export To ボタンを作成する

Data Table の設定

Data Table で Salesforce CMS ファイルを表示する

---

Data Table を Salesforce データに接続する

データソース

Data Source セクションでは、Avonni Data Table を Salesforce データに接続します。2 つの選択肢があります。

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

Query モードでは、サイトのパフォーマンスを最適に保つため、データは 25 件のレコード単位で表示されます。

データマッピングの設定

データマッピングセクションで列を定義し、カスタマイズすることで、データテーブルに命を吹き込みます。

Avonni Data Table によるデータモデルの共有

Salesforce のデータ共有ルールの遵守:

• 組織設定の尊重: Avonni コンポーネントは、Salesforce 組織の既存のデータ共有設定とアクセス設定に完全に準拠しています。
• 干渉しない方針: これらのコンポーネントは、あらかじめ設定されたデータ共有ルールをいかなる形でも変更または影響しません。
• 制御された表示とアクセス: Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって管理されます

列の追加

• ［列の追加］ボタンをクリックして、データソースから表示するフィールドを列として選択します。

• このセクションでは、どのデータを表示するか、またテーブル内でどのように整理するかを決定します。
• 列をクリックすると、その列固有のすべてのプロパティにアクセスできます。

列プロパティの設定

• データ型: 正しいデータ表現を確保するために、フィールドの表示形式（例: テキスト、数値、日付）を調整します。
• リンク化: セルのデータを他のレコードや URL にリンクして、すばやく移動できるようにします。
• セル属性: セルの配置やアイコンをカスタマイズして、より直感的で見た目の良いテーブルを作成します。
• 編集可能: 列をテーブル内で直接編集可能にするかどうかを決定します。
• フィルタリング・検索可能: 効率的なデータ管理のために、列ごとのフィルタリングと検索を有効にします。
• 非表示： 特定の列を非表示にすることを選択できます。機密データや関連性の低いデータに便利です。
• 並べ替え可能: ユーザーが指定した列でデータを並べ替えられるようにします。
• デフォルトアクションを非表示: よりすっきりした見た目のために、あらかじめ設定されたアクションを非表示にすることを選べます。
• テキストを折り返す: 狭い列でも読みやすくなるように、テキストの折り返しを有効にします。
• 列幅の設定: 各列の幅を指定して、バランスの取れた整理されたレイアウトにします。

行アクションの追加

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

---

その他の設定

基本設定

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

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

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

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

行番号列を表示

• これを有効にすると、各行に番号を付ける列が表示され、データ参照がしやすくなります。

ヘッダーの設定

タイトルとキャプション

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

アイコン名とサイズ

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

連結する

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

ヘッダーアクション

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

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

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

ボタンのインタラクションを設定する

［On Click］セクションで、ユーザーがヘッダーのアクションボタンを押したときのインタラクションを設定します。［Navigate］インタラクションの動作について理解するには、 ここをクリック して詳細をご覧ください。

チュートリアル

Create an Export To button on the Data Table

ページネーション属性

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

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

検索エンジンの設定

• プレースホルダー: 検索ボックスにプレースホルダーテキストを設定し、ユーザーが何を検索できるのかを示します。
• 位置: 最適なアクセス性のために、テーブルレイアウト内での検索ボックスの位置を選択します。
• デフォルトの検索値: 読み込み時にテーブルデータを絞り込むため、検索値をあらかじめ指定します。

検索ボックスを表示するには、少なくとも 1 つの列を［検索可能］としてマークする必要があります。

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

設定

🎛️ 一般

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

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

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

🎨 スタイリング

ユースケース例

例 1 : 取引先リストの強化と関連コンタクト

インライン検索、フィルタリング、ナビゲートに応じて更新されるライブコンタクトパネルを備え、パートナーが取引先データを強力かつ直感的に探索できるようにします。

---

達成できること

• 検索・フィルタリング可能な取引先リスト: 組み込みの検索・フィルターコントロールを使用して、パートナーが名前や業種で取引先をすばやく見つけられるようにします。
• インラインリンクされたレコード: 取引先名をクリック可能にし、パートナーがレコード詳細ページへ直接移動できるようにします。
• ライブ関連コンタクトパネル: 選択された取引先に紐づくコンタクトを表示するよう自動更新される 2 つ目のテーブルを表示します。
• ページネーションされた結果: 1 ページあたりの表示レコード数を制限して、インターフェースをすっきり保ち、パフォーマンスを維持します。

---

始める前に

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

---

設定方法

1

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

• AX - Datatable コンポーネントを Experience Builder の取引先リストページの左側の列へドラッグします。

2

データソースを選択する

• 選択 取引先をクエリ をこのコンポーネントのデータソースとして使用します。

3

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

• 次の列を追加します: Name、Industry、Owner.FullName、Phone。
• 有効化 リンク化 を Name 列で有効にして、取引先名をクリック可能なリンクにします。
• を 業界 フィルター項目として設定します。
• を 名前 検索項目として設定します。

4

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

• を API 名 に AccountsTable.
• を 最大行選択数 に 1 と設定して、同時に 1 件の取引先のみを選択できるようにします。
• ページネーションを有効にし、 最大レコード数 に 10.

5

ヘッダーをカスタマイズ

• を ヘッダーのタイトル に 取引先.
• を ヘッダーアイコン に standard:account_info.

6

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

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

7

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

• 選択 コンタクトをクエリ をデータソースとして。
• 次のようにフィルターを追加します AccountId 等しい {{AccountsTable.selectedRecord.Id}}。これにより、このテーブルの結果が、現在選択されている取引先に関連付けられます。

8

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

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

9

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

• を API 名 に relatedContactsTable.

10

ヘッダーをカスタマイズ

• を ヘッダーのタイトル に 関連コンタクト.
• を ヘッダーアイコン に standard:contact.

11

ページをプレビューする

• Experience Builder で［プレビュー］をクリックし、取引先の行を選択して、Related Contacts テーブルが選択されたレコードを反映して動的に更新されることを確認します。

---

リンク

リンクされたデータテーブル

---

例 2 : 取引先ページの関連商談

セールスユーザーが、必要な場所で、レコードページを離れることなく、取引先に紐づくすべての商談をひと目で確認できるようにします。

---

達成できること

• より充実した Customer 360 ビュー: 主要な商談データを取引先ページに直接表示し、セールスユーザーが一箇所で全体像を把握できるようにします。
• 完全に積み上げられたレコードページ: タブやオブジェクト間を行き来する必要をなくし、パイプライン作業に必要な情報が詰まった密度の高いページを構築します。

---

始める前に

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

---

設定方法

1

AX - Datatable を取引先ページに追加する

• AX - Datatable コンポーネントを Experience Builder の取引先レコードページへドラッグします。

2

データソースを選択する

• 選択 商談をクエリ をこのコンポーネントのデータソースとして使用します。

3

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

• 次の列を追加します: Name、Stage、Amount。
• 有効化 リンク化 を Name 列で有効にして、商談名をクリック可能なリンクにします。

4

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

• を API 名 に RelatedOpportunities.
• 次のようにフィルターを追加します AccountId 等しい {!Item.id}。これにより、結果は現在表示されている取引先にスコープされます。

5

ヘッダーをカスタマイズ

• を ヘッダーのタイトル に 商談.
• を ヘッダースタイル に 見出し 2.
• を ヘッダーアイコン に standard:opportunity.

6

ページをプレビューする

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