ツリーセレクタウィジェットを使用すると、インフォテーブルプロパティに保存されている単一のアイテムを階層データとして移動および選択できるようになります。たとえば、このウィジェットを使用することで、ユーザーはさまざまなファミリーおよびカテゴリから製品を選択したり、複数の異なるサイトにデプロイされているリモートマシンを選択したり、メンテナンス倉庫に保管されている在庫部品を選択したりできます。選択したアイテムをグリッドやプロパティ表示などのほかのウィジェットにバインドして、特定のオブジェクトに関する詳細情報を表示できます。ウィジェットは次の 2 つの領域に分かれています。

さらに、サーチボタンを使用して、ツリーセレクタの階層全体をサーチできます。ツリーセレクタがランタイムでロードされると、選択領域にトップレベルのアイテムが表示されます。アイテムを選択すると、その子が表示され、ツリーが更新されてアイテムへのパスがハイライトされます。ツリーを使用して、データ階層内の上位レベルに移動できます。アイテムの子を表示するには、それを選択領域で選択する必要があります。アイテムに子がない場合は、メッセージが表示されます。このメッセージはウィジェットの NoChildrenMessage プロパティを使用してカスタマイズできます。

ツリーセレクタは 2 つのビューに分かれています。現在のアイテムへのパスを示すツリービューと、選択したアイテムに使用できる子をリストする選択ビュー。

ツリーセレクタウィジェットのリストアイテムを設定するには、以下のフィールド定義を含むインフォテーブルを返すサービスを作成する必要があります。

インフォテーブルの各行は、ツリーセレクタ内のアイテムを定義します。アイテムを静的に生成するようにデータサービスを設定することも、ほかのウィジェットまたはサービスからの入力に基づいて動的に生成するように設定することもできます。

データをツリーセレクタウィジェットにバインドするには、次の手順を実行します。

ランタイムでは、ツリーセレクタを開くと、トップレベルのアイテムが表示されます。

サーチにより、ツリーデータ全体から一致するアイテムのリストが表示されます。現在の選択との一致度が高いアイテムがサーチ結果の上位にリストされます。各アイテム名に続いて、ツリー構造内のフルパスが表示されます。さらに、より簡単に関連アイテムを識別できるようにハイライト色が表示されます。サーチを無効にするには、HideSearchButton プロパティを false に設定します。

以下のいずれかのプロパティを使用して、選択したアイテムを渡すことができます。

SelectedData プロパティを使用します (SelectedItem プロパティが一意の値を指定しない場合)。

たとえば、Figma 仕様で提供されている例を考えてみます。"Apple" という用語は "Computer companies"、"Record company"、および "Fruit" の 3 つのセクションに表示されます。"Apple" の各インスタンスは別々のアイテムです。SelectedItem のみに依存する場合、"Apple" の 3 つのインスタンスのうちどれがユーザーによって選択されたかを判断することはできません。

SelectedData を使用することで、この制限を回避できます。SelectedData は、選択したアイテムに関する包括的な情報を提供するため、ほかのアイテムが同じ名前を共有しているかどうかに関係なく、選択したアイテムを識別できます。これにより、正確かつ精密にアイテムを選択できるため、システムの機能とユーザーエクスペリエンスが向上しています。