트리 선택기 위젯을 사용하면 인포테이블 속성에 저장된 단일 항목에 대한 계층적 데이터 탐색 및 선택 기능을 제공할 수 있습니다. 예를 들어, 위젯을 사용하여 사용자가 다양한 제품군 및 카테고리의 제품, 서로 다른 사이트에 배포된 원격 시스템 또는 유지 관리 웨어하우스에 저장된 인벤토리 부품을 선택할 수 있습니다. 선택한 항목을 그리드 또는 속성 표시와 같은 다른 위젯에 바인딩하여 특정 객체에 대한 자세한 정보를 표시할 수 있습니다. 위젯은 다음 두 영역으로 나뉩니다.

또한 검색 버튼을 사용하면 사용자가 트리 선택기의 전체 계층 구조를 검색할 수 있습니다. 런타임에 트리 선택기가 로드되면 선택 영역에 최상위 항목이 표시됩니다. 항목을 선택하면 해당 하위 항목이 표시되고 트리가 업데이트되어 항목에 대한 경로가 강조 표시됩니다. 트리를 사용하여 데이터 계층 구조에서 상위 수준으로 이동할 수 있습니다. 항목의 하위 항목을 보려면 선택 영역에서 해당 항목을 선택해야 합니다. 항목에 하위 항목이 없으면 메시지가 표시됩니다. 위젯 NoChildrenMessage 속성을 사용하여 이 메시지를 사용자 정의할 수 있습니다.

트리 선택기는 두 개의 보기로 나뉩니다. 현재 항목에 대한 경로를 보여주는 트리 보기와 선택한 항목에 대해 사용 가능한 하위 항목을 나열하는 선택 보기입니다.

트리 선택기 위젯에 대한 목록 항목을 구성하려면 다음 필드 정의를 사용하여 인포테이블을 반환하는 서비스를 만들어야 합니다.

인포테이블의 각 행은 트리 선택기의 항목을 정의합니다. 항목을 정적으로 생성하거나 다른 위젯 또는 서비스의 입력을 기반으로 동적으로 생성하도록 데이터 서비스를 구성할 수 있습니다.

데이터를 트리 선택기 위젯에 바인딩하려면 다음 단계를 수행합니다.

런타임에 트리 선택기를 열면 최상위 항목이 표시됩니다.

검색하면 전체 트리 데이터에서 일치하는 항목의 목록이 표시됩니다. 현재 선택 항목에 더 가까운 항목이 검색 결과에서 더 높은 위치에 나열됩니다. 각 항목 이름 뒤에는 트리 구조의 전체 경로가 옵니다. 또한 관련 항목을 보다 쉽게 식별할 수 있도록 강조 표시 색이 표시됩니다. 검색을 비활성화하려면 HideSearchButton 속성을 false로 설정합니다.

다음 속성 중 하나를 사용하여 선택한 항목을 전달할 수 있습니다.

SelectedData 속성을 사용하면 SelectedItem 속성이 고유한 값을 제공하지 않습니다.

예를 들어, Figma 사양에 제공된 예를 생각해 보십시오. 용어 "Apple"이 "Computer companies", "Record company", "Fruit"의 세 가지 섹션에 나타납니다. "Apple"의 각 인스턴스는 별개의 항목입니다. SelectedItem에만 의존한다면 사용자가 "Apple"의 세 인스턴스 중 어떤 인스턴스를 선택했는지 확인할 수 없습니다.

그러나 SelectedData를 사용하면 이 제한을 극복할 수 있습니다. SelectedData는 선택한 항목에 대한 포괄적인 정보를 제공하므로, 다른 항목이 동일한 이름을 공유하는지 여부에 관계없이 선택한 항목을 정확하게 식별할 수 있습니다. 이를 통해 정확하고 정밀한 항목을 선택할 수 있으며 시스템의 기능과 사용자 경험이 향상됩니다.