Extensions to the Constellation UI
The Constellation design system is a comprehensive library of components that supports Constellation’s prescriptive, out-of-the-box architecture for back-office and self-service needs. While these solutions provide powerful features for building Pega applications faster than ever, we recognize that every Pega client has unique needs and so the following extension points and custom UI options are provided with Constellation.
Available Extensions
As seen in the following figure, extensions for the Constellation UI range from those that are low-code and low investment, such as Constellation Portals and Web embeds, to those that require front-end development skills and a higher investment in time and development, such as SDKs and the DX API:
Constellation Portals
Constellation’s Portals are Pega’s low-code, prescriptive option, delivering both standard and self-service out-of-the-box Portals. Constellation Portals are used to build applications with the fastest time to value.
Web embed
Constellation’s Web embed feature provides the ability to embed Constellation UI components and widgets in external web pages. This feature is most frequently used to expose Pega-powered forms to end-users in a manner that seamlessly integrates with the provider’s web app.
Although Web embed is not as low-investment as Constellation's out-of-the-box Portals, it is still relatively easy to implement. Web embeds renders a Case or page inside a web component using the Constellation design system. Web embeds do not use an <iframe> tag, and the UI can be themed to align with the parent company branding using design tokens.
Constellation DX components
Constellation DX components allow React developers to extend Pega's UI library with custom components, allowing for the creation of purpose-specific UI components that seamlessly integrate with Pega's low-code authoring experience and the Constellation design system. Once published, these components can be used in native-Pega UIs, Web embeds, or applications built on the React SDK.
Front-end developer skills, including some knowledge of React, are required to build Constellation DX components.
SDKs
For more complex UIs, where there is a strong requirement to be in compliance with a client's brand, design system, and existing web presence, SDKs are the answer for Constellation application integration.
There are currently three Constellation SDKs: Angular, React, and Web Components. Each SDK is a collection of tools that empowers front-end engineers to build Pega applications quickly with a design system other than the Constellation design system.
Constellation DX API
The Constellation DX API is a set of model-driven REST API endpoints that return Case data and UI meta-data stored in the View Rule. In addition to powering the out-of-the box Constellation UI implementation, the Constellation DX API supports any front-end technology, and can be used by skilled framework and front-end engineers to build a completely custom Constellation experience on top of the client's technology stack.
Check your knowledge with the following interaction:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?