In the realm of app development, the demand for intuitive and efficient data presentation is paramount. OutSystems, a leading low-code application development platform, provides robust tools for developers. However, when dealing with complex data structures, the default dropdown component can fall short. Enter the Tree Selector component by UDDAN IT, a game-changer for developers working with OutSystems ODC apps.

Why Tree Selector?

The need for a more sophisticated selection component became evident in a recent project where the client required a comprehensive list of categories and subcategories. The hierarchical nature of the data made it impossible to use the standard dropdown menu effectively. Despite searching through the Forge, OutSystems’ repository of reusable components, no suitable option was available for ODC—though there were some for OS11, they lacked the necessary functionality. This gap led to the development of the Tree Selector component.

Features of the Tree Selector Component

The Tree Selector goes beyond the basic dropdown, offering a rich set of features tailored to handle complex data structures. Here are the key functionalities that set it apart:

1. Unlimited Levels of Nesting

The component supports an infinite number of nested levels, allowing developers to represent complex hierarchies seamlessly.

2. Select All Children with Parent Selection

When a parent item is selected, all its child items are automatically selected. This feature simplifies the selection process and ensures consistency.

3. Select Parent When All Children Are Selected

Conversely, if all child items under a parent are selected individually, the parent item gets selected automatically. This bidirectional functionality enhances user experience by reducing the number of clicks.

4. Track “Partially Selected” Parents

Parents with only some children selected are visually distinguished as “partially selected,” providing a clear indication of the selection status.

5. Custom Order

Items can be ordered according to custom criteria, allowing developers to prioritize or group items as needed.

6. Toggle/Contract All Button

A single button allows users to expand or contract all hierarchical levels, giving them control over the visibility of the data.

7. Select All/None Button

This feature enables users to quickly select or deselect all items within the hierarchy, saving time and effort.

8. Keyword Search

A powerful keyword search functionality allows users to find specific items quickly within the tree, enhancing navigation and usability.

The Tree Selector component is now available on the ODC Portal of OutSystems. Find this new time-saving component here.

This addition to the platform empowers developers to create more dynamic and user-friendly applications, particularly when dealing with complex data structures.