When working with Pega's Constellation design system, a common question arises: what do you do when the extensive library of out-of-the-box (OOTB) components doesn't quite meet a unique UI requirement?
This is where you can unlock advanced customization by extending the Constellation UI with DX Components. I've seen teams use this capability to solve complex presentational challenges. However, this path requires careful consideration. In this post, I'll share what DX Components are, when you should (and shouldn't) use them, and what you need to be successful.
What are DX Components?
Let's start by defining what we mean by "DX Components." While Constellation provides a rich set of standard UI elements, the DX Component framework is our supported method for creating your own unique, reusable UI elements.
Crucially, this framework is designed to maintain a clear separation between business logic and the presentation layer. This is a cornerstone of Pega's center-out™ approach, ensuring that your UI customizations are future-proof and don't create the maintenance and upgrade challenges that were common with traditional UI development.
To Build or Not to Build? Key Considerations
One of the most critical considerations is not how to build custom components, but when and if you should. My advice is to always exhaust OOTB solutions first. The power of Pega's platform lies in its low-code capabilities, and deviating from that should be a deliberate, well-justified decision.
Before you start building a DX Component, I urge you to ask these questions:
| Question | Purpose |
|---|---|
| Can the business outcome be achieved with OOTB components? | Challenge the requirement. Is a custom element truly necessary, or can a standard pattern suffice? |
| Is this a reusable component that adds significant value? | Avoid one-off solutions. A good custom component should be reusable and address a significant gap. |
| Are you prepared to own the component's entire lifecycle? | This is a high-code path. You must own the testing, accessibility, security, and long-term maintenance. |
My philosophy is clear: custom components are a powerful tool, but they represent a higher investment. Prioritize the speed and maintainability first, extend only when absolutely necessary.
Are You Ready? Prerequisites for Success
If you have a valid use case for a DX Component, being prepared is the key to success. We can break this down into three core areas:
-
People & Skills: You need professional front-end developers with strong skills in React. They must also have expertise in modern development best practices, including security, accessibility (WCAG), and creating stateless, reusable components.
-
Tools: Your developers will need access to standard front-end development tools, including Node.js, NPM, and a source control repository like GitHub. This requires organizational support to ensure developers can install and use these tools without friction.
-
Process & Governance: The project and client must be prepared to own the component. This includes a clear process for the development lifecycle, rigorous testing, ensuring accessibility compliance, and a plan for long-term maintenance and future upgrades.
Inspiration & Learning: The UI Gallery
For teams looking for inspiration, the Constellation UI Gallery on GitHub is an invaluable resource. It's a collection of sample DX Components built by our product teams and the community.
However, I want to emphasize a critical point: these components are provided "as-is" under an open-source license. Think of them as hands-on examples and best-practice showcases to learn from and accelerate your development, but the responsibility for extending, enhancing and maintaining falls to you once you adopt them; just like any other open-source code.
Clarifying a Common Question: DX Components vs. SDKs
We often see confusion around the difference between DX Components and the Constellation SDK, so let's clarify that.
| Tool | Purpose |
|---|---|
| DX Components | Use these to extend the existing Constellation design system. You are adding new, configurable UI elements that live within the context of the OOTB Pega Portal. |
| Constellation SDKs | Use these to build an entirely new channel, typically when there is a requirement to use an alternative, external design system (e.g., a client's in-house React component library). |
Essentially, you use DX Components to add to the existing Constellation experience, whereas you use the SDK to build a completely new front-end experience powered by Pega.
I hope this guide helps you navigate the decision-making process for UI customization. By prioritizing out-of-the-box solutions and reserving DX Components for high-value, unique requirements, you can build powerful and maintainable applications with Pega Constellation.
Want to learn more? Watch the full webinar here.
I encourage you to watch our full webinar replay, we have 2 session to choose from and plenty more detail.
