> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-list.md). # AX - リスト ## 概要 **AX - リスト** Experience Sites ページ上で Salesforce レコードをカスタマイズ可能なカードとしてグリッドまたはリストレイアウトで表示する Experience Cloud コンポーネントです。 ポータルユーザーに、注文、ケース、契約、その他の関連データのような、フィルター済みのレコードセットを表示するために使用します。各カードに表示するフィールドを完全に制御できます。ユーザーは検索やフィルター、結果のページ送りを行い、カードをクリックしてレコードに移動できます。Experience Builder で任意の標準オブジェクトまたはカスタムオブジェクトからデータを取得します。 顧客の注文履歴、ケース一覧、ドキュメントライブラリ、商品カタログ、またはポータルユーザーが Salesforce レコードを参照・検索する必要があるあらゆる場面に最適です。 {% hint style="success" %} Avonni List は [リアクティブデータコンポーネントです](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md) {% endhint %}
## 設定 特に Data Source と Mappings セクションの設定プロセスを理解することは、List を効果的に使用するために重要です。 ### データソース Data Source セクションでは、Avonni List を Salesforce データに接続します。Data Source には 2 つのオプションがあります。
| データソースの種類 | 説明 | ユースケース | | --------- | --------------------------------------- | ---------------------------- | | **手動** | リスト項目を手動で入力します。 | 動的でないデータ、テスト、デモに最適です。 | | **クエリ** | クエリを作成して、Salesforce データで List を自動入力します。 | 動的、リアルタイム、大規模なデータセットに適しています。 | ### データマッピング Data Mappings セクションで定義とカスタマイズを行い、リストに命を吹き込みます。 * 「**列を追加**」ボタンをクリックして、List 上でラベルとして表示したいフィールドを選択します。
* その後、主要データの横に追加要素を組み込めます。これには、画像やアバターのようなビジュアルコンポーネント、またはリスト内の各項目にさらに文脈や詳細を与える追加フィールドが含まれます。
### 項目区切り線 Item Divider 機能は、項目間に区切り線を入れることで、リストの視覚的構造を強化するよう設計されています。この属性により、リスト内の各項目の区切り方をカスタマイズできます。
区切り線説明
上リスト内の各項目の上部に区切り線を配置できます。
下部各リスト項目の下部に区切り線を追加します。
周囲リスト内の各項目の上下に区切り線を配置します。
カード各リスト項目を、区切り線で区切られた独自のカードのようなコンテナーに配置します。
### バリアント この **バリアント** リストのスタイルを設定します: `ベース` （標準の縦型リスト）、 `シングルライン` （項目の横並びの行）、または `チェックリスト` （各項目にチェックボックスが付きます）。 **クリック時にハイライト** クリックした項目を視覚的に強調表示し、 **API 名** 参照用にコンポーネントへ一意の識別子を付与します。 ### ヘッダー リストヘッダーを **タイトル** と **キャプション** （およびそのテキストスタイル）、ヘッダー **アイコン名** と **アイコンサイズ**, **項目数を表示** タイトルの横に件数を表示するため、 **ヘッダーを連結** ヘッダーを下のコンテンツとぴったり揃えるために、また **ヘッダーアクション** ヘッダーにアクションボタンを追加するために。 ### アバター **アバター属性** 各項目に表示されるアバターをカスタマイズします — その **バリアント** （円形/四角形）、 **サイズ**, **位置**, **フォールバックアイコン名**, **プレゼンス** インジケーターとその位置、および自動イニシャル書式。 ### チェックリスト 〜の場合、 **バリアント** は `チェックリスト`, **チェックリスト属性** 追加します **チェック数を表示** （チェック済み/合計数）と **チェック時に取り消し線** （完了済み項目に取り消し線を引きます）。 ### レイアウト Avonni List コンポーネントの Layout Options 機能により、リスト内のデータの表示方法を定義できます。これは、データを整理する列数を 1 列から 12 列までの範囲で選択することで実現できます。
さらに、Avonni List コンポーネントは、コンテナーの画面サイズに応じて列構成を指定できる高度なカスタマイズを提供します。この機能により、さまざまなデバイスでリストの見た目を正確に調整でき、小・中・大画面全体で一貫した使いやすい表示を実現します。
### フィールドレイアウト Field Attributes セクションでは、各フィールドがコンテナー内で占める列数を定義でき、リスト内容のレイアウトと外観をきめ細かく制御できます。
**バリアントを調整** "variant" プロパティは、フィールド情報の表示方法の見た目を変更するために使用されます。以下は "variant" プロパティで利用できる値と、それぞれの固有のスタイルです。 1. **Standard**：これはデフォルト設定で、ラベルがフィールドの上に表示されます。ラベルとフィールド内容が明確に分かれた、定番で広く使われるレイアウトです。 2. **ラベル非表示**：ミニマルなデザインにしたい場合にこのバリアントを選びます。ラベルは表示されず、よりすっきりとした見た目になります。コンテキストやプレースホルダーテキストでフィールドの目的が明確なフォームや、スペースが限られている場合に最適です。 3. **ラベルインライン**：このバリアントでは、ラベルはフィールドと同じ行に配置され、通常は左側に表示されます。縦方向のスペースより横方向のスペースに余裕があるフォームに適した、省スペースのレイアウトです。よりコンパクトなフォームデザインにしたい場合にも便利です。 4. **ラベルスタック**：このバリアントでは、ラベルがフィールドの上に直接配置されます。フィールドにフォーカスされるか入力されると、ラベルは上に移動します。モバイル UI や Web アプリケーションでよく使われるモダンなデザインで、縦方向のスペースを節約しつつ、すっきりとした整然とした見た目を保つのに役立ちます。
### 画像 画像は任意の項目に追加できます。画像属性セクションでは、その位置、サイズ、切り抜きのフィット、およびフォールバックソースをカスタマイズします。 ### フィルター 「**`フィルタリングオプション`**」ではフィルターメニューを追加できます。この機能を有効にすると、フィルターとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストをすっきり保ち、集中しやすくなります。
### ページネーション 「ページネーションオプション」領域では、Avonni List コンポーネントの長いリストをより小さな部分に分割できます。1 ページごとに表示する項目数や、コントロールの見た目を選択できます。これにより、大規模なリストを扱いやすくなります。
{% hint style="info" %} **項目を読み込み中。** オフの場合、リストは **ページネーション** 項目を **1ページあたりの項目数** 一度に読み込み、 **さらに表示** ボタン、または固定の **高さ** （サイズスタイル）を設定すると、 **無限スクロール** （下端に達すると次のバッチを読み込みます）。オンの場合、 **ページネーション** 1 ページ分の **1ページあたりの項目数** 項目をページネーションコントロール付きで表示します。 {% endhint %} ### 検索 Search Fields 属性を使用して、List コンポーネント内のどのフィールドを検索可能にするかを定義し、ユーザーが必要な情報をすばやく見つけられるようにします。
**検索を有効にする**：検索機能を有効にするには、Search セクションに移動して「検索を表示」トグルをオンにします。この操作により、List コンポーネント内に検索ボックスが追加されます。プレースホルダーテキストを変更したり、必要に応じて検索ボックスの位置を調整したりして、この機能をカスタマイズできます。
**プレースホルダーテキストの設定**：検索バーにプレースホルダーテキストを追加して、ユーザーを案内します。 **検索バーの配置**：position 属性を使用して検索バーの位置を設定します。選択肢には left、right、center、fill があります。 ## インタラクション 「**クリック時セクション**」では、項目をクリックしたときにユーザーが List コンポーネントで行う操作に応じて何が起こるかを定義できます。
List コンポーネントで利用できる操作は次のとおりです: * [トーストを表示](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md) * [移動](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md) * [アラートモーダルを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md) * [確認ダイアログを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md) * [Flow ダイアログを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md) 各セクションを確認して、これらの機能の設定方法を把握し、Avonni List コンポーネント内でエンドユーザー向けの操作性を高めましょう。 ## スタイリング Experience Cloud Sites 向けの Avonni List コンポーネントは、外観に関する包括的なカスタマイズオプションを提供し、サイトの美観にぴったり合わせることができます。 {% tabs %} {% tab title="枠線" %} 境界線の太さ、スタイル、色を調整して、リストの境界を定義したり強調したりします。 {% endtab %} {% tab title="サイズ" %} 幅や高さを含め、リスト全体のサイズをカスタマイズしてレイアウトに合わせます。 {% endtab %} {% tab title="間隔" %} 読みやすさと視覚的な魅力を高めるために、リスト項目、ヘッダー、リスト本文の間隔を調整します。 {% endtab %} {% tab title="ヘッダー" %} タイトル、キャプション、アバターを含むヘッダーセクションをスタイリングして、視覚的に区別しやすく、情報豊かにします。 {% endtab %} {% tab title="ヘッダーのタイトル" %} タイトルのフォント、サイズ、色をカスタマイズして、目立たせたりサイトのテーマに合わせたりします。 {% endtab %} {% tab title="ヘッダーのキャプション" %} リストの簡潔な説明や文脈を示すために、ヘッダータイトル下のキャプションをスタイリングします。 {% endtab %} {% tab title="ヘッダーアバター" %} 視覚的な表現やブランディングのために、ヘッダーにアバターや画像を追加してスタイリングします。 {% endtab %} {% tab title="項目" %} 背景、配置、余白を含む個々のリスト項目の外観を調整します。 {% endtab %} {% tab title="項目の縦方向の配置" %} 一貫性があり洗練された見た目のために、リスト項目の縦方向の配置を制御します。 {% endtab %} {% tab title="項目ヘッダー" %} 明確な区分けと読みやすさのために、リスト内の項目ヘッダーの外観をカスタマイズします。 {% endtab %} {% tab title="項目の説明" %} 視覚的に魅力的な方法で詳細情報を提供するために、項目の説明テキストをスタイリングします。 {% endtab %} {% tab title="項目の背景" %} 個々のエントリを区別したり強調したりするために、リスト項目の背景色や画像を設定します。 {% endtab %} {% tab title="項目フィールド" %} フォントや色の変更など、各項目内のフィールドをスタイリングして、明確さと視覚的な階層を整えます。 {% endtab %} {% tab title="項目フィールド値" %} 明確なデータ表現のために、フィールド値の表示をカスタマイズします。 {% endtab %} {% tab title="項目フィールドラベル" %} 値と区別し、読みやすさを高めるために、フィールドのラベルをスタイリングします。 {% endtab %} {% tab title="ページネーションボタン" %} リストを移動するためのページネーションボタンをスタイリングし、使いやすくサイトの美観に合うようにします。 {% endtab %} {% tab title="フッター" %} リストに関連する追加情報やアクションのためにフッターセクションをカスタマイズし、全体のデザインと調和させます。 {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-list.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.