Introduction

Displaying multi-level data is a common requirement in business applications. This article explores how to achieve that within Pega Constellation, focusing on a use case where users are selected via the Search and Select pattern, saved into an embedded page property, and displayed in a two-level structure:

1. List of users selected on a case

2. List of challan records for each user (nested view)

This guide walks through various design options for displaying such nested data and evaluates them based on implementation approach, usability, and guardrail adherence.

Design Options

1. Using Preview Mechanism (OOTB)

This out-of-the-box approach allows users to:

• View a list of users in a table.

Display of the List of Users in Table

The users are presented in a structured table format. One of the column values (e.g., First Name) is used as a clickable link.

On Hover of the Link

When hovering over the linked value, two options appear:

• Preview

• Open in New Tab

Preview Link Behavior

Upon clicking Preview, the data object opens in a slider view on the right side of the screen, maintaining the context of the current case.

Open in New Tab Behavior

Clicking Open in New Tab opens the selected user object in a new tab within the same browser window.

Direct Link Click Behavior

Clicking directly on the link opens the user object in a new view, replacing the current work area.

In both the above scenarios (Preview and Open in New Tab), the content displayed is the same, but the navigation experience differs.

Note: This pattern only works when the user list is sourced from a data page, not an embedded page property.

2. Using Dynamic Tab List View (OOTB)

Users are displayed as individual tabs using the Dynamic List View pattern. 

Each tab contains:

• Detailed user information

• Associated challan records

Benefits:

• Seamless navigation without modals

• Easy to configure with data pages

Limitation:

Does not work with embedded page properties—requires sourcing from a data page.

3. Using Custom Modal Mechanism (Custom DX Component)

In this approach:

• A custom link in the user table triggers a modal window to display the user’s challan data.

• A custom DX component is used to handle modal invocation and view rendering.

Reference:

How to launch a flow action or view in modal in Constellation

Benefits:

• Works with embedded page properties

• Full control over UX and rendering

Trade-off:

• Requires custom development and adherence to Constellation guardrails

Comparison Table

Closing Note

When designing multi-level data views or complex UI requirements in Pega Constellation, follow this strategic approach:

1. Check if the feature is achievable through OOTB configurations.

2. Evaluate partial solutions using OOTB options, balanced with client acceptance and minimal user training.

3. If critical, consider building custom DX components in line with Pega’s Constellation best practices.

This design-first methodology ensures faster delivery, maintainability, and enhanced user experience.