Building an Enhanced DX Component with SummaryList and SummaryItem

This tutorial demonstrates how to create a performant, reusable utility widget for the Pega Constellation UI using the SummaryList and SummaryItem components. The widget is designed for the Utilities Pane, offering collapsible field groups, dynamic data loading, and a modal-based "View All" feature for large datasets.

Thank you @RichOren for contribution. Great learning materials.

Key Requirements

• Location: The component resides in the Utilities Pane of Pega Constellation UI.
• Functionality: Displays a list of field groups, each expandable to show a table (2 columns, multiple rows).
• Collapsed State: When the pane is closed, shows an icon and item count.
• View All: If more than three items, a "View All" action opens a modal with the complete list.
• Performance: Data loading is deferred and uses indeterminate loading indicators.
• Consistency: Matches the look and feel of OOTB (out-of-the-box) utility widgets.
• Reusability: Configurable by citizen developers.

Components used

• SummaryList: Renders a list of SummaryItem components, manages loading, error, and empty states.
• SummaryItem: Displays information with visual, primary, secondary, and actions regions, using a grid layout for flexibility.
• Field Group & Table: Each field group contains a table for detailed data presentation.
• ViewAll: Modal component for displaying all items when the list exceeds three entries.

Implementation details

Read attached PDF for implementation details.

Constellation 101 Series

Enjoyed this article? See more similar articles in Constellation 101 series.