CaseView

The CaseView component acts as a full-page layout of a work case. It contains all information related to a case and is the primary layout for a user to work within for Pega applications.

For more information on how to use the features and props for this component, check out the developer documentation.

The CaseView component is composed of three columns:

  • Summary panel: Contains the case header, case summary, and Tabs.
  • Activity: Contains Stages, Tasks, and tab content, as well as any Banners that are active.
  • Utilities: A list of different widgets that support the case.

Summary panel

The first column of the CaseView component is dedicated to the heading, summary, and tabs. Along with the case heading, you may pass props for caseId, caseLink, and icon. These will render the provided information within a case header above the summary content. If parentCases are provided, a Breadcrumbs component will render beneath the heading. Additional actions may be passed that will render within the case header, along with options to edit and follow if the onEdit and onFollowedChange callback functions are provided.

The summary region is reserved for the case summary fields component. This component allows you to display meta data about the case categorized as primaryFields and secondaryFields. The primaryFields will render a stacked FieldValueList, whereas the secondaryFields will render an inline FieldValueList.

Beneath the case header and case summary is a scrollable region dedicated to tabs. The tabs prop takes a list of Tab items, the currentTabId, and an onClick handler. The content of the current tab will display in the center column of the CaseView.

Activity

The activity region is found within the second column of the CaseView component. At the very top are any banners that may be present. Beneath that is a region for stages, and then tasks. The content below tasks is rendered based on the current Tab selected in the summary panel. Each tab should have a corresponding item within the tabContent array, matched via a unique id. The content of the current tab is displayed within this column.

Utilities

The utilities region composes the third column of the CaseView component. This region is intended for use of Cosmos components such as Tags and Stakeholders that are rendered in a single column. The utilities region is collapsible, and may render in a collapsed state by default regardless of screen size by passing the deafultCollapsedUtilities prop.

When collapsed, a list of objects containing a Cosmos iconName and an optional count should be provided to the utilitiesSummaryItems prop to render in place of the full column. For more information on registering custom icons, visit the Icon documentation.

When viewing the CaseView component on a mobile-sized screen, the columns detailed respond by shifting their layout. The case header will span across the entire viewport and the summary and tabs will render within the same column as the rest of the main activity, just below the tasks. This essentially removes the first column entirely from the layout and moves all of its content elsewhere.

The same view may be accomplished by the user if the CaseView component is set to be collapsible. If collapsible is true, a Button will render alongside the case header allowing the user to toggle between the mobile view and desktop view. This feature is only available when the CaseView is rendered on non-mobile screens. The mobile view of the CaseView is also used to control the rendering of the CasePreview component.

Try adjusting the size of the screen when viewing the demos below to see the responsive behavior of this component.

The CaseView component composes the various regions of its layout with the React Node passed into its props, as mentioned above. You may explore the full set of features available in this component in the props table below.

The CaseView offers support for a fourth column that is designed to remain unaffected by the other responsive patterns that the component showcases. The persistentUtility prop accepts a title and content. The React Node content passed in will always be present on screen between the activity and utility columns.

The persistentUtility is best used for elements of a case that are most essential to the everyday workflow.

NameTypeDefaultDescription
caseId*stringA Case ID to display in the heading.
heading*stringA text region for the title of the CaseView.
summary*ReactNodeA region to display any summary information about the CaseView.
tabs*
{
  currentTabId: string;
  items: Tab[];
  onClick: (id: string, event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
}
An object handling the rendering and functionality of the Tabs in CaseSummary.
actionsAction[]Any actions that will be used for various actions on the CaseView.
bannersReactNodeA region above the center column to display banners.
caseLink
{
  href: string;
}
A set of props including an href that will be forwarded to the case heading and caseId.
collapsiblebooleanA boolean that toggles the collapsible feature of the case summary.
defaultCollapsedUtilitiesbooleanCollapses the utilities by default on load
desktopbooleanIndicator for a desktop size.
fixedWidthstringThe fixed width string is needed for the expandable and collapsible header.
followedbooleanIndicates if the current user is following the case. This should be updated based on onFollowedChange.
forceMobilebooleanForces rendering in the mobile layout, regardless of screen size.
headerRefRef<HTMLDivElement>Ref for the header element inside the Case Summary
iconReactElementAn icon to serve as a visual for the CaseView.
isMediumOrAbovebooleanIndicator for the current size of the users screen.
onAfterCollapse() => void
onAfterExpand() => void
onAnimationStateChange(state: AnimationState) => voidA callback that will return the animation state of the case summary.
onBeforeCollapse() => void
onBeforeExpand() => void
onEdit() => voidA callback for when the edit button is clicked
onFollowedChange(following: boolean) => voidCalled when user chooses to follow or unfollow the case. Use this to update followed.
parentCasesMenuItemProps[]A set of Link props representing the case parents, rendered as Breadcrumbs.
persistentUtility
{
  content: ReactNode;
  title: string;
}
A region to the right reserved for persistent utilities.
refRef<HTMLDivElement>Ref for the wrapping element.
stagesReactNodeA region to hold a Stages component.
tabContent
{
  content: ReactNode;
  id: string;
}[]
A region within the center column that is controlled by tabs in CaseSummary.
tasksReactNodeA region to hold a Tasks component.
utilitiesReactNodeA region that is used to hold Utility components for example SummaryList.
utilitiesSummaryItems
{
  count: number;
  iconName: string;
}[]
The utilities summary array will be used to render the minimized the utilities card.