AX - リスト
概要
AX - リスト Experience Cloud コンポーネントで、Salesforce レコードを Experience サイトのページ上でグリッドまたはリストレイアウトのカスタマイズ可能なカードとして表示します。
ポータルユーザーに対してフィルタ済みのレコードセット（例：注文、案件、契約、または任意の関連データ）を表示するために使用でき、各カードに表示するフィールドを完全に制御できます。ユーザーは検索、フィルタ、ページネーションで結果を参照し、カードをクリックしてレコードに移動できます。Experience Builder の標準オブジェクトおよびカスタムオブジェクトからデータを取得します。
顧客の注文履歴、案件リスト、ドキュメントライブラリ、製品カタログ、あるいはポータルユーザーが Salesforce レコードを参照・検索する必要があるあらゆる場面に最適です。
Avonni リストは リアクティブデータコンポーネントです
リストの設定
特にデータソースとマッピングのセクションなど、設定プロセスを理解することはリストを効果的に使用する上で重要です。
データソースの設定
データソースセクションは Avonni リストを Salesforce データに接続する場所です。データソースには 2 つのオプションがあります。
手動データソース
データテーブルにリストを手動で入力します。
動的でないデータ、テスト、デモに最適です。
クエリ
クエリを作成して Salesforce データでリストを自動的に入力します。
動的、リアルタイム、大規模データセットに適しています。
データマッピングの設定
データマッピングのセクションでリストを定義・カスタマイズすることで、リストに命を吹き込みます。
「列を追加」ボタンをクリックして、リスト上のラベルとして表示するフィールドを選択します。
次に、主要データと並べて追加要素を組み込むことができます。これには画像、アバターなどのビジュアルコンポーネントや、各アイテムにより多くの文脈や詳細を提供する追加フィールドが含まれる場合があります。
外観の設定
アイテム区切り線の設定
アイテム区切り線機能は、アイテム間に区切り線を導入することでリストの視覚構造を強化するために設計されています。この属性により、リスト内の各アイテムが他とどのように仕切られるかをカスタマイズできます。
上
リストの各アイテムの上部に区切り線を配置できます。
下
各リストアイテムの下部に区切り線を追加します。
全周
リスト内の各アイテムの上部と下部の両方に区切り線を配置します。
カード
各リストアイテムを区切り線で区切られたカードのようなコンテナ内に配置します。
レイアウトオプション
Avonni リストコンポーネント内のレイアウトオプションでは、データをどのように表示するかを定義できます。これは、データを整理する列数（1 列から 12 列まで）を選択することで実現されます。
さらに、Avonni リストコンポーネントはコンテナの画面サイズに応じた列設定を指定する高度なカスタマイズ機能を提供します。この機能により、小、中、大の各画面サイズでリストの見た目を正確に調整し、一貫してユーザーフレンドリーな表示を確保できます。
フィールドのレイアウトオプション
フィールド属性セクションでは、各フィールドがコンテナ内で占める列数を定義でき、リストコンテンツのレイアウトと外観を細かく制御できます。
バリアントを調整する
Avonni リストコンポーネントの「variant」プロパティは、フィールド情報の表示方法の外観を変更するために使用されます。以下はそれぞれ独自のスタイルを持つ「variant」プロパティの利用可能な値です。
スタンダード：これはデフォルト設定で、ラベルがフィールドの上に表示されます。ラベルとフィールド内容の間に明確な区別を提供する古典的で広く使用されるレイアウトです。
ラベル非表示：ミニマルなデザインを望む場合にこのバリアントを選択します。ラベルは表示されず、よりクリーンな見た目になります。フィールドの目的がコンテキストやプレースホルダーテキストで明白な場合や、スペースが限られている場合に最適です。
ラベルインライン：このバリアントではラベルがフィールドと同じ行に配置され、通常左側に表示されます。垂直方向より水平方向のスペースが豊富なフォームで有効な省スペースのレイアウトです。よりコンパクトなフォームデザインを実現したい場合にも便利です。
ラベル積み重ね：このバリアントではラベルがフィールドの上に直接配置されます。フィールドがフォーカスされたり入力されるとラベルが上に移動します。モバイルインターフェースやウェブアプリケーションでよく使われるモダンなデザインで、垂直スペースを節約し、すっきりとした外観を保つのに役立ちます。
画像オプション
その他の設定
フィルター
「フィルタオプション」ではフィルターメニューを追加できます。この機能を有効にすると、フィルターとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストは煩雑にならず集中した状態を保てます。
ページネーション
「ページネーションオプション」領域では、Avonni リストコンポーネントで長いリストを小さな部分に分割できます。各ページに表示するアイテム数やコントロールの外観を選択できます。これにより膨大なリストの扱いが容易になります。
検索
「検索フィールド」属性を利用して、リストコンポーネント内で検索可能にするフィールドを定義し、ユーザーが必要な情報を迅速に見つけられるようにします。
検索の有効化：検索機能を有効にするには、検索セクションに移動して「検索を表示」トグルをオンにします。これによりリストコンポーネントに検索ボックスが表示されます。プレースホルダーテキストの変更や検索ボックスの位置調整でこの機能をカスタマイズできます。
プレースホルダーテキストの設定：ユーザーを案内するためにプレースホルダーテキストを追加して検索バーをカスタマイズします。
検索バーの位置設定：位置属性を使用して検索バーの配置を設定します。オプションには次のものがあります：
インタラクション
「クリック時セクション」では、ユーザーがアイテムをクリックしてリストコンポーネントとやり取りしたときに何が起こるかを定義できます。
以下はリストコンポーネントで利用可能なインタラクションです：
各セクションを確認して、これらの機能の設定方法や Avonni リストコンポーネント内でエンドユーザー向けのインタラクティブ性を高める方法についての洞察を得てください。
スタイリング 外観
Experience Cloud Sites 向けの Avonni リストコンポーネントは外観の包括的なカスタマイズオプションを提供し、サイトの美観に完璧に合わせることができます。
以下は Avonni リストでカスタマイズ可能なスタイリング属性です：
ボーダー： 境界線の太さ、スタイル、色を調整してリストの境界を定義または強調します。
サイズ： 幅や高さを含むリスト全体のサイズをカスタマイズしてレイアウトに合わせます。
スペーシング： リストアイテム、ヘッダー、およびリスト本体の間のスペースを制御して可読性と視覚的魅力を向上させます。
ヘッダー： タイトル、キャプション、アバターを含むヘッダーセクションのスタイルを設定して、視覚的に際立たせ情報を伝えます。
ヘッダータイトル： タイトルのフォント、サイズ、色をカスタマイズして目立たせるかサイトのテーマに合わせます。
ヘッダーキャプション： ヘッダータイトルの下に表示されるキャプションのスタイルを設定して、リストに関する簡潔な説明や文脈を提供します。
ヘッダーアバター： 視覚的表現やブランディングのためにヘッダーにアバターや画像を含めてスタイル設定します。
アイテム： 背景、整列、スペーシングなど個々のリストアイテムの外観を調整します。
アイテムの垂直整列： 一貫性のある洗練された外観を実現するためにリストアイテムの垂直方向の整列を制御します。
アイテムヘッダー： 明確な区切りと読みやすさのためにリスト内のアイテムヘッダーの外観をカスタマイズします。
アイテムの説明： 詳細情報を視覚的に魅力的に提供するためにアイテム説明テキストのスタイルを設定します。
アイテム背景： 各リストアイテムの背景色や背景画像を設定して、個々のエントリを区別または強調します。
アイテムフィールド： フィールド内のフォントや色を変更するなど、各アイテム内のフィールドのスタイルを設定して明瞭さと視覚的階層を整えます。
アイテムフィールドの値： データを明確に表現するためにフィールド値の表示方法をカスタマイズします。
アイテムフィールドのラベル： 値と区別して読みやすさを向上させるためにフィールドのラベルのスタイルを設定します。
ページネーションボタン： リストをナビゲートするためのページネーションボタンのスタイルを設定し、ユーザーフレンドリーでサイトの美観に合うようにします。
フッター： リストに関連する追加情報やアクションのためにフッターセクションをカスタマイズし、全体のデザインに調和させます。
最終更新
役に立ちましたか？