Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Creating Cosmos DX components

Updated on May 27, 2022

Create unique components to extend your UI features.

Before you begin:

Ensure that you have authentication to access the resources in the Pega Infinity Server to list, publish, or delete components. For more information, see Authenticating Pega Infinity Server user access.

  1. Open your preferred terminal tool.
  2. Enter npm run create.
  3. Complete the component details:
    1. Enter the name of the component.
      For example: customcomp0
    2. Enter the component label.
      For example: custom component
    3. Enter the version number of the component.
      For example: 0.0.1
    4. Enter the name of the library.
      The name of the library has to match the name of an existing company library.
      For example: basic
    5. To provide a list of supported applications, enter the names of the supported applications, each name separated by a comma.
      For example: uPlusApp, ABCInsuranceClaims, uBankingTool
      Note: If you do not provide any supported applications, the component is available for all applications by default.
    6. Enter the type of the component.
      For example: Field
    7. Enter the subtype of the component.
      Note: Component authoring teams can use subtype metadata. The template code does not use the metadata. You can change it at any time in the config.json file.
      For example: Text
    8. To describe the project, enter a description of the component.
      For example:
      This is a customized searchbox that filters data.
    Note: You can skip entering the details of the component now and manually enter the details in the tasks.config.json after the component is created. To skip entering the details, run the following command:

    npm run create <enter_component_name>

    Result:

    The component is created in the following path:

    /Users/your_user_name/project_name/src/components/component_name

    A src/components folder is created and the necessary files required to build the component are initialized as seen below.

        ├── src
           ├── components
                ├── <component_name>
                    ├── index.jsx
                    ├── demo.stories.jsx
                    ├── config.json
                    ├── styles.js
    

    The index.jsx file contains the actual component rendering logic.

    The demo.stories.jsx file contains the demo that can be viewed in the storybook.

    The config.json file contains the mapping of properties for configuring the auto-generated property pane. This property pane is displayed in App Studio when an application is being authored to use the custom component.

    The properties in the context of Custom DX Components are definitions of component parameters used during design and at run time. Design settings are constant. Run time parameters which contain field references are resolved from the case at run time.

  4. Run the following command to start the Storybook to view the demo:
    npm start
  5. Modify the source files to build your own component.
    You create custom components by using generally available tools. You need advanced knowledge to create reliable custom components in Cosmos React. For more information, see the following resources:You can also install and import third-party libraries if required for your component.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us