@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DefaultForm/DefaultForm.css

@@ -32,3 +32,74 @@
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
+}

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

@@ -1,6 +1,11 @@
-import { createElement, type PropsWithChildren } from 'react';
+import { createElement, useState, type PropsWithChildren } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -21,9 +26,21 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -51,15 +68,34 @@ export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>)
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+      </div>
+    );
+  };
+
   return (
     <>
-      {instructions && (
-        <div className='psdk-default-form-instruction-text'>
-          {/* server performs sanitization method for instructions html content */}
-          {}
-          <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-        </div>
-      )}
+      {renderInstructions()}
       <div className={divClass}>{dfChildren}</div>
     </>
   );

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

@@ -14,6 +14,7 @@ interface FieldGroupTemplateProps extends PConnProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  allowActions?: any;
 }
 
 export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
@@ -30,6 +31,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     heading = '',
     displayMode,
     fieldHeader,
+    allowActions,
     allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
@@ -39,6 +41,11 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
       // @ts-expect-error - Expected 3 arguments, but got 1
@@ -72,7 +79,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0 && allowAddEdit !== false) {
+    if (referenceList.length === 0 && allowAdd) {
       addFieldGroupItem();
     }
 
@@ -87,8 +94,8 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
-        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
+        onAdd={allowAdd ? addFieldGroupItem : undefined}
+        onDelete={allowDelete ? deleteFieldGroupItem : undefined}
       />
     );
   }

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

