Skip to main content


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

Customize Cosmos-themed applications in a no-code environment (8.4)

Updated on May 3, 2021

Broaden your experience with the redesigned user interface introduced with the Cosmos theme which offers a streamlined case workflow and a contextualized experience when navigating between cases and case elements. The new features support both desktop and mobile applications.

Learn about the new look

Use the preview pane to see the most important case information, collaborate by using Pulse, and interact with case widgets. You can preview cases and documents directly from their links and open related cases in new browser tabs to keep the context of your current work. Conveniently switch between cases with your browser's back button and follow navigable breadcrumbs to trace relationship between related work.

If you need to return to a task later, you can now bookmark cases, new spaces, or important documents, and readily access them again in the Recents menu.

Spaces and Documents have a new look that maximizes the work area.  An expandable pane on the right side holds tabs for metadata details and utility widgets, and case information is presented in the following ways:

  • The navigation menu on the left allows for easy access to the main pages.
  • Casa data and related objects display in the Summary pane, which has a customizable interface.
  • The work area features activity and life-cycle tasks, such as ad-hoc, suggested, or completed tasks. Any collaboration or message history captured in Pulse also appears in the work area.
  • The expandable utilities pane displays widgets for participants, attachments, and tags.

The following figure shows the redesigned UI of a case:

A figure showing an example case created in a Cosmos-based application
An example case created in a Cosmos-based application

 

Personalize your Cosmos application

You can customize your Cosmos-based applications by restyling your application's Cosmos theme directly in App Studio. You can change the default colors, font styles or sizes, and more. The following figure shows the styling settings for the Cosmos theme:

A figure showing the style settings for the Cosmos theme
Style settings for the Cosmos theme

 

By entering the Design mode, you can change the overall look of your application, including its Home page, or individual sections. You can add, modify or remove tabs in the tabbed interface for various elements, such as the preview or case summary panes. You can also add or remove whole pages, and add, remove, or rearrange fields for cases as you create them in the new modal window, by using design templates.

Build flexible portals for multiple user groups

Cosmos provides you with tools to build portals that match your business needs. As a best practice, you can set up a single portal for all your users, and control the visibility of specific UI elements through personas and access privileges. Alternatively, you can create separate portals for individual user groups. The streamlined, single-design approach improves run-time performance and reduces development effort.

For more information, see Creating and managing pages for applications.

Experience Cosmos in a mobile environment

You can also benefit from many of the features of the Cosmos theme on your mobile app, such as pull to refresh, and using native search to better filter cases and action them by using the new tabbed interface. Cosmos comes with a pre-configured mobile channel, which supports the new enhancements. You can use the pre-configured channel to easily build your Cosmos-themed mobile app without the need for additional configuration.

For more information, see Learning about design systems.

  • Previous topic Modernize your interface with Cosmos React UI (8.5)
  • Next topic Explore the React UI runtime environment (8.4)

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