リスト

データの表示と管理

Avonni List コンポーネントを始めるには、まずデータを接続し、表示方法を設定する必要があります。

データを接続する

リストを作成する前に、Avonni List コンポーネントにどこから表示するデータを取得するかを指定する必要があります。データのソースや性質に応じていくつかの選択肢があります：

データをリストにマッピングする

リストに動的データソースを使用する場合は、 データマッピング セクションを設定して、コンポーネントがデータからリストを作成する方法を指示する必要があります。

翻訳者のように考えてください：データマッピングは Salesforce のデータから正しい情報を確保します。

データマッピングが重要な理由

データマッピングがなければ、リストはデータのどの部分を使用すべきか判断できません。これにより、リストが誤ったまたは無関係な情報を表示する可能性があります。

データマッピングはどのように機能するか？

データマッピングのセクションでは、Salesforce のデータフィールドと対応するリスト属性との間の接続を確立します。どのフィールドがどの属性にマップされるか（例：「取引先名」フィールドを「ラベル」属性に）を選択することで、各チップが Salesforce のデータから正しい情報を正確に表示することを保証します。

リストのバリアント

The バリアント プロパティでは Avonni List の全体的なスタイルとレイアウトを定義できます。特定のバリアントを選択することで、コンテンツとデザインの好みに合わせてリストの外観を調整できます。

利用可能なバリアント

基本（デフォルト）

これは標準のリストビューです。アイテムは縦方向のリスト形式で表示され、詳細情報やさまざまなコンテンツタイプに適しています。

シングルライン

このバリアントはリスト項目を横一列で表示し、左右の矢印でアイテム間を移動できます。簡潔な情報を表示したい場合や縦方向のスペースが限られているときに便利です。

チェックリスト

この特殊なバリアントはリストをチェックリスト形式に変換します。各アイテムに選択用のチェックボックスが含まれ、インタラクティブなタスクリストや設定選択に最適です。

適切なバリアントの選び方

• ベース： 各リスト項目に複数のフィールドやリッチメディアを含む詳細情報を提示する必要がある場合はこちらを選びます。

• シングルライン： 簡潔なデータポイントや、コンパクトなリストレイアウトを望む場合に適しています。

• チェックリスト：選択やチェックマークの形式でユーザー入力が必要なとき

区切り線の設定

Divider 属性は、アイテム間に区切り線を挿入してリストの視覚的構造を強化するために設計されています。

この属性により、リスト内の各アイテムがどのように分離されるかをカスタマイズできます。

アイテムをクリック可能にする

有効にすると、リスト内のすべてのアイテムがクリック可能になります。

レイアウトの設定

列数

レイアウト機能により、さまざまな画面サイズにシームレスに対応するリストを設計できます。リスト項目が配置される列数を簡単に制御でき、デスクトップの大きなモニターからコンパクトなスマートフォン画面まで最適な表示を確保できます。

レイアウトのカスタマイズ

• 列数： リスト項目が占める列数を選択します。1 列から 12 列まで柔軟に選択できます。

• レスポンシブデザイン： 異なる画面サイズごとにレイアウトを微調整します。たとえば、モバイルでは可読性を最大化するために1列を使用し、大きな画面では複数列を使用してより多くのコンテンツを同時に表示するのがよいでしょう。

アクション

Avonni List コンポーネントはリスト内にアクションを埋め込むことができ、表示コンポーネントを魅力的でインタラクティブなインターフェースに変えます。

アクションを追加する場所

アイテムレベル

ボタンやリンクなどのクリック可能な要素で各リスト項目を強化します。これらのアクションは、詳細レコードページへの移動、編集用ポップアップの起動、またはその他のカスタムフローのロジックを実行するために使用できます。

メディアレベル

リストに画像や動画が含まれる場合、これらのメディア要素内に直接アクションを埋め込むことができます。例えば、商品画像をクリックすると商品詳細ページが開く、動画のサムネイルをタップすると再生が始まる、などです。

プロパティ

ヘッダー

ヘッダーセクションでは、リストのヘッダーの外観と機能を制御できます。

リストのヘッダーセクション

ボタン

ヘッダーにインタラクティブなボタンを追加して、 インタラクションパネルから特定のアクションを実行できるようにします。これにより追加の機能が提供され、リストへのユーザーの関与が高まります。

チェックリスト

Avonni List コンポーネントで「チェックリスト」バリアントを選択すると、インタラクティブなチェックリストの外観と動作をカスタマイズするための新しいオプションが利用可能になります。

チェックリストの主要設定

• チェックした項目の取り消し線：このトグルを有効にすると、チェックが入った項目に取り消し線スタイルが適用されます。この視覚的手がかりはユーザーに即時のフィードバックを提供し、進捗の追跡に役立ちます。

• チェック数を表示：このオプションを有効にすると、チェックされた項目の数をリアルタイムで表示するカウンターが表示されます。選択または完了したアイテムの数を素早く把握する必要がある場合に便利です。

アバター属性

アバター属性セクションでは、Avonni List の各アイテム内のアバターの外観や配置をカスタマイズできます。

画像属性

任意のアイテムに画像を追加できます。画像属性ではアイテムの画像に関する設定をカスタマイズできます。以下を設定できます： 位置, size, 高さ 値を参照するフィルターを追加します： トリミング オプション。

フィールド属性

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

使い方

1 - フィールドを定義する：Avonni List コンポーネントに表示したいフィールドを追加します — プロパティパネルの「Fields」属性に移動します。これはプロパティパネルの下部にあります。

2 - 列幅を指定する：追加したフィールドがまたがる列数を指定するには、Fields Attributes セクションを使用します。

フィールドのバリアント

