二重リストボックス

Dual Listbox は左右並びの2つのリストを提供し、ユーザーが対話型コントロールを使って複数のアイテムを選択・移動できるようにします。

デュアルリストボックスの設定

1. データソースの設定

最初のステップは、リストボックスがどこからオプションを取得するかを決めることです。これは重要で、リストボックスがどれだけ静的または動的になるか、そしてどれだけの作業を自動で行えるかを決定します。

選択肢は次のとおりです:

手動

コンポーネントの設定に直接データを入力してください。

変数

これはユーザーの操作や他のコンポーネントのロジックに応じて変わるデータに便利です。

クエリ

Salesforceのレコードを表示するための最も一般的なオプションです。

なぜ重要か:適切なソースを選ぶことでリストボックスがユースケースに合うようになります。静的なリストはシンプルで、動的なリストは適応します。ユーザーとワークフローに最も合うものを選んでください。

2. データマッピングの設定(変数およびクエリソースの場合)

コンポーネント(デュアルリストボックスなど)で変数またはクエリのデータソースを使用する場合、あなたは マップ データソースのフィールドをコンポーネントの表示属性にマッピングする必要があります。データマッピングは、コンポーネントに どの 表示する情報の要素と どこ それらをどのように表示するかを伝えることだと考えてください。

仕組み(連絡先の例):

Avonniのクエリデータソースを使って一連の 取引先責任者(Contact) レコードを取得したとします。各Contactレコードには多くのフィールド(FirstName、LastName、Email、Phoneなど)があります。デュアルリストボックスに対してどの どの フィールドを表示に使うかを指示する必要があります。

  • ラベル: これはリストボックスの各項目に表示される主要なテキストです。通常、レコードの明確で簡潔な識別子を提供するフィールドにマッピングします。Contactの場合、良い選択肢はしばしば 組み合わせFirstName 値を参照するフィルターを追加します: LastName.

  • 説明/サブタイトル: 複数の値を組み合わせて表示するために数式を使用できます

3. プロパティの変更

次に、デュアルリストボックスのプロパティを調整してスタイルとニーズに合わせます。これらの設定は見た目と動作を制御します—良いユーザー体験が成功の半分です。

  • バリアント: バリアント設定は主にデュアルリストボックスにラベルがあるかどうかを制御します。バリアント設定内で追加のスタイリングオプションにもアクセスできます。

  • サイズ: デュアルリストボックスの幅をレイアウトに合わせて調整できます。コンポーネントが占める水平スペースを制御するために、小、中、大のサイズオプションから選択してください。

  • 検索エンジン: デュアルリストボックスに多くのオプションがある場合、検索エンジンを有効にするとユーザー体験が向上します。これにより、ソースリストボックスの上に検索ボックスが追加され、ユーザーが探しているオプションを素早くフィルタリングして見つけられるようになります。

  • ドラッグ可能なオプション: デフォルトでは、ユーザーはリストボックス間のボタンをクリックしてソースリストと選択リスト間で項目を移動できます。『ドラッグ可能なオプション』設定を有効にすると、ユーザーは項目をリスト間で直接ドラッグ&ドロップできるようになります。

なぜ重要か:これらの調整によりリストボックスは洗練され使いやすくなります。使いづらいツールは人を苛立たせますが、調整されたツールはユーザーを満足させ生産的にします

4. インタラクションの追加

インタラクションを使うと、 何が起きるかを定義できます ユーザーがデュアルリストボックスコンポーネントとやり取りしたとき、具体的にはオプションを選択または選択解除したときに何が起きるかを定義できます。インタラクションは静的なリストをアプリケーションの動的で機能的な部分へと変えます。

インタラクションで何ができるか?

ユーザーがデュアルリストボックスで選択を行うと、次のようなさまざまなアクションをトリガーできます:

  • データの更新: 選択されたオプションに基づいてSalesforceレコードを変更します。 ベストプラクティス:フロー ダイアログを開く」インタラクションを使用して更新ロジックを処理するフローを起動します。これは特にマルチセレクトのシナリオでより堅牢でスケーラブルです。

  • ナビゲート: 選択に基づいてユーザーを別のページ(レコード詳細、リストビュー、外部URL)に移動させます。 例: デュアルリストボックスでContactを選択すると、そのContactのレコードページに移動する可能性があります。

  • メッセージを表示: フィードバック、警告、または確認を提供するために、トーストメッセージを表示したりモーダルダイアログを開いたりします。 例: レコードを更新した後に「レコードが正常に更新されました」というトーストメッセージを表示します。

インタラクションの追加方法

  1. デュアルリストボックスを選択: コンポーネントビルダーのキャンバスでデュアルリストボックスコンポーネントをクリックします。

  2. インタラクションパネルへ移動: 「インタラクション」パネル(またはプロパティパネル内の「インタラクション」セクション)を見つけます。

  3. 新しいインタラクションを追加: 関連するイベント(デュアルリストボックスの場合はおそらく「On Change」—選択が変わるたびに発火します)に対する新しいインタラクションを追加します。

  4. アクションタイプを選択: 実行したいアクション(ナビゲート、フローダイアログを開く、トーストを表示など)を選択します。

  5. アクションを構成: 選択したアクションに必要な設定を提供します(例:フローのAPI名、ナビゲーションのターゲット、メッセージテキスト)。これにはしばしば 選択された値 デュアルリストボックスから参照することが含まれます。

最終更新

役に立ちましたか?