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™.
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.
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.
This Topic is available in the following Module:
Want to help us improve this content?