@pega/custom-component NPM

Overview

This document captures the basic steps of initializing Pega react project and cli commands to publish components to constellation.

Prerequisites:

Make sure infinity server is available local or SLS. node version: above 10.16.3 npm version: above 6.13.7 Infinity application ruleset should be unlocked. If you are not on ssl (https) then make sure to uncheck “Require TLS/SSL for REST services in this package” option from service packages dev and uiservice

Project initialization Steps:

Clone git

$ git clone https://git.pega.io/scm/constellation/custom-components-builder.git

Move to project

$ cd custom-components-builder

Install npm dependencies

$ npm install

Run storybook to see the demos of existing demo components

$ npm run storybook

Component creation steps

Run command
```
$ npm run create-component
```
options:
- Enter component name: Component name to be created eq., CRMNumberField
It will create a component folder under src/components folder and initializes necessary files required to build the component. Below are files index.js -> actual component rendering logic here. demo.stories.js -> demo to see in the storybook config.json -> mapping of properties or auto generated property panel configuration.
NOTE: define type under config.json to Widget or Field, if we define type as Widget then component will be visible under Widgets across authoring and you will be able to author this component in landing pages as well.
Start storybook to see the demo
```
$ npm run storybook
```
Do modify the source to build you own component. You can install and import third-party libs if required for your component.
If you are not on ssl (https) then make sure to uncheck "Require TLS/SSL for REST services in this package" option from service package - dev and uiservice
Once you're confident of your component, publish it to infinity so that it can be discoverable in authoring (design palette).
```
$ npm run publish-component
```
options:
- Select component: select the component to be published to infinity and it will update if component exists.
- Enter pega server url : Mention the server url where you want to publish component
- Enter user id: login id of pega infinity server
- Enter password: login password of pega infinity server
If you configure the above options in pega.tasks.config.json to auto select credentials.
```
{
    "components-server-config": {
        "server": "http://localhost:1080/prweb",
        "user": "baipc"
    }
}
```
Set true to "pxEnableC11nDev" when rule in infinity.
Goto authoring of view and select the component, component will be under UIComponents category. OR If authoring is not available, use view builder tool to update view metadata directly. https://agilestudio.pega.com/prweb/AgileStudio/app/agilestudio/doc/DOC-33787
Format of component going to be:
```
{
    "type": "<ComponentName>",
    "config": {
        "<PROP>": "<PROP_VALUE>",
        .....
    }
}
```
Re-save ConstellationSvcURL DSS setting (in infinity) to sync component to constellation service.

Below assets are created while publishing the component

Rule-UI-Component instance (with componentname) will be created which contains file source (js) and config.json for autogenerating property panel.