@pega/dx-component-builder-sdk 25.1.10 → 25.1.12

package/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache

@@ -22,12 +22,26 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  hideFieldLabels: boolean;
+  additionalProps: any;
+  imagePosition: string;
+  imageSize: string;
+  showImageDescription: string;
+  renderMode: string;
+  image: string;
 }
 
 const useStyles = makeStyles(() => ({
   checkbox: {
     display: 'flex',
     flexDirection: 'column'
+  },
+  selectableCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
+    gridAutoRows: '1fr',
+    gap: '0.5rem'
   }
 }));
 
@@ -37,7 +51,7 @@ const useStyles = makeStyles(() => ({
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
-
+  const SelectableCard = getComponentFromMap('SelectableCard');
   const {
     getPConnect,
     label,
@@ -60,8 +74,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     selectionList,
     primaryField,
     referenceList,
-    readonlyContextList: selectedvalues
+    readonlyContextList: selectedvalues,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    imagePosition,
+    imageSize,
+    showImageDescription,
+    renderMode,
+    image
   } = props;
+    
+  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
   const thePConn = getPConnect();
@@ -75,12 +101,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [value]);
 
   useEffect(() => {
-    if (referenceList?.length > 0) {
+    if (referenceList?.length > 0 && !readOnlyMode) {
       thePConn.setReferenceList(selectionList);
       updateNewInstuctions(thePConn, selectionList);
     }
   }, [thePConn]);
 
+
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
@@ -96,7 +128,67 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const handleBlur = event => {
     thePConn.getValidationApi().validate(event.target.checked);
   };
-
+const handleCheckboxChange = (event, item) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, item);
+    }
+    thePConn.clearErrorMessages({ property: selectionList });
+  };
+  const actions = thePConn.getActionsApi();
+  const commonProps = {
+    ...additionalProps,
+    className: 'standard',
+    disabled,
+    readOnly,
+    onClick: (actions as any).onClick
+  };
+  if (variant === 'card') {
+    return (
+      <div>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div className={classes.selectableCard}>
+          <SelectableCard
+            {...commonProps}
+            testId={testId}
+            displayMode={displayMode}
+            dataSource={datasource}
+            getPConnect={getPConnect}
+            readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
+            onChange={e => {
+              e.stopPropagation();
+              const recordKey = selectionKey?.split('.').pop();
+              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              handleCheckboxChange(e, {
+                id: selectedItem[recordKey as any],
+                primary: selectedItem[recordKey as any]
+              });
+            }}
+            onBlur={() => {
+              thePConn.getValidationApi().validate(selectedvalues, selectionList);
+            }}
+            hideFieldLabels={hideFieldLabels}
+            recordKey={selectionKey?.split('.').pop()}
+            cardLabel={primaryField.split('.').pop()}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: image?.split('.').pop(),
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+            }}
+            readOnlyList={selectedvalues}
+            type='checkbox'
+            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          />
+        </div>
+      </div>
+    );
+  }
   const handleChangeMultiMode = (event, element) => {
     if (event.target.checked) {
       insertInstruction(thePConn, selectionList, selectionKey, primaryField, {

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -13,6 +13,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
 }
 
 // Duplicated runtime code from React SDK
@@ -21,6 +28,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -34,7 +42,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     inline,
     displayMode,
     hideLabel,
-    fieldMetadata
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -93,6 +108,38 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          />
+        </div>
+      </div>
+    );
+  }
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FormControl variant='standard' error={status === 'error'} required={required}>

package/src/tasks/validator/index.js

@@ -39,6 +39,8 @@ const allowedOverrideSubtypes = [
     ...COMPONENT_SCHEMA.subtype.template.map(({ value }) => value),
     ...COMPONENT_SCHEMA.subtype.widget.map(({ value }) => value)
   ]),
+  'Text-Location',
+  'SEARCH',
   'ACTION',
   'DATA_CAPTURE',
   'SUMMARY',
@@ -368,8 +370,7 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   let data;
   try {
     data = JSON.parse(configData);
-  }
-  catch (er) {
+  } catch (er) {
     throw new Error(`Invalid schema json in config.json: ${er}`);
   }
 

package/src/util.js

