@pega/dx-component-builder-sdk 23.1.12 → 23.1.14

package/README.md

@@ -2,13 +2,13 @@
 
 ## Overview
 
-This project provides you with an environment to extend SDK-R by giving you tools to create and publish custom components that are not available from the SDK-R release.
+This project provides you with an environment to extend SDK-R/SDK-A by giving you tools to create and publish custom components that are not available from the SDK-R/SDK-A release.
 
 ## Prerequisites
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 8.8 or later
+- Pega Infinity Server version 23
 
 - Git version 2.30 or later
 
@@ -16,7 +16,7 @@ Ensure you have access to the following in your system:
 
 - System npm version 8
 
-- Installed SDK-R, as the below commands live in the package.json of the SDK-R an NOT in this npm module
+- Installed SDK-R or SDK-A, as the below commands live in the package.json of the SDK-R/SDK-A an NOT in this npm module
 
 
 ## Create custom components
@@ -79,7 +79,7 @@ The *config.json* file contains the mapping of properties for configuring the au
 
 
 2. Enter the following command to start the storybook to view the demo.
-   `npm start`
+   `npm run startStorybook (Angular) npm run storybookSDK (React) or npm run storybookConstellation (React)`
 
 3. Modify the source files to build your own component. You can also install and import third-party libraries if required for your component.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "23.1.12",
+  "version": "23.1.14",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -24,6 +24,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
@@ -78,6 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FormControl required={required} error={status === 'error'}>
+        {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>
           <FormControlLabel
             control={theCheckbox}
@@ -94,4 +96,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache

@@ -15,7 +15,14 @@ window.PCore = {
         return 'en-GB';
       }
     };
-  }
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

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

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
@@ -49,14 +48,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

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

@@ -1,11 +1,9 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
-import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -52,17 +50,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
-  const [theCurrSym, setCurrSym] = useState('$');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrSym(theSymbols.theCurrencySymbol);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -10,6 +10,20 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   excludeStories: /.*Data$/
 };
 
+window.PCore = {
+  ...window.PCore,
+  getEnvironmentInfo: (): any => {
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
+};
+
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
@@ -22,10 +36,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

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

@@ -1,69 +1,57 @@
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
-
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  currencyISOCode: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 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 TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -72,10 +60,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <TextField
-        className={classes.input}
+      <CurrencyTextField
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -83,18 +78,24 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
         value={value}
-        type='number'
+        type='text'
+        outputFormat='number'
+        textAlign='left'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        inputProps={{ ...testProp }}
+        InputProps={{
+          inputProps: { ...testProp }
+        }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={theCurrSep}
+        onBlur={!readOnly ? PercentageOnBlur : undefined}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -151,9 +151,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] as any : '---'}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -11,6 +11,13 @@ window.PCore = {
         return new Promise(resolve => {
           resolve(operatorDetails);
         });
+      },
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: val => {
+        return val;
       }
     };
   }

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -20,6 +20,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   updateDateTime: string;
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
+  displayLabel?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -42,18 +43,19 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // const componentName = "Operator";
   const classes = useStyles();
 
-  const fieldLabel = props.label.toLowerCase();
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
   let caseOpLabel = '---';
   let caseOpName = '---';
   let caseOpId = '';
   let caseTime = '';
 
-  if (fieldLabel === 'create operator') {
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
     caseOpLabel = props.createLabel;
     caseOpName = props.createOperator.userName;
     caseTime = props.createDateTime;
     caseOpId = props.createOperator.userId;
-  } else if (fieldLabel === 'update operator') {
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
     caseOpLabel = props.updateLabel;
     caseOpName = props.updateOperator.userName;
     caseTime = props.updateDateTime;

package/src/tasks/map/map.js

@@ -50,6 +50,27 @@ export const getPrettierFormattedString = async (content) => {
   }
 }
 
