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

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

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-129e7edb5009d5f0435a6c929250aedf0a0560a5%2FAvonni%20Components%204.2.webp?alt=media" alt=""><figcaption></figcaption></figure>

## 設定

リストを効果的に使用するには、構成プロセス、特に Data Source と Mappings セクションを理解することが重要です。

### データソース

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-4b5f03164847513a8260fc000c24e2af481134d2%2F2024-02-04_15-01-30.png?alt=media" alt=""><figcaption></figcaption></figure>

| データソースタイプ | 説明                                   | 使用例                               |
| --------- | ------------------------------------ | --------------------------------- |
| **手動**    | リスト項目を手動で入力します。                      | 動的でないデータ、テスト、デモに最適です。             |
| **クエリ**   | クエリを作成して、Salesforce データでリストを自動入力します。 | 動的データ、リアルタイムデータ、大規模データセットに適しています。 |

### データマッピング

Data Mappings セクションで定義とカスタマイズを行い、リストに命を吹き込みます。

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-e7372ae6827e9b93aa58582cbbe516f2bb7bdf78%2F2024-02-04_14-49-35.png?alt=media" alt=""><figcaption></figcaption></figure>

* その後、主要データの横に追加要素を組み込むことができます。これには、画像、アバター、さらには各リスト項目により多くの文脈や詳細を与える追加フィールドなどの視覚要素が含まれます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fb365c5cb47037e83eb40f56a020fc71d8d35a0e%2F2024-02-04_14-52-53.png?alt=media" alt=""><figcaption></figcaption></figure>

### 項目の区切り

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

<table><thead><tr><th width="125.33333333333331">区切り</th><th>説明</th></tr></thead><tbody><tr><td><strong>なし</strong></td><td>既定値 — 項目間に区切りはありません。</td></tr><tr><td><strong>上</strong></td><td>リスト内の各項目の上部に区切りを配置できます。</td></tr><tr><td><strong>下</strong></td><td>各リスト項目の下部に区切り線を追加します。</td></tr><tr><td><strong>上下</strong></td><td>リスト内の各項目の上下に区切り線を配置します。</td></tr><tr><td><strong>カード</strong></td><td>各リスト項目を区切り線で分けられた、それぞれ独自のカード風コンテナに配置します。</td></tr></tbody></table>

### バリアント

この **バリアント** リストスタイルを設定します： `縦` （既定値 — 標準的な縦型リスト）、 `横` （項目の 1 行表示）、または `チェックリスト` （各項目にチェックボックスが付きます）。 **クリック時にハイライト** クリックした項目を視覚的に強調表示します、 **項目数を表示** ヘッダータイトルの横に件数を表示し、 **API 名** 参照用にコンポーネントへ一意の識別子を付与します。

### ヘッダー

リストヘッダーを次で構成します： **ヘッダータイトル** と **ヘッダーキャプション** — それぞれに独自の **ヘッダータイトルのテキストスタイル** / **ヘッダーキャプションのテキストスタイル** 設定（`見出し1` を `見出し4`, `段落1` / `段落2`）— **ヘッダーアイコン名** と **ヘッダーアイコンサイズ**, **ヘッダーを結合** ヘッダーを下のコンテンツと面一に配置し、 **ヘッダー アクション** ヘッダーにアクションボタンを追加します。

### アバター

**アバター属性** 各項目に表示されるアバターをカスタマイズします — その **バリアント** (`四角` / `円`), **サイズ**, **位置**, **代替アイコン名**, **在席** インジケーターとその位置、およびイニシャルの自動書式設定。

### チェックリスト

次のとき、 **バリアント** は `チェックリスト`, **チェックリスト属性** 追加します： **チェック数を表示** （チェック済み/合計数）と **チェック時に取り消し線** （完了済み項目に取り消し線を引きます）。

### レイアウト

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-91f0e8d9034a1775939b90cb3fbc70222eaa56a7%2F2024-02-07_21-24-47.png?alt=media" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5197234c25a03a25d3fa660a9cd5d3943d983a31%2F2024-02-07_21-25-19.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### フィールドのレイアウト

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-2a1d8a6e39d786d58621bd74eb4f4e1ce11879ed%2F2024-02-07_21-27-15.png?alt=media" alt=""><figcaption></figcaption></figure>

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

Avonni リストコンポーネントの「variant」プロパティは、フィールド情報の表示方法の見た目を変更するために使用されます。以下は「variant」プロパティで使用できる値で、それぞれ独自のスタイルがあります。

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-c015afb19a1e9e8069d04700a8e8863d292c5292%2F2024-02-07_21-28-52.png?alt=media" alt=""><figcaption></figcaption></figure>

### 画像

任意の項目に画像を追加できます。Image Attributes セクションでは、画像の位置、サイズ、トリミングの適合、代替ソースをカスタマイズします。

### フィルター

この **フィルターメニュー属性** セクションでは、フィルターメニューを追加できます。フィルターとして指定された各フィールドがそこに表示され、リストをすっきりと目的に集中した状態に保ちます。 **種類** フィルターをどこに表示するかを選択します — `横` （既定値）上部に表示、 `ポップオーバー`、または `パネル` リストの横に表示（参照 **サイドパネル属性**）— そして **選択リストフィルターの並び順**, **レコードの選択リスト値を使用** と **連鎖フィルター値を使用** 選択リストのオプションの表示方法を制御します。

