@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/AppShell/AppShell.tsx

@@ -0,0 +1,259 @@
+import { type PropsWithChildren, useEffect, useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Avatar from '@mui/material/Avatar';
+
+import { Utils } from '../../helpers/utils';
+import { NavContext } from '../../helpers/reactContextHelpers';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+import './AppShell.css';
+
+interface AppShellProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showAppName: boolean;
+  pages: {
+    pxPageViewIcon: string;
+    pyClassName: string;
+    pyLabel: string;
+    pyRuleName: string;
+    pyURLContent: string;
+  }[];
+  caseTypes?: object[];
+  portalTemplate: string;
+  portalName: string;
+  portalLogo: string;
+  navDisplayOptions: { alignment: string; position: string };
+  httpMessages: string[];
+  pageMessages: string[];
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2)
+  },
+  wsscontent: {
+    flexGrow: 1,
+    height: '100vh',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  }
+}));
+
+export default function AppShell(props: PropsWithChildren<AppShellProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NavBar = getComponentFromRegistry('NavBar');
+  const WssNavBar = getComponentFromRegistry('WssNavBar');
+  const AlertBanner = getComponentFromRegistry('AlertBanner');
+
+  const {
+    pages = [],
+    caseTypes = [],
+    showAppName,
+    children = [],
+    getPConnect,
+    httpMessages = [],
+    pageMessages = [],
+    portalTemplate,
+    portalName,
+    portalLogo,
+    navDisplayOptions
+  } = props;
+
+  const [open, setOpen] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
+  const pConn = getPConnect();
+  const envInfo = PCore.getEnvironmentInfo();
+  const imageKey = envInfo.getOperatorImageInsKey();
+  const userName = envInfo.getOperatorName() || '';
+  const currentUserInitials = Utils.getInitials(userName);
+  const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
+  const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
+  const envPortalName = envInfo.getPortalName();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+  const classes = useStyles();
+  const actionsAPI = pConn.getActionsApi();
+  const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | Blob | null>(null);
+  // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [appName, setAppName] = useState('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [mapChildren, setMapChildren] = useState([]);
+
+  const messages = [...httpMessages, ...pageMessages];
+
+  const hasBanner = messages && messages.length ? messages.length > 0 : false;
+  let banners: any = null;
+  banners = hasBanner && (
+    <div style={{ display: 'flex', flexDirection: 'column', padding: '1em 0' }}>
+      <AlertBanner id='AppShell' variant='urgent' messages={messages} />
+    </div>
+  );
+  // Initial setting of appName and mapChildren
+  useEffect(() => {
+    setAppName(PCore.getEnvironmentInfo().getApplicationName() || '');
+
+    const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
+      const theChildComp = child.getPConnect().getComponentName();
+      const theKey = `.${index}`;
+      return (
+        <div id={theChildComp} key={theKey} style={{ border: 'solid 1px silver', margin: '1px' }}>
+          {theChildComp} will be here
+        </div>
+      );
+    });
+
+    setMapChildren(tempMap);
+
+    /* TODO: We're setting the `pyPortalTemplate` for now, this would be handled by the CoreJS in the future releases */
+    if (portalTemplate === 'wss') {
+      PCore.getEnvironmentInfo().setEnvironmentInfo({ ...PCore.getEnvironmentInfo().environmentInfoObject, pyPortalTemplate: 'wss' } as any);
+    }
+  }, []);
+
+  useEffect(() => {
+    // @ts-expect-error
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = pConn.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, pConn.getContextName(), {
+          PortalName: portalID
+        })
+        .then((response: { pyCaseTypesAvailableToCreate?: any }) => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            pConn.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+  }, []);
+
+  const [iconURL, setIconURL] = useState<string | Blob>('');
+  const [fullIconURL, setFullIconURL] = useState<string | Blob>('');
+  useEffect(() => {
+    // using the default icon then fetch it from the static folder (not auth involved)
+    if (
+      !portalLogo ||
+      portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
+      portalLogo.toLowerCase().includes('py-logo') ||
+      portalLogo.toLowerCase().includes('py-full-logo')
+    ) {
+      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
+      setIconURL(portalLogoImage);
+      setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
+    }
+    // not using default icon to fetch it using the way which uses authentication
+    else {
+      PCore.getAssetLoader()
+        .getSvcImageUrl(portalLogo)
+        .then(data => {
+          setIconURL(data);
+          setFullIconURL(data);
+        })
+        .catch(() => {
+          console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
+        });
+    }
+  }, [portalLogo]);
+
+  useEffect(() => {
+    if (imageKey && portalTemplate === 'wss') {
+      PCore.getAssetLoader()
+        .getSvcImageUrl(imageKey)
+        .then(imagePath => setImageBlobUrl(imagePath));
+    }
+  }, []);
+
+  const getOperator = () => {
+    return {
+      avatar: portalTemplate !== 'wss' ? <Avatar /> : { name: userName, imageSrc: imageBlobUrl },
+      name: userName,
+      currentUserInitials
+    };
+  };
+
+  function showPage(viewName, className) {
+    actionsAPI.showPage(viewName, className);
+  }
+
+  function openURL(URL) {
+    window.open(URL, '_blank');
+  }
+
+  const links = !pages
+    ? []
+    : pages.map(page => {
+        const name = localizedVal(page.pyLabel, '', localeReference);
+        return {
+          text: name,
+          name,
+          icon: page.pxPageViewIcon.replace('pi pi-', ''),
+          active: page.pyRuleName === activeTab,
+          onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
+        };
+      });
+
+  if (pConn.hasChildren()) {
+    // const theChildren = pConn.getChildren();
+    // const mapChildCompNames = theChildren.map((child) => { return child.getPConnect().getComponentName()});
+    // debugging/investigation help
+    // console.log(`AppShell has children: ${theChildren.length}`);
+    // console.log(`--> ${mapChildCompNames.map((name) => {return name;})}`);
+  }
+
+  if (portalTemplate === 'wss') {
+    return (
+      <div id='AppShell' className={classes.root}>
+        <WssNavBar
+          portalName={portalName}
+          imageSrc={iconURL}
+          fullImageSrc={fullIconURL}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appInfo={{
+            imageSrc: iconURL,
+            appName: localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+            onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
+          }}
+          navLinks={links.filter((link, index) => {
+            return index !== 0;
+          })}
+          operator={getOperator()}
+          navDisplayOptions={navDisplayOptions}
+        />
+        <div className={classes.wsscontent}>
+          {banners}
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <NavContext.Provider value={{ open, setOpen }}>
+      <div id='AppShell' className={classes.root} style={{ display: 'flex' }}>
+        <NavBar
+          getPConnect={getPConnect}
+          pConn={getPConnect()}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          pages={pages}
+          caseTypes={caseTypes}
+        />
+
+        <div className={classes.content}>
+          {banners}
+          {children}
+        </div>
+      </div>
+    </NavContext.Provider>
+  );
+}

