Page layout basics

Page layout overview

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

Defining a Pega Case

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.

The Pega case page template

Case layout page

Pega cases have three parts:

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

Summary Panel

Case summary

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

1. 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)

2. 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

3. 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.

4. 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:

  • Activity 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 trends

Activity

Case activity

Activity 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
  • Assignments, which include the work-to-be done items
    • Taking an Assignment opens the form in place so the user can reference the surrounding page content
    • Some variations of Assignments allow users to add their own tasks and jump to other tasks midflow; this is common for customer service experiences
    • Upon completing one Assignment, the user will be automatically advanced to the next assignment they make take. The user will receive a message that the previous work is complete
    • Once the user cannot take more work, they be returned to the Assignment list.
  • Tab panel content such as case details, the activity feed, or lists of cases

Utility Panel

Case utilities

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 & Docs, 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.

Last updated: Nov 2020