@pega/custom-ui-components

Overview

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

Prerequisites:

Make sure PRPC Infinity server is available for use.

node version: 12 and above

npm version: 6 and above

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:

1. Init Project

$ npx @pega/custom-ui-components init

This will prompt for setting up the project with necessary details/fields

1. Move to project

$ cd custom-ui-components

1. Use storybook to see the components working in isolation

$ npm run storybook

Component creation steps

1. Run command

   $ npm run custom-component create CRMNumberField
   

   OR

   $ npm run custom-component create
   
     Enter component name: Component name to be created eq., CRMNumberField
   

   It will create a src/components folder and initializes necessary files required to build the component. Below are files

   ├── src
      ├── components
           ├── index.js
           ├── demo.stories.js
           ├── config.json
   

   index.js -> Actual component rendering logic here
   demo.stories.js -> Demo to see in the storybook
   config.json -> Mapping of properties for 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.

2. Start storybook to see the demo

   $ npm run storybook
   

3. Do modify the source to build your own component. You can install and import third-party libs if required for your component.

4. Once the changes for components are finalised, publish it to Infinity so that it can be discoverable in authoring (design palette).

   $ npm run custom-component publish
   

   options:

   • Select component: select the component to be published to Pega Infinity Server. It will update if the 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
   • Enter ruleset name: ruleset name where the component needs to be published
   • Enter ruleset version: ruleset version where the component needs to be published

   You can pre-configure the above options in pega.tasks.config.json for these values.

   {
       "components-server-config": {
           "server": "http://localhost:1080/prweb",
           "user": "user0",
           "password": "pwd"
       }
   }
   

5. Once publish is successful, we can now use the newly published component in view authoring from App Studio.

6. Re-save ConstellationSvcURL DSS setting (in infinity) to sync components to constellation service.

NOTE:

Below assets are created while publishing the component

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