Page layout

All Pega pages follow defined layout templates that help users maximize productivity by providing important information at-a-glance.

In Pega, a case is work performed by application users and automations, consists of a sequence of tasks, and leads to an intended business goal. For example, a case could be a process of hiring a particular job candidate, where an HR worker collects necessary documents, a hiring manager conducts a job interview, and an application sends an automated email with onboarding information after the candidate is approved.

Pega provides free resources that you can use to learn about case structure and working within the Pega Platform overall.

Pega case page template

Pega cases have three parts:

  • Summary Panel - an overview of the most important data and also contains the case’s primary tabs
  • Activity region - the area where most of the case activity occurs
  • Utility Panel - contains relevant attachments, team info, and other utilities

Summary panel

The Summary Panel contains four areas. Each area works independently and together to make the Summary Panel a cohesive entity.

Header

The Header is used to convey the most important information about the case at a glance. It includes the following information:

  • The case (or work item) Icon that is shared across all similar work (e.g., a claim icon for all claims work)
  • The unique ID of the case or work item
  • The title of the case or work item
  • Any quick action(s) for that item (the follow action is default)

Action Bar

The Action Bar lists the most important actions or steps to take on the current case or work item. It includes the following:

  • One or two primary or common actions to take
  • The Actions menu, which shows all the additional, custom, or out-of-the-box actions that a user may take on the work

Summary Data

Summary Data shows the most important data required to understand the case or piece of work quickly and across all contexts. Summary Data may include:

  • A list of generic or topical updates (e.g., last updated, status, etc.)
  • Core information unique to the case or work (e.g., if working with a medical insurance application – a member filing claim, specific injury, etc.)

The designer may decide the order of items and total number of items shown. We recommend including under 10 data items, in order to avoid a busy UI.

Tabs

Tabs are critical pieces of data that consolidate unique experiences that allow the user to interact with and complete the work. Examples of Tabs usage:

  • Pulse comes first by default. This includes the full conversation and important milestones in the case or work item (and may add details or context in a way that standard data fields cannot).
  • Details include information of any additional fields that are not already provided in the Summary.
  • If you need custom tabs, they are generally reserved for several types of data:
    • Child cases: Used to reveal a full list of dependencies, children, and other relationships between data. These are typically used for robust lists of data that must be displayed in entirety or in tables (for comparison).
    • Insights: Used to visualize data that reveals trend

Activity area

The Activity area contains the main interactions and activities that the user must do to act on the work. It contains the following:

  • Case Lifecycle, also known as stages
  • Tasks, which include the work-to-be done items
    • Accepting a task opens the form in place, allowing the user to reference the surrounding page content
    • Some variations of tasks allow users to add their own tasks and jump to other tasks midflow; this is common for customer service experiences
    • Upon completing one task, the user should advance to the next task they can work on
    • If a user cannot take any more work, they should be returned to the task list
    • For more information on configuring this flow, visit Pega Community
  • Tab panel content such as case details, the Pulse feed, or lists of cases

Utility panel

The Utility Panel appears as an expandable and collapsible region to provide quick access to information that may be relevant to the user. It is not intended for in-depth comparison. The Utility Panel is an optional part of a case; if a designer chooses no utilities for a case, it will not be presented. Rarely, the Utility Panel may have more than one tab of content. The Utility Panel contains the following regions:

  • Expand/Collapse toggle
  • Tabs (if any)
  • Utility area, containing common utilities such as Files & Documents, Followers, Related cases (for showing relationships to other work items within the system), and Stakeholders. Typically a few options are shown with the ability to add, edit, and review all assets in a modal window.