各フィルターには、フィルター上部のメニューから選択する演算子もあります。テキスト、選択リスト、複数選択選択リスト、およびルックアップの各フィルターでは `等しい` （既定） `等しくない`, `空` と `空ではない`を使用できます。数値、日付、時間のフィルターでは `範囲内` （既定） `範囲外`, `等しい`, `等しくない`, `より小さい`, `以下`, `より大きい`, `以上`, `空` と `空ではない`. `空` と `空ではない` は値を取りません。そのため、どちらかが選択されている間はフィルター入力が非表示になります。チェックボックスフィルターには演算子メニューはありません。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-87a878b9fdb176b1e17531115e5a8d44e96717b0%2F2024-02-04_16-32-15.png?alt=media" alt=""><figcaption></figcaption></figure>

### ページネーション

この **ページネーション属性** この領域では、Avonni リストコンポーネント内の長いリストをより小さな部分に分割できます。 **ページネーションを表示** をオンにするとコントロールが表示され、 **1 ページあたりの項目数** （1〜200）を設定し、その **配置** (`左`, `中央` または `右`）を選択し、ボタンのラベルやアイコンを変更します。 **先頭**, **前へ**, **次へ** と **末尾** ボタン。これにより、項目の多いリストを扱いやすくなります。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-16c0039db05e1631881c743560d2674fc042d7e5%2F2024-02-04_16-33-26.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**項目を読み込み中。** で **ページネーション** オフの場合、リストは **1 ページあたりの項目数** 件ずつ、次の方式で読み込みます： **さらに表示** ボタン—または、固定の **高さ** （サイズスタイル）を設定すると、 **無限スクロール** （下部に到達すると次のバッチを読み込みます）。 **ページネーション** がオンの場合、1 ページ分の **1 ページあたりの項目数** 項目をページネーションコントロール付きで表示します。
{% endhint %}

### 検索

次を使用します： **検索フィールド** マッピングで、リストコンポーネント内のどのフィールドを検索可能にするかを定義し、ユーザーが必要な情報をすばやく見つけられるようにします。 **クエリ** ソースの場合は、ここで指定したフィールドに加えて、各項目のラベルと説明の背後にあるフィールドも検索されます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-33aae961f323f2a9def80985090e123bdc413935%2F2024-02-04_16-37-32.png?alt=media" alt=""><figcaption></figcaption></figure>

**検索を有効にする**：検索機能を有効にするには、 **検索エンジン属性** を開いて、 **検索を表示** トグルをオンにします。これにより、リストコンポーネント内に検索ボックスが表示されます。プレースホルダーテキストを変更したり、必要に応じて検索ボックスの位置を調整したりして、この機能をカスタマイズできます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-0d14763d43a0356f3fa2af20510633221d0fe5a7%2F2024-02-04_16-38-23.png?alt=media" alt=""><figcaption></figcaption></figure>

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

**検索バーの配置**：次を使用します： **位置** 設定を使って検索バーの位置を設定します。オプションには `左`, `右`, `中央`, `塗りつぶし` と `パネル` — `パネル` 検索ボックスをリスト横のサイドパネルに移動します。設定は **サイドパネル属性**.

### 並べ替え

**並べ替え属性** で、ユーザーはリストの順序を変更できます。 **並べ替え可** をオンにするとドラッグ＆ドロップによる並べ替えが有効になり、 **並べ替えアイコン名** と **並べ替えアイコンの位置** (`左` または `右`）をドラッグハンドルに設定し、 **並べ替え基準値を表示** を有効にして、現在の並べ替えを表示します。 **並べ替え時** は、項目が移動された後に実行されるインタラクションを定義します — 次と組み合わせて使用します： **レコードの順序を更新** 新しい順序を Salesforce に保存するために使用します。

### サイドパネル

**サイドパネル属性** リストが項目の横に表示できるパネルを構成します。パネルは、検索またはフィルターメニューがそこに配置された場合にのみ表示されます — 次を設定します： **位置** を `パネル` で **検索エンジン属性**、または **種類** を `パネル` で **フィルターメニュー属性**.

* **位置**：パネルをどちら側に配置するか、 `左` （既定値）または `右`.
* **デフォルトで閉じる**：パネルを折りたたんだ状態で開始します。既定ではオフです。
* **トグルボタンを非表示**：ユーザーがパネルを開閉するためのヘッダーボタンを削除します。既定ではオフです。
* **リセットボタンのラベル**：すべてのフィルター選択をクリアするボタンのラベルです。 `すべての選択をクリア` が既定です。

### 結果なしメッセージ

**結果なしメッセージ** 検索やフィルターに一致する項目がない場合、またはデータソースが何も返さない場合に、既定の空状態を独自のテキストに置き換えます。 **結果なしメッセージ属性** 空状態に何を表示するかを制御します： **結果なし画像を非表示** イラストを削除し、 **結果なしメッセージを非表示** テキストを削除します。どちらも既定ではオフです。

## インタラクション

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-636ae845c1135e2af7fd51abb2f2ccd09729e126%2F2024-02-04_20-37-16.png?alt=media" alt=""><figcaption></figcaption></figure>

リストコンポーネントで使用できるインタラクションは次のとおりです：

* [トーストを表示](/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)
* [Open Flow Panel](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-panel.md)
* [フローを実行](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/execute-flow.md)
* [ダウンロード](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/download.md)

各セクションを確認して、これらの機能の構成方法や Avonni リストコンポーネント内でエンドユーザーの操作性を高める方法を理解してください。

## スタイル

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 %}

{% 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-list.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.