This article is part of series of articles named Constellation Flexible UI. Please check table of contents: https://support.pega.com/discussion/constellation-flexible-ui

Let's talk about Constellation architecture and what UI choices it offers, starting from out of the box portal concluding with a fully custom UI. Thanks to modern Constellation architecture which separates UI from underlaying logic (with accordance to MVP pattern) and utilizing DX API , Pega can offer variety of UI choices. They vary in amount of investment needed and they serve different use cases. Starting with most low-code approaches, Pega offers state of the art out of the box Constellation portal. This is the default choice for most customers allowing to quickly build production ready application without the need for extensive development on UI side. Please refer to this blog post to consult characteristics and benefits of out-of-the box Constellation portal. This post describes also how we can extend out of the box portal with DX Components and how to embed Pega portal into external portal. In situations, when having flexibility to create fully custom UI, that matches enterprise design system, is key, we turn to custom UI.

Use cases for custom UI

To allow for full flexibility and higher level of customization we lean toward custom UI choices. Before discussing how to implement such solution let's investigate what use cases can justify the need for increased development effort. Developing fully customized portal is especially appealing for clients wishing to implement Web Self Service type of portal. In this use case ability to style UI to match corporate branding and styling is crucial.

There are couple of options for fully custom UI but let's take here SDKs as example. They are also promoted by Pega as the way to go when custom UI is on the table. Using SDKs to create WSS style portal are advised when using out of the box WSS portal or Web Embed choice is not covering all the client needs.

High investment put in implementing SDKs pays off with customizable portal, developed in technology of client choice, let it be React or Angular. The more Pega projects in pipeline the quicker and higher return on investment. Functionalities implemented once can be easily reused across many Pega applications. This also offers end users consistent UI look and look across all application, increasing UX.

Custom UI choice with Constellation offers clients flexibility to compose end-user applications employing various underlaying backend applications that have one (or many) unified access channels. This is with assumption that each of the backend blocks was developed with API first approach. Pega and Constellation architecture is conforming to this approach. DX API is one and only one mean to interact with Infinity server. To prove it, out of the box Pega Constellation portal also uses DX APIs, the same way it will be used by any custom portal.

Main use cases for custom UI are as follows:

•  Customer wants full customized UI, including the controls and UI patterns that don’t exists in ootb Constellation UI
•  Customer would like to embed Pega supported components in their corporate website in a seamless way
•  Customer wants to implement their own Design System

The fastest and easiest method to create non-Pega Constellation UI

When talking about custom UI the most distinguished solution is to use SDKs. As we will see later, it is not the only one choice but it shall be default choice allowing clients to take advanced of Pega shipped code. Using SDKs simplifies creating of custom UI and speeds up development efforts.

Here are SDKs key characteristics, making them great choice for clients:

• Development experience centered on DX components
• Sample application provided
• SDKs for React, Angular and Web components
• Bridge that allows seamless integration with Constellation JS
• SDKs provide tools and a development workflow to integrate alternate design systems.

By leveraging the Constellation SDKs and APIs effectively, developers can extend the capabilities of Pega applications, integrate with external systems, and create tailored user experiences while adhering to best practices for maintainability and performance.

This series of articles will guide you through process of learning Constellation SDKs. Result of a learning journey will be a sample application. Demo of what we will build:

Take a look on it and get excited about what we can achieve with SDKs. In a Github repositorium you can consult the source code of sample application: https://github.com/kamiljaneczek/Sweet-Life-Pega.

Other solutions

While SDKs are the go to solution, there are some use cases in which using them might be challenging and connecting to Pega without SDKs might be good option. Some of those use cases include:

 the need to use technology that is not supported with SDKs (for example Vue.js, Svelte etc)

 dependency issues between your project and SDKs e.g. you would like to use React 18 or React 19

 development approaches. SDKs are delivered as repo not as dependency, that might be challenging in case that mono repo usage is mandated inside your organization

Possible solutions are:

• using raw HTTP REST connectivity with DX API
• setting up connectivity with ConstellationJS manually without that SDKs (reusing part of it)
• using Web Embed and styling it to match client needs. Good choice to consider when scope of your UI modifications is limited

All above choices requires expert JS knowledge and they will consume signification time to be developed as you basically start from bare metal without reusing of functionalities being delivered in SDKs