Panels

Panel Overview

With the new release of the Cosmos Design System not only has the UX and UI received a visual refresh; but also, the information architecture’s approach has been clarified to be modular. Panels, in this new design, group similar collections of data in one place, creating consistency for our users throughout our software. 

There are two panels in Pega’s new UX architecture: the summary and preview panels. Both are comprised of a header, action button, metadata, and tabs.
 
Summary Panel
The summary panel, which resides permanently on the left side of the screen and to the right of the menu, contains slots for unlimited critical data and core actions such as editing. Relevant case data becomes more digestive and puts more control in the user’s hand to view precisely the data that is relevant to them.

Summary panel vertical tabs

Tabs in Cosmos contain unique data related to the current page or case. They show categorized information or have unique functionality related to that page or case. Tabs that contain categorized information typically show the total count of those items on the tab as well.

On cases, there are often two default tabs. The initially-active tab, “Details”, shows the case's general information, such as its creation date, author, and so on. The second tab, “Activity”, contains the conversation stream and history.

As a best practice, avoid having more than five to six tabs total to cut confusion.

Summary panel example
 
Preview Panels
The preview panel is activated through user activity, displaying additional information when the user wants to see more without having to open a new case. Content generated in the summary panel is reused throughout the UI as a preview, helping to reduce navigation and ultimately expedite workflow.
preview panel
 
Case Headers
Both versions of panels have a case header that informs the user of what object in the system they are looking at. These headers usually contain actions that a user can perform on that object. Headers are “sticky” on pages. “Case name” and “Case ID” are required elements. Other header elements, such as a case icon or status badge, are optional and should be used when the use case requires them.
 
On mobile devices, the case name and actions are the only parts that remain “sticky.” Other information moves to a second header layer that does not stick at the top of the screen. Case icons are hidden on mobile devices to save space.

Last updated: Feb 2020