# AX - リスト

## 概要

**AX - リスト** Experience Sites ページ上で Salesforce レコードをグリッドまたはリスト形式のカスタマイズ可能なカードとして表示する Experience Cloud コンポーネントです。

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

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

{% hint style="success" %}
Avonni List は [リアクティブデータコンポーネント](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/riakutibukonpnento)
{% endhint %}

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fpt2IfBa0lYKIcPqkp9r4%2FAvonni%20Components%204.2.webp?alt=media&#x26;token=bfa921dd-9ffe-457d-a418-9bd6afe5a723" alt=""><figcaption></figcaption></figure>

## リストの設定

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

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbPNBH8BWbxiRQWP0nvC2%2F2024-02-04_15-01-30.png?alt=media&#x26;token=6d86abef-43ac-4b13-8490-d197f0fc154f" 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%2FsuXTMbmTsztyn3eSA11F%2F2024-02-04_14-49-35.png?alt=media&#x26;token=0b2c9073-24b6-477d-bbdd-d32f7987f043" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fc32Ky8kXM5Bec7yYKlV1%2F2024-02-04_14-52-53.png?alt=media&#x26;token=a9b956a2-f67f-4f5e-bdcc-f389ada8ecd7" 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="broken-reference" alt=""></td></tr><tr><td><strong>下</strong></td><td>各リスト項目の下部に区切り線を追加します。</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>上下</strong></td><td>リスト内の各項目の上下両方に区切り線を配置します。 </td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>カード</strong></td><td>各リスト項目を独自のカード風コンテナ内に配置し、区切り線で分けます。</td><td><img src="broken-reference" alt=""></td></tr></tbody></table>

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUF0NVgdHNfCVLdEPeKIr%2F2024-02-07_21-24-47.png?alt=media&#x26;token=aa9fb4b6-7f17-402b-a6f5-1a00a4c751d8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3dTwkrWEQzbdIGV6TwHa%2F2024-02-07_21-25-19.png?alt=media&#x26;token=48d5c695-2f82-487e-bc3a-f08a81169fc7" alt="" width="375"><figcaption></figcaption></figure>

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrerSxvfhSCDCOBOF6uAp%2F2024-02-07_21-27-15.png?alt=media&#x26;token=e7ecb311-fd51-4271-b601-b45a2fa7d809" alt=""><figcaption></figcaption></figure>

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

Avonni list コンポーネントの「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%2FHsOhZBf72KG2HfCgthFE%2F2024-02-07_21-28-52.png?alt=media&#x26;token=96b20a77-af03-43c8-9acb-5b09db482cd0" alt=""><figcaption></figcaption></figure>

#### 画像オプション

## その他の設定

### フィルター

「**`フィルタリングオプション`**」ではフィルタメニューを追加できます。この機能を有効にすると、フィルターとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストをすっきりと整理された状態に保てます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5az4m93BFO7sn6RyKV0d%2F2024-02-04_16-32-15.png?alt=media&#x26;token=87feb3fb-af0e-4547-a17a-dbc7295ee9c8" alt=""><figcaption></figcaption></figure>

### ページネーション

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FzeK9JTrAHa50bc1g2xJV%2F2024-02-04_16-33-26.png?alt=media&#x26;token=e1518494-b96c-44b7-860e-dfdd62a3eb52" alt=""><figcaption></figcaption></figure>

### 検索

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F06qOPZmtykLJ5oDM6MBC%2F2024-02-04_16-37-32.png?alt=media&#x26;token=2010499d-9896-4ab4-9fc4-76e33e9e006b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIaNqX8MljJ6BiCs2dVfY%2F2024-02-04_16-38-23.png?alt=media&#x26;token=d4d4509a-054f-4864-9b6e-ffc876e413d7" alt=""><figcaption></figcaption></figure>

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

**検索バーの配置**: position 属性を使用して検索バーの位置を設定します。オプションは次のとおりです。

## インタラクション

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FgU5pBJZqt1tHVmeY8EPp%2F2024-02-04_20-37-16.png?alt=media&#x26;token=1929d1aa-7c5a-42dc-84b5-81459adb889a" alt=""><figcaption></figcaption></figure>

List コンポーネントで利用できるインタラクションは次のとおりです。

* [トーストを表示](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/tsutowo)
* [移動](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/yi-dong)
* [アラートモーダルを開く](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/artomdaruwoku)
* [確認を開く](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/woku)
* [フローダイアログを開く](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/furdaiaroguwoku)

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

## スタイル外観

Experience Cloud Sites 向けの Avonni List コンポーネントは、外観に関する包括的なカスタマイズオプションを提供し、サイトの美観に完全に合わせられるようにします。&#x20;

Avonni List でカスタマイズ可能なスタイル属性は次のとおりです。

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