AX - リスト
概要
AX - リスト Experience Cloud コンポーネントで、Salesforce レコードを Experience Sites ページ上のグリッドまたはリスト形式のカスタマイズ可能なカードとして表示します。
ポータルユーザーの注文、ケース、契約、その他の関連データなど、フィルター済みのレコードセットを、各カードに表示するフィールドを完全に制御しながら表示するために使用します。ユーザーは検索、フィルター、結果のページ送り、カードのクリックによるレコードへの移動ができます。Experience Builder で標準オブジェクトまたはカスタムオブジェクトのいずれからでもデータを取得できます。
顧客の注文履歴、ケース一覧、ドキュメントライブラリ、製品カタログ、またはポータルユーザーが Salesforce レコードを閲覧・検索する必要があるあらゆる場面に最適です。
Avonni List は リアクティブデータコンポーネントです
設定
構成プロセス、特に Data Source と Mappings セクションを理解することは、List を効果的に使ううえで重要です。
データソース
Data Source セクションは、Avonni List を Salesforce データに接続する場所です。Data Source には 2 つのオプションがあります。
手動
リスト項目を手動で入力します。
動的でないデータ、テスト、デモに最適です。
クエリ
クエリを作成して、Salesforce データで List を自動入力します。
動的、リアルタイム、大規模データセットに適しています。
データマッピング
定義とカスタマイズを行うことで、Data Mappings セクションでリストに命を吹き込みます。
「Add Columns」ボタンをクリックして、List にラベルとして表示するフィールドを選択します。
その後、主データに加えて追加要素を組み込めます。これには、画像やアバターなどの視覚要素、あるいは各項目にさらに文脈や詳細を与える追加フィールドも含まれます。
項目区切り
Item Divider 機能は、項目間に区切り線を入れることでリストの視覚的な構造を強化するよう設計されています。この属性により、リスト内の各項目を他の項目とどのように区切るかをカスタマイズできます。
なし
デフォルト — 項目間に区切り線はありません。
上
リスト内の各項目の上部に区切り線を配置できます。
下
各リスト項目の下部に区切り線を追加します。
上下両方
リスト内の各項目の上下に区切り線を配置します。
カード
各リスト項目を、それぞれ独立したカード風コンテナ内に配置し、区切り線で区切ります。
バリアント
その バリアント リストのスタイルを設定します： 垂直 （デフォルト — 標準的な縦型リスト）、 水平 （項目を 1 行に並べる）、または チェックリスト （各項目にチェックボックスが付きます）。 クリック時にハイライト クリックした項目を視覚的に強調表示します。 項目数を表示 ヘッダーのタイトルの横に件数を表示し、 API 名 参照用の一意の識別子をコンポーネントに与えます。
ヘッダー
List ヘッダーを ヘッダータイトル と ヘッダーキャプション — それぞれに独自の テキストスタイル 設定（見出し 1 から 見出し 4, 段落 1 / 段落 2）— があり、 ヘッダーアイコン名 と ヘッダーアイコンサイズ, ヘッダーを結合 で設定すると、ヘッダーを下のコンテンツにぴったり合わせることができ、 ヘッダーアクション でヘッダーにアクションボタンを追加できます。
アバター
アバター属性 各項目に表示されるアバターをカスタマイズします — その バリアント (正方形 / 円形), サイズ, 位置, フォールバックアイコン名, 表示 インジケーターとその位置、およびイニシャルの自動書式設定。
チェックリスト
「 バリアント である チェックリスト, チェックリスト属性 を追加して チェック数を表示 （チェック済み/合計件数）と チェック時に取り消し線 （完了した項目に取り消し線を引きます）。
レイアウト
Avonni List コンポーネントの Layout Options 機能により、リスト内のデータの表示方法を定義できます。これは、データを整理する列数を 1 列から 12 列までの範囲で選択することで実現されます。
さらに、Avonni List コンポーネントは、コンテナの画面サイズに応じて列構成を指定できる高度なカスタマイズも提供します。この機能により、小、中、大の各画面で一貫した使いやすい表示を確保しながら、さまざまなデバイスに合わせてリストの外観を正確に調整できます。
フィールドレイアウト
Field Attributes セクションでは、各フィールドがコンテナ内で占める列数を定義でき、リスト内容のレイアウトと表示をきめ細かく制御できます。
variant を調整する
Avonni list コンポーネントの「variant」プロパティは、フィールド情報の表示方法の見た目を変更するために使用されます。以下は「variant」プロパティで使用できる値と、それぞれの独自のスタイルです。
標準：ラベルがフィールドの上に表示されるデフォルト設定です。ラベルとフィールド内容が明確に分かれた、定番で広く使われているレイアウトです。
ラベル非表示：ミニマルなデザインにしたい場合はこの variant を選択します。ラベルは表示されず、よりすっきりした見た目になります。コンテキストやプレースホルダーテキストでフィールドの目的が明らかなフォームや、スペースが限られている場合に最適です。
ラベルを横並び：この variant では、ラベルはフィールドと同じ行に配置され、通常は左側に表示されます。横方向のスペースが縦方向のスペースより十分にあるフォームに適した、スペース効率の高いレイアウトです。よりコンパクトなフォームデザインにしたい場合にも便利です。
ラベルを縦並び：この variant では、ラベルがフィールドの真上に配置されます。フィールドにフォーカスが当たるか入力されると、ラベルは上に移動します。モバイルインターフェースや Web アプリケーションでよく使われる現代的なデザインで、縦方向のスペースを節約しつつ、すっきりした整然とした見た目を維持するのに役立ちます。
画像
画像は任意の項目に追加できます。Image Attributes セクションでは、その位置、サイズ、クロップのフィット、フォールバックソースをカスタマイズできます。
フィルター
その フィルターメニュー属性 セクションではフィルターメニューを追加できます。この機能を有効にすると、フィルターとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストがすっきりして見やすく保たれます。
ページネーション
その ページネーション属性 領域では、Avonni List コンポーネント内の長いリストをより小さな部分に分割できます。 ページネーションを表示 をオンにしてコントロールを表示し、 1 ページあたりの項目数 （1 〜 200）を設定し、その 配置 (左, 中央 または 右）を選択し、 先頭, 前へ, 次へ と 最後 ボタンのラベルやアイコンを変更できます。これにより、大規模なリストを扱いやすくなります。
検索
「Search Fields」属性を使用して、List コンポーネント内のどのフィールドを検索対象にするかを定義すると、ユーザーは必要な情報をすばやく見つけられます。
検索を有効化する：検索機能を有効にするには、 検索機能属性 を開き、 検索を表示 トグルをオンにします。これにより、List コンポーネント内に検索ボックスが表示されます。この機能は、プレースホルダーテキストを変更したり、必要に応じて検索ボックスの位置を調整したりしてカスタマイズできます。
プレースホルダーテキストの設定：プレースホルダーテキストを追加して、検索バーの使い方を案内し、ユーザーにわかりやすくします。
検索バーの配置： 位置 設定を使用して検索バーの場所を設定します。オプションには 左, 右, 中央 と 埋める.
並べ替え
並べ替え属性 リストの並び順を変更できるようにします。 並べ替え可能 をオンにするとドラッグ＆ドロップによる並べ替えが有効になり、 並べ替えアイコン名 と 並べ替えアイコンの位置 (左 または 右）をドラッグハンドルに設定し、 並べ替え値を表示 を有効にして現在の並べ替え状態を表示します。 並び替え時 は、項目が移動された後に実行される処理を定義します — レコードの順序を更新 と組み合わせて、並び順の変更を Salesforce に保存できます。
操作
「On Click セクション」では、項目をクリックして List コンポーネントと操作したときに何が起こるかを定義できます。
List コンポーネントで利用できる操作は次のとおりです：
各セクションを確認して、これらの機能の設定方法を理解し、Avonni List コンポーネント内でエンドユーザー向けの操作性を高めましょう。
スタイル
Experience Cloud Sites 向けの Avonni List コンポーネントは、外観に関して包括的なカスタマイズオプションを提供し、サイトの美観にぴったり合わせることができます。
境界線の太さ、スタイル、色を調整して、リストの境界を定義または強調します。
幅や高さを含むリスト全体のサイズをカスタマイズし、レイアウトに合わせます。
可読性と見た目を向上させるために、リスト項目、ヘッダー、リスト本文の間隔を制御します。
タイトル、キャプション、アバターを含むヘッダーセクションをスタイル設定して、視覚的に区別しやすく情報豊かにします。
タイトルのフォント、サイズ、色を調整して、目立たせたりサイトのテーマに合わせたりできます。
リストの簡潔な説明やコンテキストを示すために、ヘッダータイトルの下のキャプションをスタイル設定します。
ヘッダーにアバターや画像を含めてスタイル設定し、視覚的表現やブランディングに活用します。
背景、配置、間隔などを含む個々のリスト項目の外観を調整します。
一貫性のある洗練された見た目のために、リスト項目の縦方向の配置を制御します。
明確な区切りと読みやすさのために、リスト内の項目ヘッダーの外観をカスタマイズします。
項目の説明テキストをスタイル設定し、視覚的に魅力的な方法で詳細情報を提供します。
リスト項目の背景色や背景画像を設定して、個々のエントリを区別したり強調したりします。
フォントや色の変更など、各項目内のフィールドをスタイル設定して、見やすさと視覚的な階層を高めます。
フィールド値の表示をカスタマイズして、データを明確に表現します。
値と区別し、読みやすさを高めるために、フィールドのラベルをスタイル設定します。
リストを移動するためのページネーションボタンをスタイル設定し、使いやすさとサイトの美観に合うようにします。
リストに関連する追加情報や操作のためにフッターセクションをカスタマイズし、全体デザインと調和させます。
最終更新
役に立ちましたか？