The components of Constellation

With Pega’s Traditional UI architecture you build UIs by customizing Sections of your application from scratch, dragging and dropping various controls, such as text fields, buttons, and dynamic layouts. The Traditional UI architecture allowed clients to fully customize their applications. This approach provided tremendous flexibility,  but it came at the cost of all customized solutions - longer development time, increased maintenance costs, and more brittle solutions.

Constellation architecture represents a shift from customization to configuration. With Constellation, you configure your application’s Data Model, which generates a largely prescriptive overall experience. From the Data Model, Constellation generates the end-to-end experience, including the UI and actions. This means shorter development time, a more consistent user experience across Channels, easier upgrades, and minimal maintenance.

Constellation offers pre-configured UI templates, as well as prescribed navigation, workflows, and information architecture, all of which enable our clients to take advantage of our 40 years of experience in building enterprise applications and more easily build consistent, error-proof applications in record time.

The Constellation design system is a shared library of prebuilt UI patterns comprising reusable components that work together to create feature-rich UIs and productive user experiences. Patterns are preconfigured combinations of components proven to drive user productivity. This library of pre-built components enables low-code developers to quickly build powerful custom applications with out-of-the-box tools.

The Constellation design system is built on React, an open-source front-end JavaScript library for building component-based UIs. Constellation applications are Single Page Applications (SPAs). Rather than loading entirely new HTML pages to display even a single new piece of data, SPAs load a single HTML page and dynamically update it with new data from the server. React batches UI changes to minimize the number of re-renders. All of this results in less lag, better performance, and a smoother user experience.

Match the numbers in the following image to learn how the Constellation design system creates consistent user experiences:

1. Components: Reusable user interface building blocks, such as fields, buttons, tables, navigation elements, and feedback controls. Components provide the foundation for creating consistent and accessible user experiences.
2. Patterns: Patterns are proven combinations of components that support common user interactions, such as searching, reviewing, creating, and analyzing information. Patterns help teams deliver familiar, productive experiences without having to design every interaction from scratch.
3. Templates: Templates are pre-configured layouts that organize patterns and components into common application experiences, such as forms, lists, dashboards, and case views. Templates provide a consistent structure while reducing design and development effort.
4. User Experiences: User experiences are the final experiences presented to users across channels, devices, and roles. By combining components, patterns, and templates, Constellation delivers consistent, responsive, and accessible experiences regardless of how users interact with the application.

The Constellation DX API is a set of model-driven API endpoints that enable developers to view, create, and update Pega Cases and Assignments. Where the Traditional DX API was used to support non-native UIs, the Constellation DX API supports both Pega native UIs and non-native UIs. To say that another way, the same API endpoints power Pega software's out-of-the-box user experiences and its custom front-end experiences. You can build consistent user experiences for Pega applications without encoding business logic into each Channel.

The Constellation DX API isn’t just an upgrade, it is an entirely re-engineered experience. The Constellation DX API has drastically reduced networked traffic with 30% fewer requests on first load and a seven-times smaller network payload. The DX API responses are much more robust, containing all the necessary information to reproduce Views in any front-end framework, including layouts, fields, validation, conditional visibility, and actions. The Constellation DX API also includes new API endpoints, enabling additional functionality through API calls, such as following a Case or moving a Case to a new Stage.

By exposing workflows, data, decisions, integrations, and security through a single API, Constellation enables consistent experiences across Constellation applications, custom front ends, and AI-powered experiences. The following image illustrates how the Constellation DX API acts as a common layer between the application model and the experiences built on top of it: