Tree Select

Tree Select は展開・検索可能なツリーデータからノードを選択します。このフィールドは Form の状態、検証、送信範囲に含まれます。

1. 利用場面

主な用途：

• 組織・ディレクトリツリー
• 多階層の商品カテゴリー
• 複数ノードを選ぶ階層データ

2. 追加と設定

1. Form Section の Fields に Tree Select を追加します。
2. バックエンド DTO のプロパティと一致する、安定した一意の Field Key / Name を設定します。
3. 以下の固有プロパティを設定し、必要に応じて Required、Help Text、Full row、条件式を追加します。
4. Design Preview で初期値とレイアウトを確認し、Form の Validate / Submit でデータ経路全体をテストします。

3. 主なプロパティ

プロパティ	役割
Data Source	選択データの取得元とマッピング方法を定義します。
Multiple Selection	この動作を有効または無効にします。
Select Box Mode	この動作を有効または無効にします。
Search Field Key	バインド、送信、応答で使用するデータ形状を定義します。
Expand all tree nodes by default	この動作を有効または無効にします。

Field Key、Required、Help Text、Full row、Visible When などの共通設定は Form フィールド契約から提供されます。表には Tree Select で特に重要な設定を示します。

4. フォーム値とバックエンド契約

送信される値： 単一選択では安定した選択値、複数選択では値の配列です。

"dept-engineering"

["dept-engineering", "dept-product"]

例はデータ形状のみを示します。API 側では業務 DTO に基づく型、範囲、権限の検証が必要です。

5. 検証・条件・インタラクション

すべてのフィールドで Required、Visible When、Disabled When、Required When、Dependencies、Clear When Hidden を利用できます。条件式は操作性を高めますが、バックエンドの検証や権限管理の代わりにはなりません。

コンポーネント機能： onChange を使用し、選択変更後に Page Interaction を続行できます。

6. 設定上の注意

推奨事項： 選択値はバックエンドの列挙値または ID として安定させ、翻訳可能なラベルを業務キーにしないでください。

レイアウト、検証、送信、下書き、バックエンドプロトコルは Form の概要 を参照してください。