Modern enterprises demand flexibility and speed in delivering digital experiences. Pega’s Constellation architecture is designed to meet these needs, offering a spectrum of UI choices—from out-of-the-box portals to fully custom interfaces. While most requirements are met with standard capabilities, some scenarios require deeper customization. That’s where Constellation SDKs come in, empowering teams to implement their own design systems and unlock advanced UI possibilities.
Center-Out Business Architecture
Before diving into UI customization, it’s crucial to understand Pega’s Center-Out™ business architecture . This approach focuses on building core business logic and processes first, then exposing them to various channels—web, mobile, chatbots, and more. The same case and process can be rendered in multiple ways, all without duplicating business logic. Constellation’s UI is driven by a central API (DX API), making the UI a projection of your central logic.
From Out-of-the-Box to Fully Custom
Pega offers a continuum of UI choices:
-
Low-code, out-of-the-box UI: Fastest time to value, minimal investment.
-
Custom SDK-based UI: Maximum flexibility, higher investment, and control over design.
-
DX API: Direct integration for bespoke solutions but requires significant front-end development skills and investment.
Constellation SDKs enable seamless integration of Pega workflows into external sites, allowing organizations to use their preferred UI technologies (React, Angular, Web Components) and design systems.
Architecture and Setup
Constellation SDKs provide a set of framework-specific components that consume the Constellation JS API and DX API. They offer developer tools for creating, managing, overriding, and publishing components, plus integration with Storybook and OAuth libraries for bootstrapping and session management.
Setup Steps:
-
Download the SDK from Pega Marketplace.
-
Clone the code from GitHub (https://github.com/pegasystems).
-
Install the sample application (MediaCo).
-
Build and run.
-
Integrate your design system.
MediaCo serves as a sandbox for demonstrating SDK capabilities across different UI flavors (OOTB, Angular, React, Web Components), all pointing to the same backend case data.
Override and Create Components
SDKs make it easy to override Pega’s default components or create new ones:
-
Override: Select the component type and subtype, promote it to the SDK, and update the local component map.
-
Create: Define the component type, subtype, name, and details. Custom folders are generated for both the alternate design system and Constellation.
You can integrate SDKs into existing applications by:
-
copying and installing dependencies,
-
setting up the sdk-config and sdk component map
-
copying the overridden component (if there are any)
-
initializing the SDK environment,
-
and using mashup APIs to connect with Pega workflows.
Lessons from the Field
It is worth keeping in mind a couple of best practices gathered when working with clients on their SDK’s implementations.
-
Custom UI is attractive but comes with complexity. While SDKs make development easier, taking a solution to production requires professional skills, attention to security, and awareness of project-specific requirements.
-
SDKs are not a silver bullet. Use them judiciously and always analyze whether out-of-the-box options suffice before committing to custom development.
Community and Resources
Conclusion
Pega Constellation SDKs unlock advanced UI customization, allowing organizations to deliver seamless, branded experiences while leveraging the power of Pega’s case engine. The key is to make thoughtful, informed decisions—balancing flexibility, cost, and maintainability. Start with out-of-the-box options, and move to SDKs when your requirements demand it.
