> 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 Cloudコンポーネントで、Salesforceレコードをグリッドまたはリストレイアウトのカスタマイズ可能なカードとして表示します。

ポータルユーザーに、注文、ケース、契約、その他の関連データのようなフィルタ済みレコードセットを、各カードに表示する項目を完全に制御しながら表示するのに使用します。ユーザーは検索、フィルター、ページ送りで結果を閲覧し、カードをクリックしてレコードへ移動できます。Experience Builderでは、任意の標準オブジェクトまたはカスタムオブジェクトからデータを取得できます。

顧客の注文履歴、ケース一覧、ドキュメントライブラリ、製品カタログ、またはポータルユーザーがSalesforceレコードを閲覧・検索する必要があるあらゆる場面に最適です。

{% hint style="success" %}
Avonni List は [リアクティブデータコンポーネントです](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md)
{% endhint %}

<figure><img src="/files/cc76fd2c024896e6ec9d97340cef2877bb90989a" alt=""><figcaption></figcaption></figure>

## リストの設定

設定プロセス、特に「データソース」と「マッピング」セクションを理解することは、リストを効果的に使用するうえで重要です。

### データソースの設定

データソースセクションでは、Avonni ListをSalesforceデータに接続します。データソースには2つのオプションがあります。

<figure><img src="/files/6a3384823140833ed417958a32a006dec2bd9f34" alt=""><figcaption></figcaption></figure>

| データソースの種類    | 説明                                  | ユースケース                       |
| ------------ | ----------------------------------- | ---------------------------- |
| **手動データソース** | データテーブルにリストを手動で入力します。               | 動的でないデータ、テスト、デモに最適です。        |
| **クエリ**      | クエリを作成して、Salesforceデータでリストを自動入力します。 | 動的、リアルタイム、大規模なデータセットに適しています。 |

### データマッピングの設定

マッピングの定義とカスタマイズを行うことで、データマッピングセクションでリストに命を吹き込みます。

* 「**列を追加**」ボタンをクリックして、リスト上にラベルとして表示したいフィールドを選択します。

<figure><img src="/files/33e0f810d37b7aa1f4d48ecbece94ad19090dded" alt=""><figcaption></figcaption></figure>

* 次に、主データに加えて追加要素を組み込むことができます。これには、画像、アバター、さらには追加のフィールドといった視覚要素を含めて、リスト内の各項目により多くのコンテキストや詳細を提供できます。

<figure><img src="/files/ed4670e3a620fcb4d991b365f97cc3567f4d8265" alt=""><figcaption></figcaption></figure>

### 外観の設定

#### 項目区切り線の設定

項目区切り線機能は、項目の間に区切り線を入れることで、リストの視覚的な構造を強化するよう設計されています。この属性により、リスト内の各項目を他の項目とどのように区切るかをカスタマイズできます。

<table><thead><tr><th width="125.33333333333331">区切り線</th><th width="309">説明</th><th>イラスト</th></tr></thead><tbody><tr><td><strong>上</strong></td><td>リスト内の各項目の上部に区切り線を配置できます。</td><td><img src="/files/69f6e01faf012e9401593085574d804d49fc788d" alt=""></td></tr><tr><td><strong>下</strong></td><td>各リスト項目の下部に区切り線を追加します。</td><td><img src="/files/4228e871b188c9fa9dd934e3c5202abac795e1c0" alt=""></td></tr><tr><td><strong>周囲</strong></td><td>リスト内の各項目の上下に区切り線を配置します。</td><td><img src="/files/d5045c292b6a10e1e69c28a823fea93f7b5eccd5" alt=""></td></tr><tr><td><strong>カード</strong></td><td>各リスト項目を、区切り線で分離された独自のカード風コンテナに配置します。</td><td><img src="/files/82736aae983517fcca69a1f9c7ef617245fc1793" alt=""></td></tr></tbody></table>

#### レイアウトオプション

Avonni Listコンポーネントのレイアウトオプション機能では、リスト内のデータの表示方法を定義できます。データを配置する列数を1列から12列までの範囲で選択することで実現します。

<figure><img src="/files/e9d116a306ef7373820185385bb0ab2b8010b03d" alt=""><figcaption></figcaption></figure>

さらに、Avonni Listコンポーネントでは、コンテナの画面サイズに応じて列構成を指定できる高度なカスタマイズも可能です。この機能により、さまざまなデバイス間でリストの見た目を正確に調整でき、小、中、大の画面で一貫性のある使いやすい表示を実現します。

<figure><img src="/files/42a4c697f5ccae2d5e025b89a7379f826bfd5706" alt="" width="375"><figcaption></figcaption></figure>

#### フィールドレイアウトオプション

フィールド属性セクションでは、各フィールドがコンテナ内で占有する列数を定義でき、リストコンテンツのレイアウトと外観をきめ細かく制御できます。

<figure><img src="/files/6f381933d1f65f47e27810da2aa657d4d5cd9757" alt=""><figcaption></figcaption></figure>

**バリアントを調整**

Avonni Listコンポーネントの「variant」プロパティは、フィールド情報の表示方法の外観を変更するために使用されます。以下は「variant」プロパティで使用できる値と、それぞれの固有のスタイルです。

1. **Standard**: これはデフォルト設定で、ラベルがフィールドの上に表示されます。ラベルとフィールド内容が明確に分かれた、古典的で広く使われているレイアウトです。
2. **ラベル非表示**: ミニマルなデザインにしたい場合にこのバリアントを選択します。ラベルは表示されず、よりすっきりした見た目になります。これは、コンテキストやプレースホルダーテキストでフィールドの目的が明確なフォームや、スペースが限られている場合に最適です。
3. **ラベルを横並び**: このバリアントでは、ラベルはフィールドと同じ行に配置され、通常は左側に置かれます。水平スペースの方が垂直スペースよりも十分にあるフォームで効果的な、省スペースなレイアウトです。よりコンパクトなフォームデザインを実現したい場合にも便利です。
4. **ラベルを積み重ね**: このバリアントでは、ラベルはフィールドの直上に配置されます。フィールドにフォーカスが当たるか入力されると、ラベルは上に移動します。これはモバイルインターフェースやWebアプリケーションでよく使われる現代的なデザインで、縦方向のスペースを節約し、すっきりとした洗練された見た目を保つのに役立ちます。

<figure><img src="/files/e23d630db9a68fee61d379ccc51515bb8d5a5d87" alt=""><figcaption></figcaption></figure>

#### 画像オプション

## その他の設定

### フィルター

「**`フィルタリングオプション`**」を使うと、フィルターメニューを追加できます。この機能を有効にすると、フィルターとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストをすっきりと保ちながら必要な情報に集中できます。

<figure><img src="/files/37180fd41b0b5c899fc1dca71719221c9933cc2c" alt=""><figcaption></figcaption></figure>

### ページネーション

「ページネーションオプション」領域では、Avonni Listコンポーネント内の長いリストをより小さな部分に分割できます。各ページに表示する項目数やコントロールの見た目を選択できます。これにより、大規模なリストを扱いやすくなります。

<figure><img src="/files/eb0db1010e7ba51dfc0b8704542c5df0066d7ca6" alt=""><figcaption></figcaption></figure>

### 検索

「Search Fields」属性を使用して、Listコンポーネント内のどのフィールドを検索可能にするかを定義し、ユーザーが必要な情報をすばやく見つけられるようにします。

<figure><img src="/files/debce7c9872c827cc9722d0221f17df89f111fff" alt=""><figcaption></figcaption></figure>

**検索を有効にする**: 検索機能を有効にするには、Searchセクションに移動して「Show Search」トグルをオンにします。これにより、Listコンポーネント内に検索ボックスが表示されます。必要に応じて、プレースホルダーテキストを変更し、検索ボックスの位置を調整してこの機能をカスタマイズできます。

<figure><img src="/files/968d0cef9f928def7e44452e65eb2d6ce417e0b0" alt=""><figcaption></figcaption></figure>

**プレースホルダーテキストの設定**: プレースホルダーテキストを追加して、ユーザーを案内するように検索バーをカスタマイズします。

**検索バーの配置**: position属性を使用して検索バーの場所を設定します。オプションには以下が含まれます:

## Interactions

「**「On Click」セクション**」では、項目をクリックしたときにユーザーがリストコンポーネントとやり取りした際に何が起こるかを定義できます。

<figure><img src="/files/ed5af8d4a15aa197b9010b85bd7bf6b1f1e40b63" alt=""><figcaption></figcaption></figure>

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)
* [フロー ダイアログを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md)

各セクションを確認して、これらの機能の設定方法や、Avonni Listコンポーネント内でエンドユーザー向けの対話性を高める方法について理解を深めましょう。

## スタイルの外観

Experience Cloud Sites向けのAvonni Listコンポーネントは、外観を包括的にカスタマイズできるオプションを提供し、サイトの美観にぴったり合わせられます。

Avonni Listでカスタマイズできるスタイル属性は次のとおりです:

1. **枠線:** 境界線の太さ、スタイル、色を調整して、リストの境界を定義または強調します。
2. **サイズ：** 幅や高さを含むリスト全体のサイズをカスタマイズして、レイアウトに合わせます。
3. **間隔:** 読みやすさと見た目の魅力を高めるために、リスト項目、ヘッダー、リスト本文の間隔を調整します。
4. **ヘッダー:** タイトル、キャプション、アバターを含むヘッダーセクションのスタイルを設定し、視覚的に区別しやすく、情報を伝えやすくします。
5. **ヘッダータイトル:** タイトルのフォント、サイズ、色をカスタマイズして目立たせたり、サイトのテーマに合わせたりします。
6. **ヘッダーキャプション:** リストに関する簡潔な説明やコンテキストを示すため、ヘッダータイトルの下のキャプションのスタイルを設定します。
7. **ヘッダーアバター:** ヘッダーにアバターや画像を含めてスタイル設定し、視覚的な表現やブランディングに活用します。
8. **項目:** 背景、配置、間隔など、個々のリスト項目の外観を調整します。
9. **項目の垂直配置:** 一貫性のある洗練された見た目のために、リスト項目の縦方向の配置を調整します。
10. **項目ヘッダー:** 明確な区切りと読みやすさのために、リスト内の項目ヘッダーの外観をカスタマイズします。
11. **項目の説明:** 視覚的に魅力的な方法で詳細情報を提供するため、項目の説明テキストのスタイルを設定します。
12. **項目の背景:** リスト項目の背景色または画像を設定して、個々のエントリを区別したり強調したりします。
13. **項目フィールド:** フォントや色の変更など、各項目内のフィールドのスタイルを設定して、明瞭さと視覚的な階層を高めます。
14. **項目フィールドの値:** フィールド値の表示をカスタマイズして、データを明確に表現します。
15. **項目フィールドのラベル:** 値と区別し、読みやすさを向上させるために、フィールドのラベルのスタイルを設定します。
16. **ページネーションボタン:** リストを移動するためのページネーションボタンのスタイルを設定し、ユーザーに使いやすくサイトの美観と一致するようにします。
17. **フッター:** リストに関連する追加情報やアクションのためにフッターセクションをカスタマイズし、全体のデザインと調和させます。


---

# 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=<question>&goal=<endgoal>
```

`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.