@@ -784,7 +784,7 @@ export const showVersion = () => {
     if (nodeMajorVersion < 24) {
       console.log(
         chalk.redBright(
-          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);
@@ -792,7 +792,7 @@ export const showVersion = () => {
     else if ( nodeMajorVersion == 24 && nodeMinorVersion < 4) {
       console.log(
         chalk.redBright(
-          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);
@@ -800,7 +800,7 @@ export const showVersion = () => {
     else if (nodeMajorVersion == 24 && nodeMinorVersion == 4 && nodePatchVersion < 1 ) {
       console.log(
         chalk.redBright(
-          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+          `DX Component Builder SDK - requires node v24.4.1 or greater, current version: ${process.version}`
         )
       );
       process.exit(1);

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

@@ -33,8 +33,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'Assignment';
-  const localeReference = getPConnect()?.getCaseLocaleReference();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -76,7 +76,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);

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

@@ -133,9 +133,19 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
@@ -249,7 +259,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeUtils.getCaseLocaleReference(page.pyClassName))} />
+            <ListItemText primary={page.name} />
           </ListItemButton>
         ))}
       </List>

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

@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = getPConnect()?.getCaseLocaleReference();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

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

@@ -70,8 +70,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'CaseView';
-  const localeKey = thePConn?.getCaseLocaleReference();
+
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -214,7 +215,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 className={classes.caseViewHeader}
                 title={
                   <Typography variant='h6' component='div' id='case-name'>
-                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                    {localizationService.getLocalizedText(header)}
                   </Typography>
                 }
                 subheader={

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx

@@ -22,12 +22,26 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  hideFieldLabels: boolean;
+  additionalProps: any;
+  imagePosition: string;
+  imageSize: string;
+  showImageDescription: string;
+  renderMode: string;
+  image: string;
 }
 
 const useStyles = makeStyles(() => ({
   checkbox: {
     display: 'flex',
     flexDirection: 'column'
+  },
+  selectableCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
+    gridAutoRows: '1fr',
+    gap: '0.5rem'
   }
 }));
 
@@ -37,7 +51,7 @@ const useStyles = makeStyles(() => ({
 export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
-
+  const SelectableCard = getComponentFromMap('SelectableCard');
   const {
     getPConnect,
     label,
@@ -60,8 +74,20 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     selectionList,
     primaryField,
     referenceList,
-    readonlyContextList: selectedvalues
+    readonlyContextList: selectedvalues,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    imagePosition,
+    imageSize,
+    showImageDescription,
+    renderMode,
+    image
   } = props;
+    
+  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
   const thePConn = getPConnect();
@@ -75,12 +101,18 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }, [value]);
 
   useEffect(() => {
-    if (referenceList?.length > 0) {
+    if (referenceList?.length > 0 && !readOnlyMode) {
       thePConn.setReferenceList(selectionList);
       updateNewInstuctions(thePConn, selectionList);
     }
   }, [thePConn]);
 
+
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
@@ -96,7 +128,64 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   const handleBlur = event => {
     thePConn.getValidationApi().validate(event.target.checked);
   };
-
+const handleCheckboxChange = (event, item) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, item);
+    }
+    thePConn.clearErrorMessages({ property: selectionList });
+  };
+  const actions = thePConn.getActionsApi();
+  const commonProps = {
+    ...additionalProps,
+    className: 'standard',
+    disabled,
+    readOnly,
+    onClick: (actions as any).onClick
+  };
+  if (variant === 'card') {
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div className={classes.selectableCard}>
+          <SelectableCard
+            {...commonProps}
+            testId={testId}
+            displayMode={displayMode}
+            dataSource={datasource}
+            getPConnect={getPConnect}
+            readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
+            onChange={e => {
+              e.stopPropagation();
+              const recordKey = selectionKey?.split('.').pop();
+              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              handleCheckboxChange(e, {
+                id: selectedItem[recordKey as any],
+                primary: selectedItem[recordKey as any]
+              });
+            }}
+            onBlur={() => {
+              thePConn.getValidationApi().validate(selectedvalues, selectionList);
+            }}
+            hideFieldLabels={hideFieldLabels}
+            recordKey={selectionKey?.split('.').pop()}
+            cardLabel={primaryField.split('.').pop()}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: image?.split('.').pop(),
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+            }}
+            readOnlyList={selectedvalues}
+            type='checkbox'
+            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+          />
+        </div>
+      </div>
+    );
+  }
   const handleChangeMultiMode = (event, element) => {
     if (event.target.checked) {
       insertInstruction(thePConn, selectionList, selectionKey, primaryField, {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/index.tsx

@@ -13,6 +13,13 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
 }
 
 // Duplicated runtime code from React SDK
@@ -21,6 +28,7 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
 export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -34,7 +42,14 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     inline,
     displayMode,
     hideLabel,
-    fieldMetadata
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -93,6 +108,35 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+          />
+        </div>
+      </div>
+    );
+  }
   return (
     <StyledPegaDxilMyRadiobuttonsWrapper>
       <FormControl variant='standard' error={status === 'error'} required={required}>

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Assignment/Assignment.tsx

@@ -33,8 +33,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'Assignment';
-  const localeReference = getPConnect()?.getCaseLocaleReference();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -76,7 +76,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);

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

@@ -133,9 +133,19 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
@@ -249,7 +259,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeUtils.getCaseLocaleReference(page.pyClassName))} />
+            <ListItemText primary={page.name} />
           </ListItemButton>
         ))}
       </List>

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Stages/Stages.tsx

@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = getPConnect()?.getCaseLocaleReference();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseView/CaseView.tsx

@@ -70,8 +70,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'CaseView';
-  const localeKey = thePConn?.getCaseLocaleReference();
+
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -214,7 +215,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
                 className={classes.caseViewHeader}
                 title={
                   <Typography variant='h6' component='div' id='case-name'>
-                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                    {localizationService.getLocalizedText(header)}
                   </Typography>
                 }
                 subheader={