Pega constellation DX component

1. Install NodeJS
2. npm i @pega/custom-dx-components
3. npx @pega/custom-dx-components@~24.2 init
4. npm run create (To create component)
5. npm run startStorybook
6. npm run buildComponent

 For easier organization and maintenance, you can group components in libraries. The component libraries can be created in different rulesets, which in turn can be used for different applications.

When you publish a component to Pega Infinity™, it creates or updates a Rule-UI-Component instance. This instance is pushed by Pega Infinity to the configured Constellation App Static Service. The Rule-UI-Component instances are exported in a RAP file for deployment to other Pega Infinity environments.When a component is published, a zipped version of the component folder is stored as a Pega Infinity Rule-UI-Component rule instance. Pega Infinity automatically pushes this component zip file to the Constellation App Static Service for access during UI rendering.

The naming convention of the component key is <organization>_<library>_<component

• organization - This value is found in the organization property of the package.json file in your project's root folder.
• library - This value is requested when the component is created and can also be set as default in the tasks.config.json file.
• name - This value is requested when the component is created.

Types of constellation DX components

Field

Allows to configure interactive UI elements such as text boxes, buttons, and sliders.

Widget

Improves usability through built-in logic and functionality. For example, the attachment widget allows users to upload documents.

• PAGE (Portal widgets) - This widget can be used only in landing pages.Example, Todo and App announcements.
• CASE (Utilities pane widgets) - This widget can be used only in case views.
• PAGE & CASE (Both) - This widget can be used in portal landing pages, and the Utilities pane for both case and data views. Example, Pulse

Layout template

Provides layouts for the fields and widgets on a form. Grid, Flex are the basic React components for layouts. Layout templates provide slots called Regions. Authors can add fields, field groups, views, widgets into the regions. 

You can create three types of Constellation DX component layout templates using the Constellation DX Component Builder:

• Details : Applying the Details template renders the child components referenced in the Regions as read-only. Example: Details of Case view and Data type, Partial views use Details template use Details template.
• Form : Forms are designed to efficiently collect data from the users of your application
• Page : Page layout templates control the layout of landing pages. 

https://github.com/pegasystems/constellation-ui-gallery

https://github.com/pegasystems/constellation-ui-gallery/releases