One of the most classic UI challenges is the cascading dropdown: a user selects a product category, and a second dropdown instantly populates with the relevant subcategories. In the past, this required a series of manual action sets, “On-Change” events, and careful orchestration to get right.
In a recent User Experience Expert Circle webinar, @SENIT explained how Pega Constellation’s modern architecture turns this complex task into a simple, declarative process.
Watch the video (12 minutes) →
What you will learn
From UI-First to Outcome-First
The first shift in thinking is to move away from the UI and focus on the business outcome. A request for “cascading dropdowns” is a solution, not a goal. The real outcome is that “the user needs to select a product.”
This immediately points to the data model. To achieve this outcome, you need a data reference field in your case that links to your product data. This single decision is the foundation for the entire interaction.
Let the Data Model Do the Work
With a data reference in place, you can achieve cascading behavior without writing any action sets. The magic happens in how you configure the data pages and the view itself:
- Parameterized Data Pages: Your data types for “Subcategory” should have data pages that accept parameters (like Category ID). App Studio helps create these out of the box when you build your data types there.
- View Configuration: When you add the “Category” and “Subcategory” fields to your form, you configure the source for each. For the “Subcategory” field, you simply pass the value from the “Category” field as a parameter.
That’s it. Constellation’s architecture is intelligent enough to understand the dependency. When the user changes the category, the system automatically re-queries the subcategory data page with the new parameter and updates the list. No manual refresh triggers, no onblur events - the logic is built into the data model, not brittle UI configurations.
Are Dropdowns Always the Answer? Exploring Alternatives
While cascading dropdowns are a familiar pattern, are they the best solution? Tim Senior challenged attendees to reconsider. What if the user doesn’t know the exact category?
An even simpler and often more powerful alternative is the Search and Select pattern.
Instead of configuring multiple dropdowns, you can present the user with a single component that allows them to search for a product using various criteria like category and subcategory. Constellation handles the UI generation, providing an intuitive search experience that is often more user-friendly than navigating multiple dependent lists. This approach requires less configuration and gives the user more flexibility.
Ultimately, by focusing on the data model first, you can leverage a variety of powerful, out-of-the-box patterns - from cascading lists to advanced search - to create a dynamic and intuitive selection experience with minimal effort.
Stop building brittle UI and start designing for outcomes.
