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.
The Constellation DX Components UI Gallery provides a collection of ready-to-use and customizable components. You can leverage pre-built versions of components by importing a RAP directly into your Pega application or viewing the source code in GitHub. The UI Gallery includes component examples, design requirements, UI/UX guidelines, and best practices for implementing Constellation DX components.
Note: For more information and to access the Constellation DX Components UI Gallery, see Getting Started.
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™. The compiled version of the component is uploaded to the Pega Platform during development and stored as a Rule-UI-Component. This component can then be authored in App Studio and configured into a view.
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.
Note: For more information on developing Constellation DX components and to practice creating components, see Constellation DX Components.
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.
The following image displays the Signature Capture field-level component that allows you to capture and store a signature:
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.
The following image displays the Task List widget component designed for tracking task progress:
Layout template components
Layout template components provide layouts for Constellation Views, including Details Views, Forms, and Pages, that help enhance the structure and responsiveness of Views for optimal user experience and compliance with accessibility standards. A layout template component allows you to create layouts that cannot be achieved using the out-of-the-box layout templates provided by App Studio.
The following image displays the CompareTableLayout template component, which lets you compare different objects side-by-side:
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. For information on field, widget, and layout template component tutorials, see Constellation DX component tutorials.
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?