Skip to main content

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

Configuring Cosmos React

Updated on October 21, 2022
Applicable to Cosmos React applications

Cosmos React offers a new low-code paradigm for developing applications quickly by using out-of-the-box components built around the concept of configuration. This still-expanding framework creates products that require less customization and one-off development, but promote a slightly different approach compared to application creation.

Cosmos React is a prescribed design system that promotes out-of-the-box, low-maintenance solutions. Consequently, some classic Pega Platform components work differently in Cosmos React. The following table lists some of the changes to the design process:

ComponentChange in Cosmos ReactBest practice
Controls and JSPLow-code configuration solutions are a core tenet of Cosmos React. Consequently, traditional controls, such as buttons or links, are replaced by configurable components that include the automatic configuration of buttons and associated actions.Use fields in views. The system pairs the field automatically with an optimal out-of-the box control.

For custom solutions, use DX components.

Editable data pagesThe application removes editable data pages at the end of a requestor life cycle.Use saveable data pages.
Live editingCosmos React applications do not include the Design button and do not support live editing.Use App Studio to build and edit views.
MashupsCosmos React replaces iframe-based mashups with div-based web embeds.Use web embedding.
Reports and report browserCosmos React do not support complex reporting features with sub-reports and joins.Use the Explore Data landing page and Insights.
Sections and harnessesCosmos React supports template-based views that you design in App Studio. You cannot edit views in Dev Studio.Use App Studio to build and edit views.
Styles, skins, and custom CSSTo maintain consistency, Cosmos React applications rely on the Cosmos design system for styling.Use styling tools in App Studio.
Temporary pagesCosmos React architecture is stateless, so it does not support temporary pages. Use data pages for populating data.

For more information, see the Pega Academy article Cosmos React and Constellation.

  • UI version comparison

    Pega Platform version 8.7 expands the scope of Cosmos React, a modernized UI.

  • Choosing a UI version

    Cosmos React reduces time to value and offers a new paradigm for application authoring that eliminates the need for deep Pega knowledge and front-end expertise. The goal of Cosmos React is to offer common patterns for case management applications out-of-the-box.

  • Feature limitations in Cosmos React

    By familiarizing yourself with the current capabilities and limitations of Cosmos React, you can choose the UI best suited to your business needs. In cases where Cosmos React would limit the design of your application, the best practice is to use Theme Cosmos.

  • Data visualization features in Cosmos React

    You can use data visualization and reporting features to help you conveniently explore and analyze application data, such as company sales, bugs, and team assignments. For example, in a sales application, you can visualize data about profits that your company generates in specific regions. You can then analyze the distribution of earnings across various categories of products.

  • Tools for debugging Cosmos React

    Identify issues in the Cosmos React UI more conveniently by using recommended tools and techniques. Debugging helps you adjust your application to make it issue-free and easier to maintain.

  • Application UI setup

    When building a new application, you can choose the view-based Cosmos React UI or the section-based, server-rendered Theme Cosmos UI that can also support view-based portal landing pages. You can check which UI your application is using to better understand the tools at your disposal.

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