package/templates/react-sdk-reference/src/components/template/AppShell/index.tsx

@@ -0,0 +1 @@
+export { default } from './AppShell';

package/templates/react-sdk-reference/src/components/template/BannerPage/BannerPage.tsx

@@ -0,0 +1,54 @@
+import { Children, type PropsWithChildren, useMemo } from 'react';
+
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface BannerPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  heading?: string;
+  message?: string;
+  imageTheme?: string;
+  backgroundImage?: string;
+  backgroundColor?: string;
+  tintImage?: boolean;
+}
+
+/*
+ * BannerPage template.
+ */
+export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const Banner = getComponentFromRegistry('Banner');
+
+  const {
+    children,
+    layout = 'two-column',
+    heading = '',
+    message = '',
+    imageTheme = 'light',
+    backgroundImage = '',
+    backgroundColor = '',
+    tintImage = false
+  } = props;
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  return (
+    <Banner
+      variant={layout}
+      a={childArray[0]}
+      b={childArray[1]}
+      banner={{
+        variant: imageTheme,
+        backgroundColor,
+        title: heading,
+        message,
+        backgroundImage,
+        tintImage
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/template/BannerPage/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "BannerPage",
+  "label": "Banner",
+  "description": "Banner Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "BannerPage.svg",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/BannerPage/index.tsx

@@ -0,0 +1 @@
+export { default } from './BannerPage';

package/templates/react-sdk-reference/src/components/template/CaseSummary/CaseSummary.tsx

@@ -0,0 +1,79 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface CaseSummaryProps extends PConnProps {
+  arPrimaryFields: any[];
+  arSecondaryFields: any[];
+  // If any, enter additional props that only exist on this component
+}
+
+export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const CaseSummaryFields = getComponentFromRegistry('CaseSummaryFields');
+
+  const { children } = props;
+  let { arPrimaryFields = [], arSecondaryFields = [] } = props;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
+
+  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  function prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
+  }
+
+  if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
+    for (const child of children as ReactElement[]) {
+      const childPConn = (child as ReactElement).props.getPConnect();
+      const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
+      if (childPConnData.name.toLowerCase() === 'primary fields') {
+        arPrimaryFields = childPConnData.children;
+        arPrimaryFields.forEach(field => {
+          if (field.config?.value && typeof field.config?.value === 'string') {
+            field.config.value = localizedVal(field.config.value, localeCategory);
+          }
+        });
+      } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+        const secondarySummaryFields = prepareCaseSummaryData(childPConn);
+        arSecondaryFields = childPConnData.children;
+        arSecondaryFields.forEach((field, index) => {
+          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+        });
+      }
+    }
+  }
+
+  return (
+    <div id='CaseSummary'>
+      <CaseSummaryFields theFields={arPrimaryFields} />
+      <CaseSummaryFields theFields={arSecondaryFields} />
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/template/CaseSummary/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "CaseSummary",
+  "label": "Summary data",
+  "description": "Case summary template",
+  "type": "Template",
+  "subtype": "SUMMARY",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/CaseSummary/index.tsx

@@ -0,0 +1 @@
+export { default } from './CaseSummary';

package/templates/react-sdk-reference/src/components/template/CaseView/CaseView.tsx

@@ -0,0 +1,261 @@
+import { type PropsWithChildren, type ReactElement, useContext, useEffect, useState } from 'react';
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+
+import { Utils } from '../../helpers/utils';
+import { PegaStoreContext as StoreContext } from '@pega/sdk-react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface CaseViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  icon: string;
+  subheader: string;
+  header: string;
+  showIconInHeader: boolean;
+  caseInfo: any;
+  lastUpdateCaseTime: any;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: 'inherit'
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1)
+  }
+}));
+
+export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const CaseViewActionsMenu = getComponentFromRegistry('CaseViewActionsMenu');
+  const VerticalTabs = getComponentFromRegistry('VerticalTabs');
+  const DeferLoad = getComponentFromRegistry('DeferLoad');
+
+  const {
+    getPConnect,
+    icon = '',
+    header,
+    subheader,
+    children = [],
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
+  } = props;
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
+  const currentCaseID = props.caseInfo.ID;
+  let isComponentMounted = true;
+  const { displayOnlyFA } = useContext<any>(StoreContext);
+
+  const thePConn = getPConnect();
+
+  const classes = useStyles();
+
+  const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
+  const localeCategory = 'CaseView';
+
+  /**
+   *
+   * @param inName the metadata <em>name</em> that will cause a region to be returned
+   */
+  function getChildRegionByName(inName: string): any {
+    for (const child of children as ReactElement[]) {
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
+      if (theMetadataType === 'region' && theMetadataName === inName) {
+        return child;
+      }
+    }
+
+    return null;
+  }
+
+  const theSummaryRegion = getChildRegionByName('summary');
+  const theStagesRegion = getChildRegionByName('stages');
+  const theTodoRegion = getChildRegionByName('todo');
+  const theUtilitiesRegion = getChildRegionByName('utilities');
+  const theTabsRegion = getChildRegionByName('tabs');
+
+  let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
+
+  if (!iconForCaseType || iconForCaseType.includes('.')) {
+    iconForCaseType = 'polaris-solid';
+  }
+  const caseSvgIconUrl = Utils.getImageSrc(iconForCaseType, Utils.getSDKStaticConentUrl());
+
+  const [activeVertTab, setActiveVertTab] = useState(0);
+
+  // const tmpLoadData1 = { config: { label: "Details", name: "pyDetailsTabContent" }, type: "DeferLoad" };
+  // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
+
+  // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
+  const theTabsRegionChildren = theTabsRegion?.props.getPConnect().getChildren();
+
+  // vertTabInfo is sent to VerticalTabs component
+  const vertTabInfo: object[] = [];
+
+  // deferLoadInfo is sent to DeferLoad component (currently selected entry)
+  const deferLoadInfo: any[] = [];
+
+  if (theTabsRegionChildren) {
+    // populate vertTabInfo and deferLoadInfo
+    theTabsRegionChildren.forEach((tabComp, index) => {
+      const theTabCompConfig = tabComp.getPConnect().getConfigProps();
+      // eslint-disable-next-line prefer-const
+      let { label, inheritedProps } = theTabCompConfig;
+      // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
+      if (!label) {
+        inheritedProps.forEach(inheritedProp => {
+          if (inheritedProp.prop === 'label') {
+            label = inheritedProp.value;
+          }
+        });
+      }
+      // We'll display the tabs when either visibility property doesn't exist or is true(if exists)
+      if (theTabCompConfig.visibility === undefined || theTabCompConfig.visibility === true) {
+        vertTabInfo.push({ name: label, id: index });
+        deferLoadInfo.push({ type: 'DeferLoad', config: theTabCompConfig });
+      }
+    });
+  }
+
+  function handleVerticalTabClick(eventDetail: any) {
+    const theItem = parseInt(eventDetail.additionalData.itemClicked, 10);
+
+    // only call useEffectSetter if the component is mounted
+    if (isComponentMounted) {
+      setActiveVertTab(theItem);
+    }
+  }
+
+  // Add and Remove event listener for VerticalTabClick only at startup and teardown
+  useEffect(() => {
+    document.addEventListener('VerticalTabClick', (event: any) => {
+      handleVerticalTabClick(event.detail);
+    });
+
+    return (): void => {
+      // inform that the component is unmounted so other code can
+      //  know not to try to call useState setters (to avoid console warnings)
+      isComponentMounted = false;
+
+      document.removeEventListener('VerticalTabClick', (event: any) => {
+        handleVerticalTabClick(event.detail);
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    if (hasNewAttachments) {
+      PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+    }
+  }, [hasNewAttachments]);
+
+  function _editClick() {
+    const actionsAPI = thePConn.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
+  }
+
+  function getActionButtonsHtml(): any {
+    return (
+      <Box>
+        {editAction && (
+          <Button
+            id='edit'
+            onClick={() => {
+              _editClick();
+            }}
+          >
+            {localizedVal('Edit', localeCategory)}
+          </Button>
+        )}
+        <CaseViewActionsMenu
+          getPConnect={getPConnect}
+          availableActions={availableActions}
+          availableProcesses={availableProcesses}
+          caseTypeName={caseTypeName}
+          caseTypeID={caseTypeID}
+        />
+      </Box>
+    );
+  }
+
+  function getContainerContents() {
+    if (!displayOnlyFA) {
+      // show full portal
+      return (
+        <Grid container>
+          <Grid size={{ xs: 3 }}>
+            <div hidden={true} id='current-caseID'>
+              {currentCaseID}
+            </div>
+            <Card className={classes.root}>
+              <CardHeader
+                className={classes.caseViewHeader}
+                title={
+                  <Typography variant='h6' component='div' id='case-name'>
+                    {localizationService.getLocalizedText(header)}
+                  </Typography>
+                }
+                subheader={
+                  <Typography variant='body1' component='div' id='caseId'>
+                    {subheader}
+                  </Typography>
+                }
+                avatar={
+                  <Avatar className={classes.caseViewIconBox} variant='square'>
+                    <img src={caseSvgIconUrl} />
+                  </Avatar>
+                }
+              />
+              {getActionButtonsHtml()}
+              <Divider />
+              {theSummaryRegion}
+              <Divider />
+              {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
+            </Card>
+          </Grid>
+
+          <Grid size={{ xs: 6 }}>
+            {theStagesRegion}
+            {theTodoRegion}
+            {deferLoadInfo.length > 0 && (
+              <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
+            )}
+          </Grid>
+
+          <Grid size={{ xs: 3 }}>{theUtilitiesRegion}</Grid>
+        </Grid>
+      );
+    }
+    // displayOnlyFA - only show the "todo" region
+    return (
+      <Grid container>
+        <Grid size={{ xs: 12 }}>{theTodoRegion}</Grid>
+      </Grid>
+    );
+  }
+
+  return getContainerContents();
+}

package/templates/react-sdk-reference/src/components/template/CaseView/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "CaseView",
+  "label": "Object page",
+  "description": "Standard case page",
+  "type": "Template",
+  "subtype": "CASEVIEW",
+  "properties": []
+}