In traditional UI development, keeping information on a form synchronized and up-to-date often meant wrestling with a web of action sets, screen refreshes, and custom logic. A simple change in one field could require a dozen steps just to make sure everything else on the screen reacted correctly.
In a recent User Experience Expert Circle webinar, Senior System Architect @Aditi_Mehta demonstrated how Pega’s Constellation design system handles these dynamic scenarios automatically, freeing developers from manual configuration and focusing instead on business outcomes.
Here’s a look at some common form-related challenges and how Constellation’s modern, declarative approach solves them.
Watch the video (15 minutes) →
What you will learn
Scenario 1: Showing More Details About a Selected Item
The Old Way: You need a dropdown list of products. When a user selects one, you want to show more details to help them confirm their choice. This would typically require an “On-Change” action that refreshes a section of the screen to display the new information, often in a pop-up.
The Modern Way: The focus shifts from the action to the data. The business outcome is simple: “the user needs to select a product and see more details.”
- Data Model First: You start by creating a Data Reference field for the “Product.” This tells the system you are linking to a record that exists elsewhere.
- Configure the View: Instead of building actions, you simply configure how this data reference should be displayed. Constellation offers several out-of-the-box options with zero coding:
- Additional Details: Show key product details directly below the field once a selection is made.
- Preview Panel: Display a rich, multi-tab preview in a side panel, giving the user full context without leaving the form.
- Highlighted View: If a pop-up is desired, you can configure the details to appear in an elegant modal dialog.
The key takeaway is that these powerful UI patterns are simple view configurations, not complex, manually-built event listeners.
Scenario 2: Calculating Values in Real-Time
The Old Way: A form requires a calculation, like totaling the cost of items in a list. The common request would be for a “Calculate Total” button that a user must click to trigger the logic.
The Modern Way: Buttons for simple calculations are a thing of the past. The outcome is to “always see the correct total cost.”
This is achieved declaratively. By defining the “Total Cost” field with a simple calculation (e.g., Sum of ‘Cost’ from a list), the UI automatically updates the total in real-time as the user adds, removes, or changes items. There is no need for a button, no action sets, and no screen refreshes - the data model handles it all.
Scenario 3: Cascading Fields and Automatic Resets
The Old Way: You have cascading dropdowns for Region, Country, and City. If a user changes the selected Country, the City field needs to be cleared. This required configuring specific “On-Change” events to clear the values of dependent fields.
The Modern Way: This is handled by Form Refresh Settings, a powerful feature configured directly on the flow action.
You can set a “hook” to watch a specific property (like Country). When its value changes, you can configure an action - such as running a data transform - to reset the City and State fields. This provides developers with fine-grained control over form behavior when needed, but in a structured and maintainable way.
Scenario 4: Keeping Lists Updated Across Multiple Users
The Old Way: If one user adds a new transaction to a case, how does another user working on a related task see that update? This was a significant challenge, often requiring custom push notifications or forcing users to manually refresh their screens.
The Modern Way: This is solved using the built-in messaging service. By calling a simple DX API (Publish Data Pages), you can notify the browser that a data page has been updated.
The user’s screen doesn’t just refresh unexpectedly. Instead, a clean banner appears saying, “New records have been added. Click to refresh.” This gives the user control while ensuring they are always working with the most current data, a critical feature for collaborative processes like fraud investigation or procurement.
By moving this logic into the data model and declarative configurations, Constellation makes forms more intelligent, responsive, and far easier to build and maintain.
