YouTube ChannelSchedule a CallSubscribe for Updates

ビジュアルピッカー

Avonni Visual Picker は、オプション選択を楽しく対話的な体験に変えます。単純なドロップダウンやリストの代わりに、視覚的に魅力的な方法で項目を選べます。

概要

Visual Picker は、選択肢の視覚的表現がユーザー体験を向上させるシナリオに最適です。主な特徴は次のとおりです：

  • 視覚的オプション：画像、アイコン、テキストでオプションを表示し、単なるテキストリストよりも魅力的にします。

  • 単一または複数選択：コンポーネントを設定して、ユーザーが単一のオプション（ラジオボタンのように）または複数のオプション（チェックボックスのように）を選択できるようにします。

  • カスタマイズ可能なレイアウト：オプションの外観や配置（例：アスペクト比、スタイリング）を制御します。

  • データ駆動型：様々なデータソース（手動、変数、クエリ、ピックリスト）からオプションを設定できます。

  • リアクティブ：選択された値は Variable リソースに格納され、Dynamic Component の他の部分（フィルタ、数式、インタラクション）で使用可能になります。

Visual Picker の設定

キャンバス上で Visual Picker コンポーネントを選択すると、プロパティパネル（右側パネル）でそのプロパティにアクセスできます。

基本プロパティ

これらのプロパティは Visual Picker の基本データとラベリングを制御します。

  • 実際の： (テキスト) このコンポーネントインスタンスの一意の識別子（例：ProductCategoryPicker、PriorityPicker）。

  • 次のように設定します： (テキスト) Visual Picker の上または横に表示されるテキストラベル。例：「カテゴリを選択：」「興味を選んでください：」。

  • フィールドレベルヘルプ： (テキスト、任意) ラベルの横に表示されるヘルプテキスト。

  • Value： (テキストまたはコレクション - 非常に重要) 現在選択されている項目の値を保持するプロパティです。

    • 単一選択 (ラジオタイプ): これをテキスト Variable リソースにバインドします。変数は選択された項目の値を保持します。

    • 複数選択 (チェックボックスタイプ): これをコレクション Variable リソース（通常はテキスト型）にバインドします。変数は選択された項目の value プロパティのリストを保持します。

  • プレースホルダー：オプションが選択されていないときに表示されます。

データソースの設定

  • データソース： Visual Picker のオプションがどのように供給されるかを選択してください：

    • 手動：コンポーネントのプロパティ内で直接オプション（ラベル、値、画像／アイコンなど）を手動で入力します。小規模で静的なオプションセットに適しています。

    • 変数：オプションを定義するために Variable リソース（通常はコレクション変数）を使用します。これにより、より動的なオプションが可能になります。

    • クエリ：Avonni Query Data Source を使用して Salesforce オブジェクトからオプションを取得します。

    • ピックリスト：Avonni Picklist Data Source を使用して Salesforce のピックリストフィールドからオプションを設定します。

  • 項目／オプション：このセクションで利用可能な設定はデータソースによって異なります。

    • 手動データソース：データソースとして「Manual」を選択した場合：オプションを追加します。label、value、image、icon などの値を追加できます。

    • データマッピング（Variable、Query、Picklist データソースの場合）：Variable、Query、Picklist のデータソースを選択した場合：

      • 次のように設定します：各オプションに表示するテキストを含むデータソースのフィールドをマッピングします（例：Account の Name、Product の ProductName）。

      • Value：各オプションの一意の識別子を含むフィールドをマッピングします（例：Salesforce レコードの Id）。ユーザーが選択したときに Value プロパティに格納されます。

      • 説明： (任意) ラベルの下に追加テキストを表示するためのフィールドをマッピングします。

      • 画像ソース／アイコン： (任意) 各オプションの画像またはアイコンを表示するフィールドをマッピングします。

動作と外観

  • タイプ： (テキスト - オプションから選択) ユーザーが単一のオプションを選択できるか、複数選択できるかを決定します：

    • ラジオ：単一選択のみ許可します（ラジオボタンのように）。

    • チェックボックス：複数選択を許可します（チェックボックスのように）。

  • 選択範囲 （チェックボックスタイプのみ）：Type が checkbox の場合、次を設定できます：

    • 最小：ユーザーが選択しなければならないオプションの最小数。

    • 最大：ユーザーが選択できるオプションの最大数。

  • 比率： (テキスト - オプションから選択) 視覚的な項目のアスペクト比（形状）を制御します。例：1:1（正方形）、2:3（縦長の長方形）、16:9（ワイドスクリーン）。これは画像／アイコンの表示方法に影響します。

  • バリアント： (テキスト - オプションから選択) 選択された項目の視覚スタイルを制御します：

    • 非カバ可能：選択された項目に対して控えめな視覚的指標（例：アウトラインやチェックマーク）が表示されます。

    • カバ可能：選択された項目に対してより目立つ視覚的指標（例：背景色の塗りつぶし）が表示されます。

一般的なコンポーネントプロパティ

  • 無効： (ブール - チェックボックス) 有効にすると Visual Picker は無効になり、ユーザーは操作できなくなります。

  • 読み取り専用： (ブール - チェックボックス) 有効にするとユーザーはオプションを表示できますが、選択を変更できません。

  • 必須： (ブール - チェックボックス) 有効にするとユーザーは必ず1つのオプションを選択する必要があります。

インタラクション

  • On Change：Visual Picker の主要なインタラクションです。ユーザーの選択が変更されるたびに（選択が追加または削除されるたびに）トリガーされます。

    • 使用例：

      • 選択に基づいて他のコンポーネントを更新する（例：データテーブルをフィルタする）。

      • 変数の値を設定する。

      • フローを実行する。

      • 別のページにナビゲートする。

    • 選択された値へのアクセス：

      • !VisualPickerName.value：単一の値または値のリストを返します。

重要な考慮点

  • データソースの選択：ニーズに最も適したデータソース（Manual、Variable、Query、Picklist）を選んでください。動的データには Query または Picklist を使用してください。

  • インタラクション：On Change インタラクションの使用を検討してください。

まとめると

Visual Picker コンポーネントは、オプションを選択するための柔軟でインタラクティブなコンポーネントです

最終更新

役に立ちましたか？