Use the create command to create a standalone Constellation DX component.

Before you begin:

Ensure that you have initialized your project before creating a standalone Constellation DX component. For more information, see Initializing a project.

NOTE:

  1. Open your preferred terminal tool.
  2. Go to your Constellation DX Component Builder project folder.
  3. Enter npm run create.

    When creating a component, choose the component type and sub-type that is most similar to the behavior of the desired final component. For more information, see Choosing the type of a Constellation DX component.

    Locate each DX component type in App Studio as mentioned below:
    • To view the Details template for a case type, click the Case types pane, select an existing case type, click the UX tab, click the Other Views tab, navigate to the Partial section, and click Details. In the Edit View: Details panel, click Add to add new Page widgets and click Edit to change the Details template.
    • To add CASE or PAGE & CASE widgets, click the Case types pane, select an existing case type, click the UX tab, click the Full case page tab, navigate to the Utilities section, and click Add.
    • To view Fields and the FORM template, click the Case types pane, select an existing case type, select a step, and click Configure view. In the Edit view: <view name> panel, navigate to the Fields section, click Add to add new Fields and click Edit to change the FORM template.
    • To view Page widgets and the PAGE layout template, click the Channels pane, select an existing channel interface, click Landing pages, and click Home. In the Edit landing page: Home panel, click Add to add new Page widgets and click Edit to change the PAGE layout template.

    For information on each type of Constellation DX component, see Types of Constellation DX components.

  4. Enter the details of the component:
    1. Enter the type of the component.
      For example: Field
    2. Enter the sub-type of the component.
      NOTE: Component authoring teams can use sub-type metadata. The template code does not use the metadata. You can change it at any time in the component definition file.

      For example: Text

    3. Enter the name of the component.
      For example: customcomp0
    4. Enter the component label.
      For example: custom component
    5. Enter the version number of the component.
      For example: 0.0.1
      NOTE: The version number of the component has no impact during run time or design time.
    6. Enter the name of the library.
      The name of the library should match the name of an existing company library.

      For example: MyLib

    7. NOTE: This step is applicable only if you are using Pega Platform™ '24.2 or earlier versions. From Pega Platform '25 onwards, for a component to be available to an application, the ruleset version to which the component is published must be included in the application.
      Provide a list of supported applications by entering the names of the supported applications, with each name separated by a comma.
      For example: uPlusApp, ABCInsuranceClaims, uBankingTool
      NOTE: If you do not provide any supported applications, the component will be available to all applications by default.
    8. Describe the component.
      For example: 
      This is a customized searchbox that filters data.

    The command line interface depicting the details to be entered for creating a Constellation DX component through the create command

    Command line interface - create

    Result:

    The standalone component is created in the following path:

    ..../<project name>/src/components/<Org_Lib_ComponentName>

    NOTE:
    • The name of the component now uses the <Org_Lib_ComponentName> format.
    • Starting from DXCB 25.1.10, the length of the component's name is limited to a maximum number of characters. The maximum number of characters varies depending on the string lengths of the organization, library, version, and other constants, and is different for standalone and library mode components.
    • Do not manually change the name of the <Org_Lib_ComponentName> folder.
    • Do not manually change the names of the classes or artifacts in the generated templated code in the <Org_Lib_ComponentName> folder.
    • To change the name of the component, use the rename command. For more information, see Renaming Constellation DX components.
    A src/components folder is created along with the necessary files required to build the component. Apart from the core files shown below that are initialized for every component, some components also generate supporting files that contain utility libraries.
                ├── src
                  ├── components
                        ├── <Org_Lib_ComponentName>
                              ├── index.tsx
                              ├── demo.stories.tsx
                              ├── config.json
                              ├── styles.ts
                              ├── create-nonce.ts
                              ├── PConnProps.d.ts

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

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

    The config.json component definition 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 Constellation DX component.

    The create-nonce.ts file contains the webpack nonce for security. For more information, see https://webpack.js.org/guides/csp/.

    The PConnProps.d.ts file contains the TypeScript definitions for PCore and PConnect APIs.

    The properties in the context of Constellation DX Components are definitions of component parameters used during design and at run time. Design settings are constant. Run-time parameters that contain field references related to the Pega data model are resolved from the actual data at run time.

  5. Run the following command to start the Storybook to view the demo:
    npm run startStorybook
  6. Modify the source files to build your own component.
    You create Constellation DX components by using generally available tools. You need advanced knowledge to create reliable Constellation DX components using the Constellation design system. For more information, see the following resources:You can also install and import third-party libraries if required for your component.
    NOTE: You can use the createAll command to create all supported Constellation DX components.

    The purpose of creating all supported Constellation DX components is only to validate that the Constellation DX Component Builder produces the templates as expected. After using the createAll command, delete the components that you do not need. As a best practice, always use the create command to create the components you need in order to minimize library size and reduce ongoing library maintenance cost.