Skip to main content

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

Cosmos taxonomy

Updated on December 13, 2022

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.

The key components of a Cosmos UI include the home page, landing pages, and the full case page. You can configure each of these components in the low-code authoring environment of App Studio.

Cosmos portal

Components of a Cosmos portal
The application main regions are the top header with search and the expandable menu on the left.
Helps you to define how people interact with your application. Portals represent the main interface of your application, and provide case workers, managers, and other users with the tools that they need to do their work.
The application displays landing pages and case pages in the main area of the portal. The left side of the portal features an expandable menu that helps the users navigate the application and access notifications and recently viewed items. Depending on your business needs, the portal can also include either a full application header, or a compact header in the main menu consisting of an application name and logo. For more information, see Organizing the contents of a portal.
Application header
If space is not a priority, you can add a header to the Cosmos portal. Although global search is available away from the header in the main navigation, the application header can help your users identify the application at a glance, and provides a central location for search. The header includes an application icon, a search bar, and an operator menu icon. For more information, see Defining a portal header.
Main navigation
Helps users navigate to landing pages, create new cases and – if the application has no header – access search features. The menu also holds notifications and recent events, as well as user settings in portals in compact mode. If your application does not use a header, the main menu also includes a global search box. For more information, see Organizing the main navigation for a portal.
Preview panel
Provides users with tools to engage with a business object without context switching. The preview panel reuses the structure and style of the summary panel of the full case page. For more information, see Adding tabs to the summary panel.

Cosmos full case page

Regions in a full case page
The full page is divided into the summary panel, the work area, and the utilities panel.
Work area
Defines the space where users process their cases and access the bulk of case information. For more information, see Working with App Studio forms.
Summary panel
Displays the critical data of the case. The structure and style of the summary panel is the same as in the preview panel and the mobile full case page. For more information, see Customizing the case details section.
Utilities panel
Holds widgets and utilities that help users work a case, such as lists of attachments, case followers, or tags. For more information, see Widgets in Cosmos React.

Summary panel

Summary panel details
The left-hand summary pane includes a case header, a summary data section, and a tabs menu.
Case header
Holds the case name, icon, and number, as well as the case edit menu and the case actions menu. For more information, see Configuring general case type settings and Configuring and working with optional actions in case types.
Summary data
Displays highlighted primary and secondary fields for your case. For more information, see Customizing the case details section.
Provide users with access to additional data. The application displays the content of the current tab in the bottom half of the work area. For more information, see Adding tabs to the summary panel.

Cosmos work area

Case work area
The top half of a work area is a task list. The lower half shows the content of a selected tab.
Case life cycle
Displays the stages and steps of your case and indicates the current stage. The case life cycle chevron display is optional, and you can remove it in the full view configuration.
Enables users to navigate to and launch tasks in the case.
Displayed tab content
Shows the contents of the current tab selected in the summary panel.

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