@pega/dx-component-builder-sdk 25.1.15 → 26.1.10

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx

@@ -13,11 +13,17 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
+
 interface ModalViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   loadingInfo?: string;
   routingInfo?: any;
   pageMessages?: string[];
+  httpMessages?: any[];
 }
 
 function isOpenModalAction(prevModalCollection, currentModalList) {
@@ -109,12 +115,12 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   const Assignment = getComponentFromMap('Assignment');
   const CancelAlert = getComponentFromMap('CancelAlert');
   const ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
-
+  const DataViewActionButtons = getComponentFromMap('DataViewActionButtons');
   const classes = useStyles();
 
   const modalCollection = useRef({});
   const routingInfoRef = useRef({});
-  const { getPConnect, routingInfo = null, pageMessages = [] } = props;
+  const { getPConnect, routingInfo = null, pageMessages = [], httpMessages = [] } = props;
   const pConn = getPConnect();
   const { acTertiary } = pConn.getConfigProps() as any;
   const {
@@ -122,19 +128,28 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     PUB_SUB_EVENTS: { EVENT_SHOW_CANCEL_ALERT }
   } = PCore.getConstants();
   const { subscribe, unsubscribe } = PCore.getPubSubUtils();
-  const [bShowModal, setShowModal] = useState(false);
   const [bShowCancelAlert, setShowCancelAlert] = useState(false);
-  const [createdView, setCreatedView] = useState<any>(null);
-  const [title, setTitle] = useState('');
-  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
-  const [itemKey, setItemKey] = useState('');
   const [cancelAlertProps, setCancelAlertProps] = useState({});
-  const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'ModalContainer';
 
   const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
+  // Stack of open modals — each entry represents one stacked modal
+  interface ModalEntry {
+    key: string;
+    title: string;
+    createdView: any;
+    arNewChildrenAsReact: any[];
+    isMultiRecordData: boolean;
+    isDataObjectModal: boolean;
+    dataRecordKeys: string;
+    dataObjectActionID: string;
+    dataObjectAction: string;
+    dataObjectClassId: string;
+  }
+  const [modalStack, setModalStack] = useState<ModalEntry[]>([]);
+
   function showAlert(payload) {
     const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn, { acTertiary });
     const isReverseCoexistence = (PCore.getCoexistenceManager().getBroadcastUtils() as any).isReverseCoexistenceCaseLoaded();
@@ -175,7 +190,8 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
       const modifiedModalCollection = { ...tempModalCollection };
       delete modifiedModalCollection[closedModalKey];
       modalCollection.current = modifiedModalCollection;
-      setShowModal(false);
+      // Remove the closed modal from the stack
+      setModalStack(prev => prev.filter(entry => entry.key !== closedModalKey));
     }
   }
 
@@ -183,21 +199,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     setShowCancelAlert(false);
 
     if (dismissAllModals) {
-      setShowModal(false);
+      setModalStack([]);
     }
   };
 
