AX - データテーブル

概要

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

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

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

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

チュートリアル

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

データテーブルの設定

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

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

データソース

データソースセクションは Avonni Data Table を Salesforce データに接続する場所です。2 つのオプションがあります。

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

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

データマッピングの設定

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

Avonni Data Table とデータモデルの共有

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

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

• 干渉しない方針： これらのコンポーネントは、既存のデータ共有ルールをいかなる方法でも変更または影響を与えません。

• 制御された表示とアクセス： Avonni コンポーネントを介してレコードを表示および操作する能力は、組織で定義された共有設定とユーザ権限によって管理されます

列の追加

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

• このセクションでは、テーブルに表示されるデータとその整理方法を決定します。

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

列プロパティの設定

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

• リンク化： セル内のデータを他のレコードや URL にリンクさせて、迅速なナビゲーションを可能にします。

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

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

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

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

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

• デフォルトアクションを非表示： よりすっきりした外観のために、事前設定されたアクションを非表示にすることを選択します。

• テキストの折り返し： 狭い列でも読みやすくするためにテキストの折り返しを有効にします。

• 列幅の設定： バランスの取れた整理されたレイアウトのために各列の幅を指定します。

行アクションの追加

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

その他の設定

基本設定

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

• このオプションは、よりクリーンでミニマルな外観のためにテーブルヘッダーを削除できます。

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

• この設定を有効にすると、通常は複数行操作での行選択に使用されるチェックボックス列を非表示にします。

行番号列を表示

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

ヘッダー設定

タイトルとキャプション

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

アイコン名とサイズ

• 視覚的な強調のためにアイコンを追加し、その種類とサイズを選択します。

結合されているか

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

ヘッダーアクション

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

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

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

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

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

チュートリアル

Create an Export To button on the Data Table

ページネーション属性

• 1 ページあたりの項目数やページネーションのスタイルなど、データの表示およびナビゲーション方法を管理するページネーション設定を構成します。

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

検索エンジン設定

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

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

• デフォルト検索値： 読み込み時にテーブルデータをフィルタするための検索値を事前定義します。

検索ボックスを表示するには、少なくとも 1 列が「検索可能」にマークされている必要があります。

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

設定

🎛️ 全般

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

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

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

🎨 スタイリング