Avonni list コンポーネントの「variant」プロパティはフィールド情報の表示方法を変更します。以下は「variant」プロパティで利用可能な値で、それぞれ固有のスタイルがあります。

• 標準： これは通常の方法で、ラベルがフィールドの上に配置されます。読みやすくシンプルです。

• ラベル非表示： 非常にクリーンな外観を望む場合に使用します。ラベルが非表示になり、スペースが限られている場合やフィールドの目的が明らかな場合に最適です。

• ラベルインライン： ラベルがフィールドの横、通常は左側に配置されます。上下より横方向に余裕がある場合に便利です。

• ラベル積み重ね： ラベルがフィールドの上に配置され、クリックや入力開始時に上に移動します. これは特にモバイルデバイスでスペースを節約するモダンなスタイルです。

ページネーション

「ページネーションオプション」エリアでは、長いリストを Avonni List コンポーネント内で小さな部分に分割できます。各ページに表示する項目数やコントロールの外観を選択でき、大量のリストを扱いやすくします。

主な特長

並べ替え

ユーザーがリスト内の項目を並べ替えられるようにするには、「並べ替え」オプションを有効にします。有効にすると、リストを並べ替えられることを示す明確な視覚的指標（通常はアイコン）が各項目に表示されます。

左位置の Sortable アイコンの例

フィルターの追加

フィールドをフィルターとして追加する

リストにフィールドをフィルターとして追加するには、プロパティパネルの「Filter Attributes」セクションを探してください。このセクションではフィルターに使用するフィールドを選択できます。

フィルタリングオプション

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

• コンポーネントビルダーを開く

• フィルターセクションまでスクロールする

• フィルターの表示方法を選択します。

フィルタータイプ

Avonni List はデータナビゲーションの体験を簡素化するために 3 つのフィルタリングオプションを提供します。各オプションは異なるユーザーの好みや画面サイズに対応するよう設計されています。

サイドパネルのフィルターメニューオプション

Avonni List コンポーネントを「パネル」フィルターで構成する場合、便利なサイドパネルにフィルタリングオプションを提示できます。このパネルは以下の追加カスタマイズ設定を提供します：

フィルターパネルの表示場所

• 位置（左または右）： フィルターパネルは画面の側面からスライドアウトします。デザインに最適な位置を選択してください。

フィルターパネルの開始状態

• 閉じた状態： 画面読み込み時にフィルターパネルを非表示または表示にするかを決定します。

  • 真（True）： パネルは最初は非表示になります。データテーブルにまず注目させたい場合に適しています。

  • 偽（False）： パネルは最初から開いた状態になります。ユーザーがすぐにフィルタリングを行えるよう促します。

トグルボタンの表示/非表示

• トグルボタンを非表示にする： ユーザーがフィルターパネルを開閉するためのボタンを見るかどうかを制御します。

  • 真（True）： ボタンは非表示です。フィルターアイコンのクリックなどフロー内の他の操作に基づいてパネルを自動的に開閉させたい場合に使用します。

  • 偽（False）： ボタンは常に表示され、ユーザーがパネルを制御できます。

検索

「検索可能（Searchable）」トグルでは、特定の列内のレコードが検索可能かどうかを指定できます。有効にすると検索バーが利用可能になります。さらに検索バーのプレースホルダーテキストを設定し、位置を左、右、中央、フィル（幅いっぱい）から選択できます。

検索の有効化：列を検索可能にするには、Avonni List コンポーネントの設定で「Searchable」オプションをオンにします。

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

検索バーの配置：位置属性を使用して検索バーの配置を設定します。選択肢には次があります：

• 左：検索バーを左に揃えます。

• 右：検索バーを右に揃えます。

• 中央：検索バーを中央に配置します。

• fill：検索バーを利用可能なスペースに合わせて拡張します。

{timelineConfigJson}

• ユーザーが何を検索できるかを案内する説明的なプレースホルダーテキストを使用してください。

• リストコンポーネントの全体レイアウトと調和する検索バーの位置を選択してください。

インタラクション

インタラクション Avonni List とユーザーがどうやってやり取りするかを定義します。

以下は List コンポーネントで利用可能なインタラクションです：

アイテムクリック時（On Item Click）

ユーザーがリストのアイテムをクリックしたときに何が起こるかを決定します。例えば：

• そのアイテムの詳細ページに移動する。

• アイテムの情報を編集するためのポップアップを開く。

• フロー内で設計したその他の処理を実行する。

アクションクリック時（On Action Click）

リスト項目に「編集」や「詳細表示」のようなボタンを追加している場合、それらのボタンがクリックされたときに何が起こるかを選択できます。例えば：

• そのアイテムの情報を更新する。

• 新しい画面を開く。

• フロー内の特定のアクションをトリガーする。

ヘッダーアクション時（On Header Action）

リストのヘッダーにボタンがある場合、それらがクリックされたときに何が起こるかをカスタマイズできます。例えば：

• リストをフィルタリングして特定のアイテムのみを表示する。

• アイテムの並び替え方法を変更する。

• リストに適したその他のアクション。

メディアアクションクリック時（On Media Action Click）

リスト項目に「再生」ボタンのようなボタン付きの画像や動画がある場合、それらのボタンがクリックされたときに何が起こるかを決定できます。

並べ替え時（On Reorder）

ユーザーがリスト内の項目を並べ替えられるようにした場合、並べ替えが行われるたびにアクションをトリガーできます。たとえば、新しい項目順序を追跡するためにバックグラウンドでフィールドを自動的に更新することができます。

これを機能させるには、リスト設定で「Order By」フィールドを設定していることを確認してください。これによりインタラクション設定で「レコードの順序を更新」オプションが有効になります。

スタイル

Avonni List コンポーネントは、Salesforce にシームレスに統合するための幅広いスタイリングオプションを提供します。