Skip to main content

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

Structure of a Cosmos DX component

Updated on May 27, 2022

Learn about the structure of Cosmos digital experience (DX) components in an application. An organization can have several applications. Each application can use several customized components. For easier organization and maintenance, you can group components in libraries. The component libraries can be created in different rulesets, which in turn can be used for different applications.

When you publish a component, it is published as a Rule-UI-Component in which you can view all the instances of the component. Creation of a Rule-UI-Component generates a component key that contains the name of the rule.

To provide namespace separation for Cosmos DX components, the naming convention of the component key is <organization>_<library>_<component> and is derived when the component is created.

  • organization - This value is found in the organization property of the package.json file in your project's root folder.
  • library - This value is requested when the component is created and can also be set as default in the tasks.config.json file.
  • name - This value is requested when the component is created.

When you publish a component, you specify the ruleset and version where the component will be stored.

Note: Because the component key aligns with the organization and library, update the component key whenever the organization and library change.

When a component is published, a zipped version of the component folder is stored as an Infinity Rule-UI-Component rule instance. Infinity automatically pushes this component zip file to the Constellation UI Service for access during UI rendering.

Cosmos React supports the following custom components:

Allows to configure interactive UI elements such as text boxes, buttons, and sliders.
Improves usability through built-in logic and functionality. For example, the attachment widget allows users to upload documents.
Layout template
Provides layouts for the fields and widgets on a form.

For more information about the out-of-the-box components that are available in Cosmos React, see Cosmos React.

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. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us