-  function getModalHeading(dataObjectAction) {
-    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
-      ? localizedVal('Add Record', localeCategory)
-      : localizedVal('Edit Record', localeCategory);
+  function getModalHeading(dataObjectAction, actionName) {
+    switch (dataObjectAction) {
+      case PCore.getConstants().RESOURCE_STATUS.CREATE:
+        return localizedVal('Add Record', localeCategory);
+      case PCore.getConstants().RESOURCE_STATUS.OPEN_FLOW_ACTION:
+        return localizedVal(actionName, localeCategory);
+      default:
+        return localizedVal('Edit Record', localeCategory);
+    }
   }
 
-  function determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
+  function determineModalHeaderByAction(actionName, caseTypeName, caseLocaleRef) {
     if (actionName) {
       return localizedVal(actionName, localeCategory);
     }
-    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
+    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)}`;
   }
 
   useEffect(() => {
@@ -242,7 +263,6 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         (isOpenModalAction(modalCollection.current, accessedOrder) || isUpdateModalAction(modalCollection.current, accessedOrder))
       ) {
         const { actionName } = latestItem;
-        // const { isDockable = false } = latestItem?.modalOptions || {};
         const configObject: any = getConfigObject(latestItem, null, false);
         const pConnect = configObject.getPConnect();
         const caseInfo: any = pConnect.getCaseInfo();
@@ -250,19 +270,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         const caseTypeName = caseInfo.getCaseTypeName();
         const ID = caseInfo.getBusinessID() || caseInfo.getID();
         const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-        const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-        const headingValue =
-          isDataObject || isMultiRecord
-            ? getModalHeading(dataObjectAction)
-            : determineModalHeaderByAction(actionName, caseTypeName, ID, pConnect?.getCaseLocaleReference());
+        const dataObjAction = routingInfo.items[latestItem.context].resourceStatus;
+        const multiRecordData = routingInfo.items[latestItem.context].isMultiRecordData;
+        const actionID = routingInfo.items[latestItem.context].actionID;
+
+        const getHeadingValue = () => {
+          if (multiRecordData) {
+            return routingInfo.items[latestItem.context].heading;
+          }
+          if (isDataObject) {
+            if (actionName) {
+              return localizedVal(actionName, localeCategory);
+            }
+            return getModalHeading(dataObjAction, actionName);
+          }
+          return determineModalHeaderByAction(actionName, caseTypeName, pConnect?.getCaseLocaleReference());
+        };
 
         let arChildrenAsReact: any[] = [];
 
         if (pConnect.getComponentName() === 'reference') {
-          // Reference component doesn't have children. It can build the View we want.
-          // The Reference component getPConnect is in configObject
-
           arChildrenAsReact.push(
             createElement(createPConnectComponent(), {
               ...configObject,
@@ -270,11 +297,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
             })
           );
         } else {
-          // This is the 8.6 implementation. Leaving it in for reference for now.
-          // And create a similar array of the children as React components
-          // passed to Assignment component when rendered
           arChildrenAsReact = (pConnect.getChildren() as []).map((child: any) => {
-            // Use Case Summary ID as the React element's key
             const caseSummaryID = child.getPConnect().getCaseSummary().ID;
             return createElement(createPConnectComponent(), {
               ...child,
@@ -283,19 +306,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
           });
         }
 
-        if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
-        setMultiRecordData(isMultiRecord);
-        setTitle(headingValue);
-        setCreatedView({ configObject, latestItem });
-        setItemKey(key);
-        setShowModal(true);
+        const modalEntry: ModalEntry = {
+          key,
+          title: getHeadingValue(),
+          createdView: { configObject, latestItem },
+          arNewChildrenAsReact: arChildrenAsReact.length > 0 ? arChildrenAsReact : [],
+          isMultiRecordData: multiRecordData,
+          isDataObjectModal: isDataObject && !multiRecordData,
+          dataRecordKeys: latestItem.key || '',
+          dataObjectActionID: actionID || '',
+          dataObjectAction: dataObjAction || '',
+          dataObjectClassId: pConnect.getValue('.classID') || ''
+        };
 
-        // Update modal use case which happens when assignment in submitted in modal.
         if (isUpdateModalAction(modalCollection.current, accessedOrder)) {
-          // handleModalUpdate(key);
+          // Update existing modal in the stack
+          setModalStack(prev => prev.map(entry => (entry.key === key ? modalEntry : entry)));
         } else if (isOpenModalAction(modalCollection.current, accessedOrder)) {
-          // New modal open scenario
+          // Push new modal onto the stack
           handleModalOpen(key);
+          setModalStack(prev => [...prev, modalEntry]);
         }
       } else if (isCloseModalAction(modalCollection.current, accessedOrder)) {
         handleModalClose(accessedOrder);
@@ -303,43 +333,59 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     }
   }, [routingInfo]);
 
-  function closeActionsDialog() {
-    // actionsDialog.current = true;
-    setShowModal(false);
+  function closeActionsDialog(modalKey?: string) {
+    if (modalKey) {
+      setModalStack(prev => prev.filter(entry => entry.key !== modalKey));
+    } else {
+      // Close the topmost modal
+      setModalStack(prev => prev.slice(0, -1));
+    }
   }
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
-        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
-          {title}
-        </DialogTitle>
-        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
-          {bShowModal ? (
+      {modalStack.map(modal => (
+        <Dialog key={modal.key} open aria-labelledby={`form-dialog-title-${modal.key}`} maxWidth='md' fullWidth>
+          <DialogTitle id={`form-dialog-title-${modal.key}`} className={`${classes.dlgTitle} psdk-dialog-title`}>
+            {modal.title}
+          </DialogTitle>
+          <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
               <Assignment
-                getPConnect={createdView.configObject.getPConnect}
-                itemKey={itemKey}
+                getPConnect={modal.createdView.configObject.getPConnect}
+                itemKey={modal.key}
                 isInModal
                 banners={getBanners({
-                  target: itemKey,
-                  pageMessages
+                  target: modal.key,
+                  pageMessages,
+                  httpMessages
                 })}
               >
-                {arNewChildrenAsReact}
+                {modal.arNewChildrenAsReact}
               </Assignment>
             </LocalizationProvider>
-          ) : null}
-        </DialogContent>
-
-        {isMultiRecordData && (
-          <ListViewActionButtons
-            getPConnect={createdView.configObject.getPConnect}
-            context={createdView.latestItem.context}
-            closeActionsDialog={closeActionsDialog}
-          />
-        )}
-      </Dialog>
+          </DialogContent>
+
+          {modal.isMultiRecordData && (
+            <ListViewActionButtons
+              getPConnect={modal.createdView.configObject.getPConnect}
+              context={modal.createdView.latestItem.context}
+              closeActionsDialog={() => closeActionsDialog(modal.key)}
+            />
+          )}
+          {modal.isDataObjectModal && (
+            <DataViewActionButtons
+              getPConnect={modal.createdView.configObject.getPConnect}
+              context={modal.createdView.latestItem.context}
+              classId={modal.dataObjectClassId}
+              dataObjectAction={modal.dataObjectAction}
+              dataRecordKeys={modal.dataRecordKeys}
+              actionID={modal.dataObjectActionID}
+              closeActionsDialog={() => closeActionsDialog(modal.key)}
+            />
+          )}
+        </Dialog>
+      ))}
       {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
     </>
   );

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.css

@@ -146,6 +146,69 @@ mat-horizontal-stepper {
   border-left-color: var(--app-neutral-color);
 }
 
+.psdk-vertical-stepper-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.psdk-vertical-stepper-container.stepper-end {
+  grid-template-columns: 1fr minmax(12rem, auto);
+  grid-template-areas: 'content stepper';
+}
+
+.psdk-vertical-stepper-container.stepper-start {
+  grid-template-columns: minmax(12rem, auto) 1fr;
+  grid-template-areas: 'stepper content';
+}
+
+.psdk-stepper-rail {
+  grid-area: stepper;
+}
+
+.psdk-stepper-content {
+  grid-area: content;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-icon {
+  flex-shrink: 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step {
+  position: relative;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-body {
+  display: none;
+}
+
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: calc(0.75rem + 24px + 4px);
+  bottom: -4px;
+  width: 1px;
+  background-color: var(--app-neutral-color);
+}
+
+.psdk-stepper-rail .psdk-vertical-step-label {
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--text-secondary-color);
+}
+
+.psdk-stepper-rail .current .psdk-vertical-step-label {
+  font-weight: 700;
+  color: var(--app-text-color);
+}
+
 .psdk-horizontal-stepper {
   background-color: transparent;
   display: block;

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.tsx

@@ -10,7 +10,7 @@ interface MultiStepProps extends PConnProps {
   itemKey: string;
   actionButtons: any[];
   onButtonPress: any;
-  bIsVertical: boolean;
+  stepIndicator?: 'horizontal' | 'vertical' | 'vertical-start';
   arNavigationSteps: any;
 }
 
@@ -19,7 +19,9 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const AssignmentCard = getComponentFromMap('AssignmentCard');
 
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
-  const { bIsVertical, arNavigationSteps } = props;
+  const { stepIndicator = 'horizontal', arNavigationSteps } = props;
+
+  const isVertical = stepIndicator === 'vertical' || stepIndicator === 'vertical-start';
 
   let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
   if (!currentStep) {
@@ -56,59 +58,28 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
 
   return (
     <div>
-      {bIsVertical ? (
-        <div className='psdk-vertical-stepper'>
-          {arNavigationSteps.map((mainStep, index) => {
-            return (
-              <React.Fragment key={mainStep.actionID}>
-                <div className='psdk-vertical-step'>
-                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
-                    <div className={`psdk-vertical-step-icon`}>
-                      <div className='psdk-vertical-step-icon-content'>
-                        <span>{index + 1}</span>
-                      </div>
+      {isVertical ? (
+        <div className={`psdk-vertical-stepper-container ${stepIndicator === 'vertical-start' ? 'stepper-start' : 'stepper-end'}`}>
+          <div className='psdk-stepper-rail'>
+            {arNavigationSteps.map((mainStep, index) => (
+              <div key={mainStep.actionID} className='psdk-vertical-step'>
+                <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                  <div className='psdk-vertical-step-icon'>
+                    <div className='psdk-vertical-step-icon-content'>
+                      <span>{index + 1}</span>
                     </div>
-                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
-                  </div>
-                  <div className={_getVBodyClass(index)}>
-                    {mainStep?.steps && (
-                      <ul
-                        style={{
-                          paddingInlineStart: '0rem',
-                          marginLeft: '-7px'
-                        }}
-                      >
-                        {mainStep.steps.forEach(subStep => {
-                          <li className='psdk-sub-step-list'>
-                            <div style={{ display: 'inline-flex' }}>
-                              {subStep.visited_status === 'current' && <img className='psdk-current-svg-icon' src='{svgCurrent}' />}
-                              {subStep.visited_status !== 'current' && <img className='psdk-not-current-svg-icon' src='{svgNotCurrent}' />}
-                              {subStep.visited_status === 'current' && <label className='psdk-sub-step-current'>{subStep.name}</label>}
-                              {subStep.visited_status !== 'current' && <label className='psdk-sub-step-not-current'>{subStep.name}</label>}
-                            </div>
-                            {subStep.visited_status === 'current' && (
-                              <div>
-                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                                  {children}
-                                </AssignmentCard>
-                              </div>
-                            )}
-                          </li>;
-                        })}
-                      </ul>
-                    )}
-                    {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <div style={{ paddingLeft: 20 }}>
-                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                          {children}
-                        </AssignmentCard>
-                      </div>
-                    )}
                   </div>
+                  <div className='psdk-vertical-step-label'>{mainStep.name}</div>
                 </div>
-              </React.Fragment>
-            );
-          })}
+                {!isLastStep(index) && <div className={_getVBodyClass(index)} />}
+              </div>
+            ))}
+          </div>
+          <div className='psdk-stepper-content'>
+            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+              {children}
+            </AssignmentCard>
+          </div>
         </div>
       ) : (
         <div className='psdk-horizontal-stepper'>

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.tsx

@@ -56,7 +56,8 @@ const iconMap = {
   'pi pi-tablet': <TabletAndroidOutlineIcon fontSize='large' />,
   'pi pi-ambulance': <AirportShuttleOutlinedIcon fontSize='large' />,
   'pi pi-ink-solid': <EditOutlinedIcon fontSize='large' />,
-  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />,
+  'case-solid': <WorkOutlineIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -150,12 +151,14 @@ export default function NavBar(props: NavBarProps) {
 
   function navPanelButtonClick(oPageData: any) {
     const { pyClassName, pyRuleName } = oPageData;
-
     pConn
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to navigate to page from NavBar', error);
       });
   }
 
@@ -165,12 +168,14 @@ export default function NavBar(props: NavBarProps) {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-
     pConn
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
+      })
+      .catch(error => {
+        console.error('Failed to create case from NavBar', error);
       });
   }
 

package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/Reference.tsx

@@ -38,6 +38,11 @@ export default function Reference(props: ReferenceProps) {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });
 
+  if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+    const inheritedProps = pConnect.getInheritedProps();
+    referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+  }
+
   viewComponent.props.getPConnect().setInheritedConfig({
     ...referenceConfig,
     readOnly,

package/tests/assets/sdk-r/components/create/override-sdk/infra/RootContainer/RootContainer.tsx

@@ -15,11 +15,10 @@ interface RootContainerProps extends PConnProps {
   httpMessages: any[];
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const renderingModes = ['portal', 'view'];
 

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/View.css

@@ -4,5 +4,6 @@
   align-items: center;
   font-size: calc(0.9375rem);
   font-weight: 600;
+  margin-top: 1rem;
   margin-bottom: 5px;
 }

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/View.tsx

@@ -21,13 +21,12 @@ interface ViewProps extends PConnProps {
   type?: any;
 }
 
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
-const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide', 'HierarchicalForm'];
 const NO_HEADER_TEMPLATES = [
   'SubTabs',
   'SimpleTable',
@@ -43,22 +42,16 @@ const NO_HEADER_TEMPLATES = [
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {
-  const { children, template, getPConnect, mode, visibility, name: pageName, type, title } = props;
-  let { label = '', showLabel = false } = props;
+  const { children, template, getPConnect, visibility, name: pageName, type, title } = props;
+  let { label = '', showLabel } = props;
   const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } = PCore.getConstants();
 
-  // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
-  // Putting this logic here instead of copy/paste in every Form template index.js
-
+  // Get the inherited props from the parent to determine label settings
   const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
-  showLabel = inheritedProps.showLabel || showLabel;
-  const localeUtils = PCore.getLocaleUtils();
+  showLabel = inheritedProps.showLabel ?? showLabel ?? true;
 
-  const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
-  if (isEmbeddedDataView && showLabel === undefined) {
-    showLabel = true;
-  }
+  const localeUtils = PCore.getLocaleUtils();
 
   useEffect(() => {
     // Get the localized application label

package/tests/assets/sdk-r/components/create/override-sdk/infra/ViewContainer/ViewContainer.tsx

@@ -17,14 +17,10 @@ interface ViewContainerProps extends PConnProps {
   limit?: number;
 }
 
-// ViewContainer can emit View
-// import View from '../View';
-
-//
-// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
-// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
-// is totally at your own risk.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 export default function ViewContainer(props: ViewContainerProps) {
   // const { getPConnect, children, routingInfo, name } = props;
@@ -157,13 +153,15 @@ export default function ViewContainer(props: ViewContainerProps) {
         const latestItem = items[key];
         const rootView = latestItem.view;
         const { context, name: viewName } = rootView.config;
+        const target = key.substring(0, key.lastIndexOf('_'));
         const config: any = { meta: rootView };
         config.options = {
           context: latestItem.context,
           pageReference: context || getPConnect().getPageReference(),
           containerName: getPConnect().getContainerName(),
-          containerItemName: key,
-          hasForm: viewName === CREATE_DETAILS_VIEW_NAME
+          containerItemID: key,
+          hasForm: viewName === CREATE_DETAILS_VIEW_NAME,
+          target
         };
         const configObject: any = PCore.createPConnect(config);
 

package/tests/assets/sdk-r/components/create/override-sdk/template/AppShell/AppShell.css

@@ -33,7 +33,3 @@
 .progress-spinner {
   text-align: center;
 }
-
-::ng-deep snack-bar-container.snackbar-newline {
-  white-space: pre-line;
-}

package/tests/assets/sdk-r/components/create/override-sdk/template/AppShell/AppShell.tsx

@@ -134,6 +134,9 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
               skipDirtyValidation: true
             });
           }
+        })
+        .catch(e => {
+          console.error(e);
         });
     }
   }, []);
@@ -170,7 +173,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     if (imageKey && portalTemplate === 'wss') {
       PCore.getAssetLoader()
         .getSvcImageUrl(imageKey)
-        .then(imagePath => setImageBlobUrl(imagePath));
+        .then(imagePath => setImageBlobUrl(imagePath))
+        .catch(e => {
+          console.error(e);
+        });
     }
   }, []);