One of the most common challenges in application design is managing complex, multi-level data. Think of an insurance application for a family: you have a single policy that contains multiple family members, and each member needs their own set of selectable healthcare plans. How do you capture this “list within a list” in a way that is both intuitive for the user and efficient to build?
In a recent User Experience Expert Circle webinar, Pega Groundbreaker @JayachandraSiddipeta broke down how to tackle this exact scenario, moving from data model design to final UI configuration.
Watch the video (17 minutes) →
What you will learn
The Foundation: A Hybrid Data Model
The key to success lies in choosing the right data model from the start. Rather than jumping straight to UI controls like tables and modals, the first step is to define the data structure that achieves the business outcome. For our family enrollment example, the solution is a powerful combination of two data types:
- Embedded Data (for the outer list): The list of family members is captured using an embedded data structure. This allows you to store a list of records (each representing a family member) as part of the main case.
- Data Reference (for the inner list): Within each family member record, a data reference is used to link to the available healthcare plans. This allows each member to have their own selection of plans pulled from an external source, without duplicating the plan data itself.
By defining this hybrid model first in Pega Blueprint, you create a solid, center-out foundation that the platform can use to generate a functional UI right after import.
From Default UI to a Tailored Experience
Once imported into the Infinity platform, this data model defaults to a standard table view where users can click “Add” to open a modal dialog and enter the details for each family member and their selected plans.
While this is a great starting point, Jaya Chandra highlighted several ways to configure the display to better suit your users’ needs:
- Table with Modal: This is the default and provides a focused, clean experience for data entry, ensuring the user isn’t distracted by other information on the main screen.
- Repeating View: For scenarios where inline editing is preferred, you can switch to a repeating view. This allows users to add and edit family members directly on the main form without pop-ups, which can be faster if the data being captured is simple.
- Hierarchical Form: For two-level data structures, you can use a hierarchical form to present the information in a tabbed layout. The user remains on a single screen but can navigate between different family members using tabs.
Handling Advanced Logic: Pre-filling Data
What if you need to pre-fill information when a new family member is added? The webinar covered two powerful techniques for this:
- For Modals (Flow Action): The recommended approach is to configure the “Add” action to launch a flow action. This gives you access to pre- and post-processing, allowing you to run a data transform to populate default values before the modal even appears.
- For Repeating Views (PY Refresh Data): If you are using an inline repeating view, you can use the PY refresh data extension point. This powerful (but more advanced) feature allows you to run a data transform to set values before the view is rendered on the screen.
The Date Model is the Key
By starting with a solid data model and leveraging the flexible configuration options in Constellation, you can effectively manage even the most complex, multi-level data requirements.
By defining the outcome and anchoring it in a solid data model first, developers can deliver more flexible, maintainable applications faster.
