@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 ui service

Project initialization Steps:

1. Init Project

$ npx @pega/custom-ui-components init

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

? Enter Project name Rigel
? Enter Organization name Orion
? Version 1.0.0
? Description Basic components for Rigel library in Orion system
? Git repository url (optional)
? Author Team Rigel

2. Move to project

$ cd Rigel

1. Use storybook to see the components working in isolation

$ npm start

Component creation steps

1. Run command

   $ npm run create
   

   OR

   $ npm run create MySearchbox
   
     Enter component name: Component name to be created eq., MySearchbox
   
   
     Note: This will skip all prompts and create component with only provided name. Details need to manually entered after component creation.
   

   ? Enter component name (required) Searchbox
   ? Enter module name (required) Herschel
   ? Enter component version 0.0.1
   ? Enter type of component Field
   ? Enter subtype of component DATA_CAPTURE
   ? Enter description for the component Herschel's search box to find galactic objects
   

   Searchbox component is created in /Users/yourusername/Rigel/src/components/Searchbox

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

```sh
├── src
   ├── components
        ├── Searchbox
            ├── index.js
            ├── demo.stories.js
            ├── config.json
```


*index.js* -> Actual component rendering logic here<br>
*demo.stories.js* -> Demo to see in the storybook<br>
*config.json* -> Mapping of properties for auto generated property panel configuration<br>

**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

```sh
$ npm start
```

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

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

   $ npm run 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

? Select component to publish Searchbox
? Enter pega server url https://localhost:8080/prweb
? Enter user id rigel-developer
? Enter password [hidden]
? Enter ruleset name Rigel-Basic
? Enter ruleset version 01-01-01
? Generate source map ? false

You can pre-configure the above options in tasks.config.json for these values. ```json { "components-server-config": { "server": "http://localhost:1080/prweb", "user": "user0", "password": "pwd" } } ```

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

2. 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 auto-generating property panel.