Skip to main content


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

Theme Cosmos

Updated on December 13, 2022

Theme Cosmos applications feature a consistent and familiar section-based UI that helps your business build a strong presence across technologies and channels. By basing an application on Theme Cosmos, you gain access to a library of low-code components that require less effort to use and maintain.

The mature component library

Theme Cosmos is a section-based version of the Cosmos design system that helps you build powerful case management applications in compliance with Pega Platform best practices and guidelines. By relying on a library of ready-to-use templates, patterns, and themes, Theme Cosmos helps you reduce development effort and focus on your section-based application.

Other UI versions

Cosmos React is a Cosmos design system component library designed to support view-based architectures. Evaluate whether Cosmos React supports your use case before building a new application, and continue using Theme Cosmos where the classic, section-based architecture best serves your business needs.

For more information, see Feature limitations in Cosmos React and Choosing a UI version.

Cosmos design system

Pega Platform uses the Cosmos design system as its main product design resource. The system provides a consistent library of components that form the entire user experience for both customer-facing applications and Pega Platform itself.

Cosmos relies fully on ready-to-use page structures, interaction pattens, and prefabricated UI components for more efficient development and performance. In addition, a more modern design and increased focus on intuitiveness help save time on application updates and user training.

Depending on the architecture that you use, the Cosmos design system has two versions: Cosmos React, which serves the view-based architecture, and Theme Cosmos, which relies on sections.

When creating a new application, you can choose between a view-based Cosmos React UI, or a section-based Theme Cosmos UI, which can be further expanded to include hybrid React components.

Hybrid mode

In addition, Theme Cosmos applications can work in hybrid mode, a mixed architecture that supports React-based portal authoring and tables in an otherwise section-based UI. This approach produces a more efficient and dynamic interface, while leaving most Pega Platform functionalities unchanged. The mixed architecture of the hybrid mode helps you prepare your application for future changes.

Note: In Pega Platform version 8.7, the hybrid mode is the default UI setup for new Theme Cosmos applications.

For more information, see Hybrid mode.

  • Cosmos taxonomy

    The Cosmos design system maximizes productivity for the core guided workflow constructs of the Pega Platform. By utilizing Cosmos' extensive library of ready-to-use page structures, interaction patterns and UI components, you can deliver excellent interfaces while focusing on critical business logic and data, rather than building a UI from the ground up.

  • Learning about core user interface principles

    Before you start creating the user interface in your application, learn about the available tools, best practices, and the basic principles that drive user experience design.

  • Configuring portals

    Portals represent the main interface of your application, and provide users, such as case workers, managers, and customers, with the tools that they need to do their work. By configuring portals, you can set up an optimal environment for each of these user groups with minimal effort.

  • Working with App Studio forms

    Use App Studio to customize the out-of-the-box forms that capture user input in cases, and achieve quick results with minimal effort. When you organize the fields in a form, you can clearly communicate to users what tasks they need to perform to process an assignment in a case.

  • Working with Dev Studio forms

    Forms capture information that your application needs to process cases. By configuring intuitive forms in Dev Studio, you can help your users understand the tasks that they need to perform.

  • Using business logic to drive user experience

    Build an interface whose behavior changes depending on the needs of its users. By applying business logic to UI design, you can ensure that users see only the information that they need, and interact only with the functions that are relevant to them, which improves usability and saves time.

  • Styling your application with design systems

    Design systems help you introduce consistency to the applications that you build. By choosing to use a design system, you can scale your designs to maintain a unified presence across a number of platforms with less effort.

  • Debugging your UI

    Debug your UI efficiently by directly modifying interface elements that are rendered on the current page. The Live UI tool helps you make quick UI adjustments at run time and publish or discard your changes immediately.

  • Localizing your application

    Localizing your application helps users work in their preferred language, which improves their experience and ensures a better understanding of the product. By localizing an application, you can expand your operations to new markets regardless of language barriers.

  • Configuring an accessible UI

    Reach the broadest audience for your application by building a user interface that addresses the needs of users with disabilities. Designing a UI for assistive technologies, such as screen readers, is important for compliance and provides essential access to users who have visual impairments.

  • Building custom UI capabilities

    Dev Studio offers a number of tools that you can use to further customize your application.

  • Hybrid mode

    The hybrid mode in Theme Cosmos blends the speed and look of selected section-based capabilities into the existing Pega Platform architecture. By supporting a mixed architecture, the hybrid mode helps you to progressively prepare your application for future changes.

  • Configuring Docker authentication

    Set up the first download of a Docker image from a Pega repository by configuring a Docker authentication config.json file. This configuration is required when installing the Constellation UI Service with Docker for the first time.

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