The OrganizationUnitBrowser component allows users to browse and select items from an organization tree structure (e.g., departments, business units, teams). It is designed for enterprise-level applications where hierarchical data selection is required.
1. Basic Properties
- Name: Unique identifier for the component (e.g.,
OrganizationUnitBrowser1). - Label: The text displayed above the component (e.g.,
Select organization unit). - Default value: Predefined value that is selected by default.
- Placeholder: Text shown when no unit is selected.
States
- Multiple: Allows selecting multiple organization units.
- Disabled: Prevents user interaction.
- Hidden: Hides the component while keeping it active in logic.
- Auto focus: Automatically focuses on the field when the page loads.
- Multiline: Displays selected units in multiple lines if necessary.
2. Layout
Controls grid placement and spacing in responsive designs.
📘 See Common Properties → Layout.
3. Events
- onChange: Triggered when the selected organization unit changes.
4. Loading
- Loading: Enables a loading indicator while fetching or refreshing the organization tree.
5. User Interaction
- The component provides a search button (🔍) to filter units in large organization trees.
- Selected units are displayed in the input field with clear (❌) and search (🔍) actions.
- Expanding folders (e.g., Operations Department, IT Department) allows drilling down into sub-units.
- Supports pagination when the number of units exceeds the page size (e.g., 10, 20, 40 items).
6. Business Use Cases
The OrganizationUnitBrowser is typically used in:
- Assigning users to specific departments.
- Setting permissions or roles by organizational level.
- Navigating company structures in HR, ERP, or CRM applications.
- Selecting reporting hierarchies (e.g., manager → department → division).
7. Style
Custom styles can be applied for branding or advanced UI adjustments.
📘 See Common Properties → Style.
✅ The OrganizationUnitBrowser component is a business-specific control designed for hierarchical selections in enterprise apps. It simplifies navigating complex structures while offering flexibility (search, pagination, multi-select) for real-world organizational data.