Defining case views specific to case types
|Description||Best practices for defining case views specific to case types|
|Version as of||8.4|
|Capability/Industry Area||Case Management|
Defined view encourages consistency across various designs, case types, and screen sizes. When all elements and spacing follow a uniform framework, the human eye groups elements into shapes and shapes into patterns, thus making UX easier to understand at a glance.
Case view structure
A case view is visually segmented into the three parts:
Data: Contains most critical or unique information that needs a quick glance or an easy grasp.
Typical information inside the Data region:
- Metadata – case title, case ID, case status, etc.
- Core data – case summary, category, version, etc.
- Related content - tasks, recent items, details, etc.
Activity: Contains user actions, such as user form fields, buttons, detailed information of current case stage, or what must happen next to complete the stage.
Typical information inside the Activity region:
- Life cycle assignments – case life cycle, assignments actions, ad-hoc assignments, etc.
- User actions – case forms to input the data, actions to proceed the case stage, etc.
- Collaborations – Pulse, case details, case feed, etc.
Utilities: This part contains case-related data like case documents, case contributors, and any related information.
Typical information inside the Utility region:
- Attachments – documents related to the case.
- Case progress – case progress widget, assignee, case owner, etc.
- Participants – case contributors.
Components for designing a case view
An ideal way to define a case view is to use component-based views in which all components have their own views that, when combined together, can define a case view. Most common components for defining a case view are:
Well-designed forms are a crucial component of any view. Follow best practices of form design, supported by tools in Pega Platform™, to deliver the best experience.
Basic elements of a form layout are:
Form title – A form layout should contain a proper title and it should be easily understandable.
Form fields – There are various form controls available in Pega Platform, including text inputs, selection controls, pickers, message containers, buttons, and action menus. All these controls should be properly used based on the case view or information.
Form layouts – Some items in a form are more closely associated than others. Examples of these connections are:
- First and last name
- Date ranges
- City, state, and postal code in an address
When you have this type of data, make the grouping clearer by listing them in the same line.
Pega Platform provides various components to display information. The most common components are user avatars, badges, banners, videos, cards, case life cycle, Pulse, and other utilities.
A case view can be defined by using different panels that are available in Pega Platform. Some of the major panels are:
Summary panel – Resides permanently on the left side of the screen and to the right of the menu, and contains slots for unlimited critical data and core actions, such as editing.
Preview panel – Activated through user activity, displaying additional information when the user wants to see more without having to open a new case.
Tables are used when displaying tabular data or comparing data both vertically and horizontally.
Using design templates is the best way to define a case view. You can use a design template to create UI inside the case view. A template has a series of regions that are filled with content. When an application author changes a layout, the content inside reflows to fit inside the same region names.
You can use design templates to build a consistent, high-quality UI that increases reusability and reduces the effort involved in performing bulk layout changes.
Pega Platform provides the most common templates that are suitable for all case types. You can pick a design template based on the case type or information.
You can also create your own design template to the specific requirements for your application.