Why

When you create a new Case Type or data object, the Pega Platform™ automatically adds an associated View called a Full Page View, that represents the visual framework for processing related information. Optimized for almost any Case or data object, the three-pane layout accommodates a lot of information, much of which is available without scrolling or moving to other Views. You can edit the Full Page View in the UX tab of your Case Type or data object.

The full Case View, or the full Case Page, represents a single Case in Pega Platform.

Sample full case view:

While the Summary data View renders the most critical data that users must understand briefly, you can create other tabs to further refine the information architecture of the Case. When a user clicks any of the tabs, they dynamically render other Views under the assignment processing area.

By default, the Case Page includes two tabs: Details and Pulse.

Purpose and functionality:

The primary purpose of the Full Case View is to provide users with seamless access to critical information (case or data) without navigating through multiple views or landing pages. You can further customize the tabs to display relevant details specific to your case processing needs, making it especially useful when previewing a case.

Business use cases:

Here are some business scenarios where custom tabs in the full case view may be required to effectively display complex information.

1. Customer Overview Dashboard - A CRM system where support agents or sales reps can switch between different support tickets raised by the customer.
2. Banking & Financial Services - A banking portal where an employee can view different details of a customer:
   1. Accounts (Current, Savings)
   2. Investment Portfolio
3. Telecom Customer Management - A telecom provider's customer portal where support staff can switch between:
   1. Billing & Payment History
   2. Support Tickets & Resolutions
4. E-commerce Customer Profile - An e-commerce customer service system where agents can switch between:
   1. Order History
   2. Returns & Refunds
   3. Delivery Address
5. Healthcare & Patient Records - A hospital or clinic system where doctors or admin staff can view:
   1. Lab Reports & Imaging
   2. Prescriptions & Medications

Benefits of using Full case view

1. Unified Interface – Reduces the need to navigate multiple screens for case-related details.
2. Improved Efficiency – Users can quickly access necessary case data and complete tasks faster.
3. Enhanced Compliance – Complete audit trails ensure regulatory adherence.
4. Better Collaboration – Enables seamless communication between stakeholders.
5. Scalability – Works efficiently for large enterprises handling high-volume cases.

Prerequisites:

1. Define Data Sources:

• Identify Sources: Determine where the data will come from. This could be internal databases, external systems, or OOTB data types.
• Integration: Set up any necessary integrations with external systems using OOTB integration tools and connectors to ensure data is accessible.

2. Create Data Types:

• Data Modeling: Use Data Designer to define the data types you need. This involves specifying the fields or attributes that will be included in your tables.
• Data Relationships: Establish any necessary relationships between data types to support complex data structures (e.g., one-to-many relationships). 

How to structure complex user data using tabs :

1. Using default tabs

The Details View is a default, optional View that can render read-only Case data, such as important fields, and other information. By default, the Details View is configured to display Primary Fields. 

You can find more details in the academy module - https://academy.pega.com/module/full-case-views/v2.

Also refer to this academy challenge for step by step instructions -  https://academy.pega.com/challenge/configuring-full-case-view/v3#field-content-steps1

     2. Using Sub tabs template

You can reduce switching to multiple tabs by using sub tabs template to divide a tab view into more convenient groups with fewer fields.

Configuration steps –

Use case – For a banking application, while creating a request for saving account; employee wants to check both the delivery addresses and Account List, tagged to the customer.

Add a new tab to the full case view – Customer Details

Once created, open the tab and edit to change the template to – Sub tabs.

You can now add sub tabs – Delivery Address , Account List and views inside each tab.

Once you save the configurations, you can verify your changes.

        3. Showing conditional information based on dropdown selection

Showing Conditional information based on dropdown selection can help users filter the relevant information based on a dropdown (for example), without having to switch tabs. Also, it limits the amount of information loaded at once on the tab. This enables users to quickly locate relevant information, enhancing efficiency and overall user experience.

Configuration steps –

Use case – For a banking application, while creating a request for saving account; employee wants to check the delivery addresses, tagged to the customer.

Configure a data object – Delivery Address. This data object should hold all the address tagged to the customer. For testing purposes, I have added some sample data (not specific to any customer).Create a data reference field in the case type – Delivery Address and select “Reference data is copied to the case”.

In the “pyEdit” form view for your case type, add that property. The name of the view should be “Edit” in most of the scenarios.

Create a new partial view – “DeliveryAddPicker” and add this data reference property there.

The data reference field should be shown as a dropdown, and the source will automatically change to a list view.

Once the dropdown is configured, go back and add another view for the details, which will be shown once the dropdown value is selected.

Once the partial view is setup, add it to the tab in full case view.

Once you save all the configurations, you will be able to verify your changes.

        4. Showing the data as a card gallery

A card gallery makes data easy to read by organizing it into separate sections. It improves user experience with a visually appealing and interactive design. 

Configuration steps –

Use case – For a banking application, while creating a request for account closure; employee wants to view the customer contact details in a card gallery.

Start by creating an embedded field - CustContactDetails

Move to case UX tab and add a new tab – Contact Details. Add this field in the tab and drill down for more settings.

Select “repeating view” in the display as dropdown instead of table.

Note: For Infinity 23, you can use Field groups instead.

Add the view which will be used to display the data. This view should be already configured in the data object.

Note: Settings like mode and allow editing, deleting can be left as is, since the full case view will always load in read only mode.

Additionally, as we use embedded field for this configuration, we also need to populate values once the case is created.

Create pyDefault DT in your case class and add the mapping as shown below:

Once you save the configurations, you can verify your changes.

Some points to consider:

1. 1. Data reference fields don’t support this configuration yet. Hence, we need to copy all the data to the case type, and this can result in large blob data on the case.
   2. In case your application is already live, we need a utility to populate this information for the existing cases. Same must be done if additional fields are added to the data type and you need to show them on the card.
   3. Keep the size of the list limited else it will result in vertical scroll.
   4. Similarly, add only the relevant properties to the card as there is no option to align the cards horizontally.

Best practices:

1. Data Prioritization: Display only the most critical information. Avoid adding too much information as that will result in vertical scrolls and multiple tabs.
2. Separation of Concern – Although we can combine everything into a single tab, this is not recommended. A single tab should give a specific information about the case.
3. Performance Optimization: For large datasets, implement lazy loading or server-side rendering.

To Summarize: The Full Case View streamlines access to critical case data by eliminating the need for multiple views or pages. Adding additional tabs can help improve efficiency and user experience by making information easier to locate.