Theme Cosmos - The Utility Panel

From PegaWiki
This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Theme Cosmos - The Utility Panel

Description A description and customization of utilities in Theme Cosmos applications
Version as of 8.5
Application Pega Platform
Capability/Industry Area User Experience

Theme Cosmos - The Utility Panel
This article has been moved over to our Pega Community here in order to align with our larger content strategy. Please update any bookmarks or links that you may have to this location.


Theme Cosmos has introduced new design patterns with improved user experience, which help maximize productivity. The utility panel contains widgets that provide quick access to information that may be relevant to users. The panel appears as a collapsible region on the right side of the UI and it is an optional part of a case (if a developer chooses no utilities for a case, that case has no utility panel).

The panel contains common utilities such as files and documents, followers, related cases, and stakeholders. A typical panel includes several utilities with the ability to add, edit, and review all assets in a modal window. The collapsed panel contains a set of icons that correspond to each of the widgets and tabs that the panel includes (see Figure 1: Custom utilities example).

Creating custom utilities

Custom utilities example
Figure 1: Custom utilities example

Before you create a custom utility for the panel, make sure that it fits the design of the widget. For example, the utility should have an icon which is displayed when the panel is collapsed, and the utility's width should match the size of the panel.

Any section can be a widget/utility with the following configuration:

  1. Create a section. For more information, see Creating sections.
  2. On the Settings tab, select Workarea widget (in full editor section mode).
  3. In the dynamic layout properties, on the General tab, set Container format to Utility, and then, in the Container settings section, add an icon for the utility (see Figure 2: Dynamic layout properties).
    Dynamic layout properties
    Figure 2: Dynamic layout properties
  4. On the Presentation tab, in the Header CSS class field, enter flex-header utility (see Figure 3: Adding helper classes).
    Adding helper classes
    Figure 3: Adding helper classes
  5. In the Advanced Presentation Options section, add a text property with the utils-badge helper class to show the count when the utility panel is collapsed. (see Figure 4: Text property)
  6. Save your changes.
    Text property
    Figure 4: Text property

Best Practices

  • Use the utility widget if the information that you add must be quickly available at all times.
  • If the information that you add needs an in-depth review, use the case summary panel instead of a utility widget.
  • Use an appropriate icon with the proper size and color, and check the appearance of the icon in the collapsed mode.
  • Consider the limitation of the widget in terms of width.