@@ -41,6 +41,7 @@ import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/c
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 import useInit from './hooks';
+import { useCascadeAndUpdate } from './hooks';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListViewProps extends PConnProps {
@@ -56,10 +57,12 @@ interface ListViewProps extends PConnProps {
   compositeKeys?: any;
   showDynamicFields?: boolean;
   readonlyContextList?: any;
+  selectedValues?: any;
   value: any;
   viewName?: string;
   showRecords?: boolean;
   displayAs?: string;
+  localeReference?: string;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -87,13 +90,17 @@ export default function ListView(props: ListViewProps) {
     compositeKeys,
     showDynamicFields,
     viewName,
-    readonlyContextList: selectedValues,
+    readonlyContextList,
+    selectedValues: selectedValuesProp,
     value,
-    displayAs
+    displayAs,
+    localeReference
   } = props;
+  // Use selectedValues prop (passed from SimpleTableSelect) with fallback to readonlyContextList
+  const selectedValues = selectedValuesProp ?? readonlyContextList;
   let { showRecords } = props;
   const ref = useRef({}).current;
-  const cosmosTableRef = useRef();
+  const cosmosTableRef = useRef<any>(null);
   // List component context
   const [listContext, setListContext] = useState<any>({});
   const { meta } = listContext;
@@ -135,12 +142,19 @@ export default function ListView(props: ListViewProps) {
 
   const [selectedValue, setSelectedValue] = useState(value);
 
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  // Tracks selected row keys for multi-select mode (mirrors Angular's SelectionModel)
+  const [selectedRowSet, setSelectedRowSet] = useState<Set<string>>(new Set());
+
   // This basically will hold the list of all current filters
   const filters = useRef({});
 
   // Will contain the list of columns specific for an instance
   const columnList: any = useRef([]);
-  const filterPayload: any = useRef();
+  const filterPayload: any = useRef(null);
   // Will be sent in the dashboardFilterPayload
   let selectParam: any[] = [];
 
@@ -208,6 +222,7 @@ export default function ListView(props: ListViewProps) {
               getPConnect().getListActions().setSelectedRows({});
             } else {
               getPConnect().getListActions().clearSelectedRows();
+              setSelectedRowSet(new Set());
             }
           }
         }
@@ -445,7 +460,7 @@ export default function ListView(props: ListViewProps) {
     fetchDataFromServer();
   }
 
-  function fetchAllData(fields): any {
+  function fetchAllData(fields, overrideParams?: any): any {
     if (displayAs === 'advancedSearch' && !showRecords) {
       return Promise.resolve({ data: null });
     }
@@ -465,12 +480,13 @@ export default function ListView(props: ListViewProps) {
       query = filterPayload.current?.query;
     }
     const context = getPConnect().getContextName();
+    const resolvedParams = overrideParams ?? dataViewParameters;
     // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
     return !bInForm
       ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
         PCore.getDataApiUtils().getData(referenceList, payload)
       : // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'object'
-        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : resolvedParams, null, query);
   }
 
   const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
@@ -543,60 +559,76 @@ export default function ListView(props: ListViewProps) {
     return fieldsMap;
   };
 
-  async function fetchDataFromServer() {
+  async function fetchDataFromServer(overrideParams?: any) {
     let bCallSetRowsColumns = true;
-    const { fieldDefs, itemKey, patchQueryFields } = meta;
-    let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
-    listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
-    const workListJSON = await fetchAllData(listFields);
+    try {
+      const { fieldDefs, itemKey, patchQueryFields } = meta;
+      let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
+      listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
+      const workListJSON = await fetchAllData(listFields, overrideParams);
 
-    // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
-    const columnFields = componentConfig.presets[0].children[0].children;
+      // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
+      const columnFields = componentConfig.presets[0].children[0].children;
 
-    const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
+      const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
 
-    const myColumns = getHeaderCells(columnFields, fieldDefs);
+      const myColumns = getHeaderCells(columnFields, fieldDefs);
 
-    const selectParams: any = [];
+      const selectParams: any = [];
 
-    myColumns.forEach(column => {
-      selectParams.push({
-        field: column.id
+      myColumns.forEach(column => {
+        column.label = PCore.getLocaleUtils().getLocaleValue(column.label, localeReference);
+        selectParams.push({
+          field: column.id
+        });
       });
-    });
 
-    const colList: any = [];
+      const colList: any = [];
 
-    selectParams.forEach(col => {
-      colList.push(col.field);
-    });
+      selectParams.forEach(col => {
+        colList.push(col.field);
+      });
 
-    columnList.current = colList;
+      columnList.current = colList;
 
-    setResponse(tableDataResults);
+      setResponse(tableDataResults);
 
-    const usingDataResults = getUsingData(tableDataResults);
+      const usingDataResults = getUsingData(tableDataResults);
 
-    // store globally, so can be searched, filtered, etc.
-    myRows = usingDataResults;
+      // store globally, so can be searched, filtered, etc.
+      myRows = usingDataResults;
 
-    setRowsData(myRows);
-    // At this point, if we have data ready to render and haven't been asked
-    //  to NOT call setRows and setColumns, call them
-    if (bCallSetRowsColumns) {
-      setRows(myRows);
-      setColumns(myColumns);
-    }
+      setRowsData(myRows);
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setRows and setColumns, call them
+      if (bCallSetRowsColumns) {
+        setRows(myRows);
+        setColumns(myColumns);
 
-    return () => {
-      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
-      // The useEffect closure lets us have access to the bCallSetRowsColumns
-      //  variable inside the useEffect and inside the "then" clause of the
-      //  workListData promise
-      //  So, if this cleanup code gets run before the promise .then is called,
-      //  we can avoid calling the useState setters which would otherwise show a warning
-      bCallSetRowsColumns = false;
-    };
+        if (selectionMode === SELECTION_MODE.MULTI && selectedValues?.length > 0) {
+          const readonlyIds = new Set<string>(selectedValues.map((element: any) => element[rowID]));
+          const initialSet = new Set<string>();
+          myRows?.forEach(row => {
+            if (readonlyIds.has(row[rowID])) {
+              initialSet.add(row[rowID]);
+            }
+          });
+          setSelectedRowSet(initialSet);
+        }
+      }
+
+      return () => {
+        // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+        // The useEffect closure lets us have access to the bCallSetRowsColumns
+        //  variable inside the useEffect and inside the "then" clause of the
+        //  workListData promise
+        //  So, if this cleanup code gets run before the promise .then is called,
+        //  we can avoid calling the useState setters which would otherwise show a warning
+        bCallSetRowsColumns = false;
+      };
+    } catch (e) {
+      console.error(e);
+    }
   }
 
   function prepareFilters(data) {
@@ -626,6 +658,14 @@ export default function ListView(props: ListViewProps) {
     }, {});
   }
 
+  useCascadeAndUpdate({
+    getPConnect,
+    listContext,
+    referenceList,
+    parameters,
+    fetchDataFromServer
+  });
+
   useEffect(() => {
     if (listContext.meta) {
       const identifier = `promoted-filters-queryable-${uniqueId}`;
@@ -1013,22 +1053,57 @@ export default function ListView(props: ListViewProps) {
     setSelectedValue(value);
   };
 
-  const onCheckboxClick = event => {
-    const value = event?.target?.value;
-    const checked = event?.target?.checked;
+  const getSelectedValue = (row: any, checked: boolean) => {
+    const rowValue = row[rowID];
     const reqObj: any = {};
     if (compositeKeys?.length > 1) {
-      const index = response.findIndex(element => element[rowID] === value);
+      const index = response.findIndex(element => element[rowID] === rowValue);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
         reqObj[element] = selectedRow[element];
       });
       reqObj.$selected = checked;
     } else {
-      reqObj[rowID] = value;
+      reqObj[rowID] = rowValue;
       reqObj.$selected = checked;
     }
-    getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
+    return reqObj;
+  };
+
+  const onCheckboxClick = (row: any) => {
+    const rowKey = row[rowID];
+    const newSet = new Set(selectedRowSet);
+    if (newSet.has(rowKey)) {
+      newSet.delete(rowKey);
+    } else {
+      newSet.add(rowKey);
+    }
+    setSelectedRowSet(newSet);
+    const checked = newSet.has(rowKey);
+    const requiredValue = getSelectedValue(row, checked);
+    getPConnect()?.getListActions()?.setSelectedRows([requiredValue]);
+  };
+
+  const isAllSelected = (): boolean => {
+    const numSelected = selectedRowSet.size;
+    const numRows = arRows?.length || 0;
+    return numRows > 0 && numSelected === numRows;
+  };
+
+  const toggleAllRows = () => {
+    if (isAllSelected()) {
+      setSelectedRowSet(new Set());
+      getPConnect()?.getListActions()?.clearSelectedRows();
+      return;
+    }
+    if (selectedRowSet.size > 0 && !isAllSelected()) {
+      getPConnect()?.getListActions()?.clearSelectedRows();
+    }
+    const newSet = new Set<string>();
+    arRows.forEach(row => newSet.add(row[rowID]));
+    setSelectedRowSet(newSet);
+    const requiredValues = arRows.map(row => getSelectedValue(row, true));
+    getPConnect()?.getListActions()?.setSelectedRows(requiredValues);
   };
 
   const processColumnValue = (column, value) => {
@@ -1151,7 +1226,16 @@ export default function ListView(props: ListViewProps) {
               <Table>
                 <TableHead>
                   <TableRow>
-                    {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
+                    {selectionMode === SELECTION_MODE.SINGLE && <TableCell padding='checkbox' />}
+                    {selectionMode === SELECTION_MODE.MULTI && (
+                      <TableCell padding='checkbox'>
+                        <Checkbox
+                          indeterminate={selectedRowSet.size > 0 && !isAllSelected()}
+                          checked={arRows?.length > 0 && isAllSelected()}
+                          onChange={toggleAllRows}
+                        />
+                      </TableCell>
+                    )}
                     {arColumns.map(column => {
                       return (
                         <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
@@ -1179,7 +1263,7 @@ export default function ListView(props: ListViewProps) {
                         return (
                           <TableRow key={row[rowID]}>
                             {selectionMode === SELECTION_MODE.SINGLE && (
-                              <TableCell>
+                              <TableCell padding='checkbox'>
                                 <Radio
                                   onChange={handleChange}
                                   value={row[rowID]}
@@ -1190,12 +1274,8 @@ export default function ListView(props: ListViewProps) {
                               </TableCell>
                             )}
                             {selectionMode === SELECTION_MODE.MULTI && (
-                              <TableCell>
-                                <Checkbox
-                                  onChange={onCheckboxClick}
-                                  checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
-                                  value={row[rowID]}
-                                />
+                              <TableCell padding='checkbox'>
+                                <Checkbox onChange={() => onCheckboxClick(row)} checked={selectedRowSet.has(row[rowID])} />
                               </TableCell>
                             )}
                             {arColumns.map(column => {
@@ -1212,7 +1292,7 @@ export default function ListView(props: ListViewProps) {
                 </TableBody>
               </Table>
               {(!arRows || arRows.length === 0) && (
-                <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
+                <div className='no-records'>{getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}</div>
               )}
             </TableContainer>
           )}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/hooks.ts

@@ -1,7 +1,70 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { getContext, readContextResponse } from './utils';
 
+/**
+ * Hook that subscribes to parameter field changes and triggers a data re-fetch
+ * when the parameters change. This mirrors the useCascadeAndUpdate hook from
+ * the constellation-frontend codebase.
+ */
+export function useCascadeAndUpdate({ getPConnect, listContext, referenceList, parameters, fetchDataFromServer }) {
+  const isParametersOverride = !!parameters;
+  const fetchRef = useRef(fetchDataFromServer);
+  fetchRef.current = fetchDataFromServer;
+
+  useEffect(() => {
+    if (Object.keys(listContext).length === 0) return;
+
+    const fieldChangeCallback = () => {
+      if (listContext.meta) {
+        // Resolve fresh parameters at callback time since the subscription fires
+        // before React re-renders with updated props
+        const { parameters: freshParams } = getPConnect().getConfigProps();
+        fetchRef.current(freshParams);
+      }
+    };
+
+    const rawViewParameters = getPConnect().getComponentConfig?.()?.parameters;
+    const subscriptionId = crypto.randomUUID();
+
+    const overriddenParamFields: string[] = [];
+
+    // Collect overridden parameter fields that are property references
+    if (rawViewParameters && isParametersOverride) {
+      Object.keys(rawViewParameters).forEach(paramKey => {
+        const paramField = rawViewParameters[paramKey];
+        if (PCore.getAnnotationUtils().isProperty(paramField)) {
+          overriddenParamFields.push(`.${PCore.getAnnotationUtils().getPropertyName(paramField)}`);
+        }
+      });
+    }
+
+    // Subscribe to parameter field changes when parameters are overridden on the view
+    if (overriddenParamFields.length !== 0) {
+      PCore.getDataPageUtils().subscribeToUpdate(
+        referenceList,
+        overriddenParamFields,
+        getPConnect().getContextName(),
+        getPConnect().getPageReference(),
+        fieldChangeCallback,
+        `${subscriptionId}-override-params`
+      );
+    }
+
+    return function cleanup() {
+      if (overriddenParamFields.length !== 0) {
+        PCore.getDataPageUtils().unsubscribe(
+          referenceList,
+          overriddenParamFields,
+          getPConnect().getContextName(),
+          getPConnect().getPageReference(),
+          `${subscriptionId}-override-params`
+        );
+      }
+    };
+  }, [listContext]);
+}
+
 export default function useInit(props) {
   const {
     referenceList,
@@ -72,18 +135,22 @@ export default function useInit(props) {
         compositeKeys,
         isSearchable,
         isCacheable: true
-      }).then(async context => {
-        if (isCompStillMounted) {
-          return readContextResponse(context, {
-            ...props,
-            editing,
-            selectionCountThreshold,
-            ref,
-            selectionMode,
-            cosmosTableRef
-          });
-        }
-      });
+      })
+        .then(async context => {
+          if (isCompStillMounted) {
+            return readContextResponse(context, {
+              ...props,
+              editing,
+              selectionCountThreshold,
+              ref,
+              selectionMode,
+              cosmosTableRef
+            });
+          }
+        })
+        .catch(e => {
+          console.error(e);
+        });
     })();
 
     return () => {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/utils.ts

@@ -620,15 +620,25 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
   });
 }
 
-export const getItemKey = fields => {
+export function getMappedKey(key) {
+  // @ts-ignore
+  const qualifiedKey = PCore.getNameSpaceUtils().getDefaultQualifiedName(key);
+  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(qualifiedKey);
+  if (!mappedKey) {
+    return qualifiedKey;
+  }
+  return mappedKey;
+}
+
+export function getItemKey(fields) {
   let itemKey;
   if (fields.findIndex(field => field.id === 'pyGUID') > -1) {
     itemKey = 'pyGUID';
   } else {
-    itemKey = 'pzInsKey';
+    itemKey = getMappedKey('pzInsKey');
   }
   return itemKey;
-};
+}
 
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '') {
   const queryFields: any[] = [];