+//
+// some components reference have a slightly different case/spelling than the component name, class, etc.
+//
+export const getSpecialCase = (componentKey, framework) => {
+
+  switch (framework) {
+    case 'SDK-React':
+      switch(componentKey) {
+        case "ToDo":
+          return "Todo";
+      }
+      break;
+    case 'SDK-Angular':
+      break;
+    case 'SDK-WebComponents' :
+      break;
+  }
+
+  return componentKey;
+}
+
 export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTOM) => {
 
   const framework = await getFramework();
@@ -73,7 +94,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponent = "./".concat(importComponent).split(path.sep).join("/");
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
 
       if (mapData.indexOf(importComponent.concat("/")) < 0) {
         // not present so we can add
@@ -141,7 +162,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
       if (mapDataAng.indexOf(importComponentAng.concat(".component")) < 0) {
         // not present so we can add
@@ -222,8 +243,8 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
-      let mapFullPretty = componentNameNoPrefix.concat(": ").concat(componentName);
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
+      let mapFullPretty = getSpecialCase(componentNameNoPrefix, framework).concat(": ").concat(componentName);
 
       if (mapData.indexOf(importFull) >= 0) {
 
@@ -267,9 +288,9 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
-      let mapFullAngPretty = originalComponentName.concat(": ").concat(componentComponentNameAng);
+      let mapFullAngPretty = getSpecialCase(originalComponentName, framework).concat(": ").concat(componentComponentNameAng);
 
       if (mapDataAng.indexOf(importFullAng) >= 0) {
 
@@ -332,7 +353,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapData = mapData.replaceAll( '"' + oldComponentNameNoPrefix + '"' , '"' + newComponentNameNoPrefix + '"');
 
         // pretty
-        mapData = mapData.replaceAll( oldComponentNameNoPrefix + ':' , newComponentNameNoPrefix + ':');
+        mapData = mapData.replaceAll( getSpecialCase(oldComponentNameNoPrefix, framework) + ':' , getSpecialCase(newComponentNameNoPrefix, framework) + ':');
 
         // prettier
         mapData = await getPrettierFormattedString(mapData);
@@ -369,7 +390,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapDataAng = mapDataAng.replaceAll( oldComponentNameAng + 'Component' , newComponentNameAng + 'Component');
 
         // pretty
-        mapDataAng = mapDataAng.replaceAll( oldComponentNameNoPrefixAng + ':' , newComponentNameNoPrefixAng + ':');
+        mapDataAng = mapDataAng.replaceAll( getSpecialCase(oldComponentNameNoPrefixAng, framework) + ':' , getSpecialCase(newComponentNameNoPrefixAng, framework) + ':');
 
         // prettier
         mapDataAng = await getPrettierFormattedString(mapDataAng);

package/src/tasks/publish/index.js

@@ -38,7 +38,9 @@ export default async options => {
     const rulesetVersion = options.params[6];
     const dBuild = options.params[7];
     devBuild = dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true';
-    doFetch = false;
+
+    // eslint-disable-next-line no-unneeded-ternary,no-nested-ternary
+    doFetch = options.params.length >= 9 ? (options.params[8] === 'noFetch' ? false : true) : true;
 
     content = { componentKey, rulesetName, rulesetVersion, devBuild };
   } else {

package/src/tasks/publish-all/index.js

@@ -24,8 +24,9 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
   const sDevBuild = devBuild ? '(dev build)' : '';
   const sFramework = framework.split("-")[1];
 
-  // don't fetch if testing
-  const doFetch = options.params.length >= 7 ? false : true;
+  // eslint-disable no-unneeded-ternary,no-nested-ternary
+  const doFetch = options.params.length >= 8 ? options.params[7] !== 'noFetch' : true;
+
 
   return new Listr(
     [
@@ -112,8 +113,9 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
   const sDevBuild = devBuild ? '(dev build)' : '';
   const sFramework = framework.split("-")[1];
 
-  // don't fetch if testing
-  const doFetch = options.params.length >= 7 ? false : true;
+  // eslint-disable no-unneeded-ternary,no-nested-ternary
+  const doFetch = options.params.length >= 8 ? options.params[7] !== 'noFetch' : true;
+
 
   return new Listr(
     [
@@ -194,7 +196,7 @@ export default async options => {
 
     components = await getComponentsObj(false, category);
 
-    // end if find no componets
+    // end if find no components
     if (components.length == 0) {
       console.log(chalk.redBright("No components to publish"));
       process.exit(1);

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/utils.ts

@@ -680,10 +680,12 @@ export const readContextResponse = async (context, params) => {
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
-    if (compositeKeys.length) {
+    if (compositeKeys.length && otherContext) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-view/utils.ts

@@ -680,10 +680,12 @@ export const readContextResponse = async (context, params) => {
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
-    if (compositeKeys.length) {
+    if (compositeKeys.length && otherContext) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -19,6 +19,7 @@ interface OperatorProps extends PConnProps {
   updateDateTime: string;
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
+  displayLabel?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -36,18 +37,19 @@ export default function Operator(props: OperatorProps) {
   // const componentName = "Operator";
   const classes = useStyles();
 
-  const fieldLabel = props.label.toLowerCase();
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
   let caseOpLabel = '---';
   let caseOpName = '---';
   let caseOpId = '';
   let caseTime = '';
 
-  if (fieldLabel === 'create operator') {
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
     caseOpLabel = props.createLabel;
     caseOpName = props.createOperator.userName;
     caseTime = props.createDateTime;
     caseOpId = props.createOperator.userId;
-  } else if (fieldLabel === 'update operator') {
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
     caseOpLabel = props.updateLabel;
     caseOpName = props.updateOperator.userName;
     caseTime = props.updateDateTime;