Panels

Panel overview

With the release of Pega's 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 group similar collections of data in one place, creating consistency for our users throughout our software.


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.

The summary panel tabs in Cosmos cases 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, “Activity”, contains the conversation stream and history. The second tab, “Details”, shows the case's general information, such as its creation date, author, and so on. As a best practice, avoid having more than seven tabs total to cut confusion.

Summary panel

Preview panel

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

Last updated: Oct 2020

Utilities panel

The utilities panel houses widgets that further support the current case's context.

The three most common widgets within the utilities panel are predictions, followers, and attachments. Predictions showcase any significant insights about the case. Followers present quick links to anyone associated with the case. Lastly, attachments provide a reference to all attachments that have been associated with the relevant case content.

The utilities panel is displayed on the right side of the UI. The user has the ability to close the panel at anytime. In this case, the utilities panel collapses into a more compact version of the component. The compact state contains a set of icons that correspond to each of the utilities included within.

Last updated: Oct 2020