1. Overview

The Hierarchical Dropdowns (HD Control) in OutSystems is a custom UI component designed to display hierarchical data (like countries and states) within a single dropdown. Instead of using multiple cascading dropdowns, this control allows nested data to be represented in one dropdown with indentation or grouping for clarity.
Upon selection, the full hierarchical path (e.g., "USA > California > Los Angeles") is displayed as the selected value, providing clear context to the user.

2. Use Case / Business Logic

A common scenario for hierarchical dropdowns includes selecting a country → state → city. Each level depends on the choice made in the previous level. This technique enhances user experience and ensures data integrity.

3. Entities & Relationships

 

Currently, static entities are used to represent the hierarchical structure.
However, this implementation is flexible—you can also use dynamic data retrieved from APIs or database queries. The hierarchical data (e.g., countries, states, cities) can be passed as input parameters to the dropdown component, allowing it to work with both static and runtime data sources.

Entities:

• - Country: Id, Name
• - State: Id, Name, CountryId
• - City: Id, Name, StateId

Relationships:

• - One-to-many from Country → State
• - One-to-many from State → City

4. Implementation Steps

Create Static Entities in OutSystems data model.

Design the UI with Single Dropdown widgets.

Fetch Dropdown Data:

    - GetCountries: Fetch all countries.

    - GetStatesByCountry: Fetch states filtered by selected country.

    - GetCitiesByState: Fetch cities filtered by selected state.

Set Dependencies:

    - On change of the country dropdown, refresh the state dropdown using an event or client action.

    - On change of the state dropdown, refresh the city dropdown similarly.

Optional: Use Aggregates or Server Actions for fetching filtered lists.

5. Screenshots

6. Tips & Troubleshooting

• Ensure dropdowns are reset when higher-level values change.
• Use client actions to reduce server round-trips for better performance.
• Add loading states or spinners if needed.
• Validate selections before form submission.

7. Conclusion

Cascading dropdowns enhance usability and ensure users make contextually accurate choices. Implementing them in OutSystems is straightforward with proper data modeling and event-driven UI logic.