チェックボックスグループ

概要

AvonniのCheckbox Groupコンポーネントは、リストから1つまたは複数のオプションを選択できるようにし、Salesforce Dynamic Components内のフォーム、フィルタ、または設定選択に最適です。オプションをSalesforceから動的に取得するためのさまざまなデータソースをサポートします。

主な機能

• 柔軟なデータソース： 手動リスト、変数、クエリ、またはピックリストに接続してオプションを生成できます。

• 選択モード： バインドされた値による単一選択または複数選択。

• カスタマイズ： バリアント、タイプ（例：ボタン、トグル）、向き、レイアウトでUIに合わせて調整可能。

• インタラクティビティの制御： 必須、読み取り専用、無効状態をサポート。

ヒント： 複数選択のシナリオに使用してください。単一のトグルが必要な場合はAvonni Toggleコンポーネントを検討してください。

ユースケース

• データテーブル内のレコードをフィルタリング（例：商談の複数ステージを選択）。

• ユーザーの好みを取得（例：ニュースレターのトピック）。

• フォームの複数選択（例：リードフォームでの興味分野）。

• 動的クエリ（例：ピックリストから製品カテゴリを選択）。

• ステータス表示（例：タスクチェックリスト用のトグル風ボタン）。

設定

キャンバスでCheckbox Groupを選択すると、右側のプロパティパネルでプロパティにアクセスできます。

基本プロパティ

これらは識別、ラベル付け、およびデータソースの設定を扱います。

コア機能とデータバインディング

これらは選択とバインディングを定義します。

外観と書式設定

これらは視覚スタイルとレイアウトを制御します。

動作プロパティ

これらはユーザーとのやり取りを管理します。

例

例1：単一選択のステージフィルタ

この例は、ピックリストにバインドされた商談の単一選択Checkbox Groupを作成します。

1

プロパティを構成

• ラベル: "ステージを選択"

• データソース: ピックリスト（商談 > StageName）

• 複数選択かどうか: オフ

• バリアント: 標準

• タイプ: ボタン

• 向き: 垂直

2

データテーブルと統合して動的にフィルタリング

Checkbox GroupをAvonniのData Tableに接続します。これにより選択されたステージに基づいて商談レコードがフィルタされ、一致するデータのみが表示されます。テーブルのクエリはSalesforceからデータを取得し、ユーザーの選択に応答します。

1. データテーブルコンポーネントを追加： コンポーネントライブラリから「Data Table」をCheckbox Groupの下のキャンバスにドラッグします。

2. クエリデータソースを設定： Data Tableのプロパティパネルで：

   • データソースを「Query」モードに設定します。

   • オブジェクトを選択：「Opportunity」。

   • リアクティブフィルタを追加：StageName equals {!selectedStage}（Checkbox GroupのValueまたはValue Collectionにバインド；複数選択の場合は"in"演算子とコレクションを使用）。

3. 列を追加： 表示するOpportunityフィールドを選択（例：Name、Amount、Close Date）。

結果： ユーザーが1つのステージを選択すると、フィルタリング用の変数が更新されます。

例2：他のコンポーネントの表示制御

Checkbox Groupを「コンポーネントの表示を設定」機能と組み合わせて、ユーザーの選択に基づき他のコンポーネントを動的に表示／非表示にします。これは、特定のフィルタが選択されたときにのみカンバンボードを表示するなど、条件付きUIに便利です。

1

Checkbox Groupを設定

• API名：statusFilter

• ラベル："ステータスを選択"

• データソース：手動（オプション："Active","Inactive","Pending"）

• 複数選択かどうか：オフ（単一選択の場合；複数選択に調整）

• Value：{!selectedStatus}にバインド（テキスト変数を作成）

• バリアント：標準

• タイプ：デフォルト

• 向き：垂直

2

ターゲットコンポーネントを追加（例：カンバン）

カンバンコンポーネントをキャンバスにドラッグします

3

カンバンの表示ルールを設定

• カンバンを選択します。

• プロパティパネル > コンポーネントの表示を設定で、Input Choice Setの値が特定の名前と等しいなどの表示条件を追加します。

結果： カンバンは「All Divisions」が選択されているとき（または複数選択で値を含むとき）のみ表示され、それ以外では非表示になり、よりクリーンで文脈に応じたインターフェースになります。

主な注意点

• データソースの整合性： オプションが選択モードに一致することを確認してください（例：列挙型にはピックリストを使用）；大規模データセットではクエリをテストしてください。

• レイアウトの応答性： 水平の場合、画面サイズに応じて列数を調整してオーバーフローを防いでください。

• バリデーション： 必須をフローと組み合わせてフォームでの選択を強制してください。

• アクセシビリティ： 説明的なラベルを使用してください；トグル／ボタンはタッチ操作に適しています。

よくある問題のトラブルシューティング

• オプションが読み込まれない： データソースの設定を確認してください（例：クエリ権限、ピックリストフィールド）。

• レイアウトのオーバーフロー： 水平の場合は複数行を有効にするか、列数を減らしてください。

• 無効化が機能しない： 競合するインタラクションがないか確認し、プレビューでテストしてください。

• デフォルトがない： 必要に応じて初期選択のために変数を事前設定してください。

まとめ

AvonniのCheckbox Groupコンポーネントは、Salesforceデータ統合とカスタマイズ可能なスタイルを備えた柔軟なオプション選択を提供します。Dynamic UIのフィルタやフォームに最適です。関連コンポーネントについては、AvonniのPicklistまたはData Sourcesガイドを参照してください。