Skip to main content

Constellation DX components introduction

Constellation DX components use Single Page Application (SPA) technology. React developers can extend the UI library of Pega applications with custom components to create purpose-specific UI elements that integrate with the low-code authoring of Pega Platform™ and the Constellation design system. After publication, these components are usable in native Pega UIs, web embeds, or applications built on the React SDK.

To build Constellation DX components, you require front-end developer skills, including an understanding of React.

Creating Constellation DX components

Pega Community logo

Note: The following content, referenced from Pega Documentation, is included here to help you better achieve the module learning objectives.

While the Constellation architecture has an extensive library of out-of-the-box assets, the framework provides tools for expanding the UI by adding Constellation digital experience (DX) components. This still-evolving framework helps early adopters build interfaces tailored to their specific business needs.

Extending Constellation with DX components

NOTE: For the full Constellation DX components documentation, see Constellation DX components.

Professional front-end developers knowledgeable in ReactJS can extend Constellation, and then publish the extension back to the server for use by low-code Pega Infinity Studio developers. The extensions that you can build with DX components include widgets, templates, and controls.

As a best practice, DX components serve advanced use cases where an outcome cannot be built with out-of-the-box configuration in Pega Infinity Studio. To achieve best time to value, less code maintenance, and UI consistency across channels, leverage out-of-the-box configuration first.

The following extension points used in section-based UI architecture are analogous to Constellation DX components:
  • Custom control with Java
  • HTML rule
  • Custom JavaScript
  • Design templates (Section rules marked as templates)
NOTE: Maintenance considerations
  • Ensure you have the bandwidth to maintain the Constellation DX component and keep it up-to-date with every release of Pega Infinity. Evaluate if doing this might prevent you from upgrading to future releases of Pega Infinity.
  • Evaluate if you are able to meet the compliance standards for data privacy and accessibility for Constellation DX components. Note that not meeting these standards might lead to legal compliance issues.
To maintain a consistent, branded experience across channels, Constellation applications rely on a proprietary design system for styling. The goal of the Constellation DX component toolkit is to extend the library of existing components and create new components that integrate seamlessly with the out-of-the-box components. You can use Constellation DX components to expand the Constellation design system in specific scenarios where out-of-the-box components might not meet immediate business needs.
NOTE: As of Pega Platform '26, using a Constellation DX component will cause a guardrail warning to appear, reminding you that a custom component may introduce risks related to maintainability, accessibility, usability, and security.

Constellation UI gallery

The Constellation UI gallery is an open-source project that provides Pega customers and partners with a collection of ready-to-use and customizable components, such as widgets and templates. Its purpose is to offer inspiration, showcase best practices, and provide a foundation for implementing custom components in Constellation applications.

The UI gallery code is delivered as-is, which means that once the component is imported to an application Ruleset, the responsibility for the code in the application rests with the customer or partner who imported the component.

Pega's responsibility explicitly excludes:

  • Support for any accessibility or localization issues.
  • Support for issues that arise after a Pega Platform™ upgrade or a version update to core technologies such as React.
  • Support for any gallery component included in your application.

For more information, see the Support policy at the project GitHub page.

Types of Constellation DX components

Pega Community logo

Note: The following content, referenced from Pega Documentation, is included here to help you better achieve the module learning objectives.

You can use the Constellation DX Component Builder (DXCB) to create various types of Constellation DX components. DXCB supports selected App Studio components. Choose the type and sub-type of the component such that it is most similar to the behavior of the desired final component.

DXCB contains a comprehensive set of sample code that can be used to create your own Constellation DX components. There are three types of component samples and each component type has several sub-types.

You can create the following types of Constellation DX components:
NOTE:

Layout templates

Layout template components can be used in form, details, and page contexts.

The following video shows an example of the edit view of a form template and the various form templates available. In the Workflow tab of a case type, a step is selected and Configure view is clicked. In the Edit View: Determine Category window, Edit is clicked to view the types of form layout templates available. The Edit button is visible only when additional custom form layout templates have been published.

For more information, see Layout templates.

Widgets

Widget components can be used to add widgets to the case utilities panel that provides additional case-related functionality, such as adding stakeholders, followers, or attachments to a case. Page widgets can be added to landing pages where the context is a landing page context and is not specific to a case. An example of a page widget is the ToDo widget.

The following video shows an example of a Stakeholders widget being added to the Utilities section. In this video, the UX tab of a case type is open. In the Full Page View tab, + Add is clicked within the Utilities section. From the list of available widgets, the Stakeholders widget is selected and Add is clicked. The Preview now refreshes and displays the Stakeholders widget added to the Utilities section.

For more information, see Widgets.

Fields

Field components can be used to replace out-of-the-box field components with your own implementation.

The following video shows an example of a Terms and Conditions URL field component. In this video, the Edit view window of the Contact Info form is open. Under the Fields section, + Add is clicked. From the list of available fields, the Terms and Conditions URL field is selected and Add is clicked. The Preview now refreshes and displays the Terms and Conditions URL field.

The URL Component is an extension DX component created with DX Component Builder. The video proceeds to show how to configure the Terms and Conditions URL field as a URL Component. Under the Fields section, the Configure icon for the Terms and Conditions URL field is clicked. In the Configure field: Terms and Conditions URL window, under the Display as list, URL Component is selected and Save is clicked. The Terms and Conditions URL field is now configured as a URL Component.

For more information, see Fields.

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.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice