The CasePreview component showcases the CaseView component as it would appear on mobile screens, within a Drawer.

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

To learn more about configuration, visit Pega Community.

The CasePreview is simply a mobile rendering of the CaseView component, and thus takes all of the same props. For more information on the props that CasePreview accepts, check out the CaseView documentation.

The CasePreview component must include the open prop which controls if the Drawer is visible or not. There are additional functions detailed in the props table below that allow you to handle events before and after the Drawer opens and closes.

The following demo is from the CaseView component. Try hovering over the previewable link in the summary region to trigger the CasePreview component.

caseId*stringA Case ID to display in the heading.
heading*stringA text region for the title of the CaseView.
open*booleanIf true, the Case Preview will be visible.
summary*ReactNodeA region to display any summary information about the CaseView.
  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.
  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.
onAfterClose() => voidCallback fired after Case Preview closes.
onAfterCollapse() => void
onAfterExpand() => void
onAfterOpen() => voidCallback fired after Case Preview opens.
onAnimationStateChange(state: AnimationState) => voidA callback that will return the animation state of the case summary.
onBeforeClose() => voidCallback fired before Case Preview closes.
onBeforeCollapse() => void
onBeforeExpand() => void
onBeforeOpen() => voidCallback fired before Case Preview opens.
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.
onOuterClick() => voidCallback fired when a click action occurs outside of the Case Preview.
parentCasesMenuItemProps[]A set of Link props representing the case parents, rendered as Breadcrumbs.
  content: ReactNode;
  title: string;
A region to the right reserved for persistent utilities.
refRef<HTMLDivElement>Reference to the wrapping element.
stagesReactNodeA region to hold a Stages component.
  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.
  count: number;
  iconName: string;
The utilities summary array will be used to render the minimized the utilities card.