Skip to main content

Constellation DX Components

The Constellation design system library provides a comprehensive collection of UI components. The most common Case management patterns are built into Constellation’s configuration options. However, most clients have unique needs, with requirements often falling outside of these common Case management patterns. You can use Constellation DX components to address unique requirements.

Constellation DX components

Constellation DX components are an extension to the Constellation design system’s UI component library. Constellation DX components allow you to add purpose-specific UI components to an application that seamlessly integrate with View authoring in App Studio.

Constellation DX Components are built using React, which is an open source JavaScript library. In addition to understanding React, developers of Constellation DX components also need to know how to call different Constellation APIs, such as PCore and PConnect, as well as how to integrate the custom components into Pega Platform™.

Note: For additional information on creating Custom DX Components, see Constellation DX Components.

The cost of Constellation DX components

Constellation DX components enable developers to customize Constellation applications, but this customization comes at a cost. Constellation is built on the paradigm of configuration over customization. Building custom components has the potential to offset the advantages of Constellation by introducing more development time, as well as the likelihood of more bugs and more complicated upgrades.

Constellation DX components should only be used when you are certain that the functionality that you are implementing is necessary to the client’s Case management process and cannot be obtained by using out-of-the-box patterns and workflows that are built into Constellation.

The Constellation DX component builder

The first step to creating Constellation DX components is to install the DX component builder from npm. 

Note: Npm is the the default package manager for the JavaScript runtime environment Node.js. For more information about npm, see the npm website. To install the DX component builder from npm, see Using Custom Components in Constellation on the npm website. (Note that Pega does not maintain the npm website and is not responsible for problems with the link).

The Constellation DX component builder provides a CLI tool for initializing and scaffolding your project, as well as tools for publishing your component and making it available in App Studio.

There are three types of Constellation DX components that you can build:

  • Field components
  • Widget components
  • Layout template components

Field components

Use a field component to display a field in a manner that cannot be achieved with any other out-of-the-box component. For example, the LocationInput field component takes a user’s entered location and adds in the Google Maps utility.

Field components such as the TextArea, Button, and Slider allow developers to configure interactive UI elements such as text boxes, buttons, and sliders.

Widget components

Widget components improve usability through built-in logic and functionality. They are typically a collection of multiple out-of-the-box Constellation UI components combined in a unique way. Use a widget to display interactive self contained information.

FileInput is an example of a Widget component. The FileInput component lets a user upload files or attachments using drag-and-drop or by opening the user’s file explorer when clicked.

Layout template components

The layout template component provides layouts for the field and widgets on a form. Use a layout template component to create layouts that cannot be achieved using the layout templates provided by App Studio.

An example of a Layout template component is the Grid. The Grid organizes the layout of an application in a grid format of columns and rows. The intersection between a column and row creates a container. Each container includes an item. The relationship between the containers and items builds the structure of the layout.

Note: For more information about the available out-of-the-box UI components, to view a demo, working code snippets, and API documentation, see Constellation features and UI architecture.
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?

Want to help us improve this content?

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