@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "ListView",
-    "name": "ListView",
-    "label": "Table",
-    "description": "Table Template",
-    "type": "Template",
-    "subtype": "LIST",
-    "properties": []
-}
+  "componentKey": "ListView",
+  "name": "ListView",
+  "label": "Table",
+  "description": "Table Template",
+  "type": "Template",
+  "subtype": "LIST",
+  "properties": []
+}

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

@@ -18,6 +18,7 @@ import { DragDropModule, CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag } fr
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { getCurrencyOptions } from '@pega/angular-sdk-components';
 import { getLocale, getSeconds } from '@pega/angular-sdk-components';
 import { formatters } from '@pega/angular-sdk-components';
@@ -162,18 +163,28 @@ export class ListViewComponent implements OnInit, OnDestroy {
   paging: any;
   fieldDefs: any;
   checkBoxValue: string;
+  // Last value seen on the bound property, used to detect external changes.
+  lastSelectedPropValue: any;
   label?: string = '';
   uniqueId = crypto.randomUUID();
   displayAs: any;
   showRecords: any;
   identifier: string;
   promotedFiltersId: string;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
   constructor(
+    private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     public utils: Utils
   ) {}
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
     this.configProps$ = this.pConn$.getConfigProps() as ListViewProps;
     /** By default, pyGUID is used for Data classes and pyID is for Work classes as row-id/key */
     const defRowID = this.configProps$?.referenceType === 'Case' ? 'pyID' : 'pyGUID';
@@ -197,6 +208,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.selectionMode = this.configProps$.selectionMode;
 
     this.checkBoxValue = this.configProps$.value;
+    this.lastSelectedPropValue = this.configProps$.value;
 
     this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
     this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
@@ -266,6 +278,29 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.clearSelectionsAndUpdateTable(this.pConn$, this.uniqueId, this.configProps$?.viewName);
   }
 
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf(): void {
+    // The selected row is driven by the bound property, which another field on the screen may change.
+    const latestConfigProps = this.pConn$.getConfigProps() as ListViewProps;
+    const latestValue = latestConfigProps?.value;
+
+    // Only re-sync on an actual property change, so a row the user just picked is not reverted.
+    if (this.selectionMode === SELECTION_MODE.SINGLE && latestValue !== this.lastSelectedPropValue) {
+      this.lastSelectedPropValue = latestValue;
+      this.checkBoxValue = latestValue;
+    }
+  }
+
   clearSelectionsAndUpdateTable(getPConnect: any, uniqueId: string, viewName): void {
     const clearSelectionsAndRefreshList = ({ viewName: name, clearSelections }: any) => {
       if (name === viewName) {
@@ -351,7 +386,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getValue(col) {
-    return this.fieldDefs.find(f => f.name === col)?.label;
+    return this.fields$.find(f => f.config.name === col)?.config.label || this.fieldDefs.find(f => f.name === col)?.label;
   }
 
   getListData() {
@@ -487,6 +522,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
   // }
 
   ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+
     PCore.getPubSubUtils().unsubscribe(
       PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
       `dashboard-component-${'id'}`,
@@ -586,11 +625,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   _getIconStyle(level): string {
-    let sReturn = '';
     let nLevel = parseInt(level, 10);
     nLevel--;
     nLevel *= 15;
-    sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
+    const sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
 
     return sReturn;
   }
@@ -963,16 +1001,14 @@ export class ListViewComponent implements OnInit, OnDestroy {
     let bKeep = true;
     for (const filterObj of this.filterByColumns) {
       if (filterObj.containsFilterValue != '' || filterObj.containsFilter == 'null' || filterObj.containsFilter == 'notnull') {
-        let filterValue: any;
-
         switch (filterObj.type) {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            bKeep = this.filterDataWithDate(item, filterObj, filterValue);
+            bKeep = this.filterDataWithDate(item, filterObj);
             break;
           default:
-            bKeep = this.filterDataWithCommonTypes(item, filterObj, filterValue);
+            bKeep = this.filterDataWithCommonTypes(item, filterObj);
             break;
         }
       }
@@ -986,10 +1022,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return bKeep;
   }
 
-  filterDataWithDate(item, filterObj, filterValue) {
+  filterDataWithDate(item, filterObj) {
     let bKeep;
     let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
-    filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
+    let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
 
     switch (filterObj.containsFilter) {
       case 'notequal':
@@ -1032,10 +1068,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return bKeep;
   }
 
-  filterDataWithCommonTypes(item, filterObj, filterValue) {
+  filterDataWithCommonTypes(item, filterObj) {
     let bKeep;
     const value = item[filterObj.ref].toLowerCase();
-    filterValue = filterObj.containsFilterValue.toLowerCase();
+    const filterValue = filterObj.containsFilterValue.toLowerCase();
 
     switch (filterObj.containsFilter) {
       case 'contains':

package/tests/assets/sdk-a/components/create/override-sdk/template/narrow-wide-form/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "NarrowWideForm",
-    "name": "NarrowWideForm",
-    "label": "Narrow-wide",
-    "description": "NarrowWide Template",
-    "type": "Template",
-    "subtype": "FORM",
-    "properties": []
-}
+  "componentKey": "NarrowWideForm",
+  "name": "NarrowWideForm",
+  "label": "Narrow-wide",
+  "description": "NarrowWide Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "OneColumn",
-    "name": "OneColumn",
-    "label": "One column",
-    "description": "OneColumn Template",
-    "type": "Template",
-    "subtype": "FORM",
-    "properties": []
-}
+  "componentKey": "OneColumn",
+  "name": "OneColumn",
+  "label": "One column",
+  "description": "OneColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column/one-column.component.html

@@ -5,6 +5,9 @@
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'View'">
     <component-mapper name="View" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>
+  <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'reference'">
+    <component-mapper name="reference" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+  </div>
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'">
     <component-mapper name="CaseCreateStage" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column-page/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "OneColumnPage",
-    "name": "OneColumnPage",
-    "label": "One column",
-    "description": "OneColumn Page Template",
-    "type": "Template",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "OneColumnPage",
+  "name": "OneColumnPage",
+  "label": "One column",
+  "description": "OneColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column-tab/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "OneColumnTab",
-    "name": "OneColumnTab",
-    "label": "One column",
-    "description": "One column",
-    "type": "Template",
-    "subtype": "TAB",
-    "properties": []
-}
+  "componentKey": "OneColumnTab",
+  "name": "OneColumnTab",
+  "label": "One column",
+  "description": "One column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column-tab/one-column-tab.component.html

@@ -2,6 +2,7 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>

package/tests/assets/sdk-a/components/create/override-sdk/template/page/page.component.html

@@ -5,6 +5,7 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>

package/tests/assets/sdk-a/components/create/override-sdk/template/search-form/search-form.component.html

@@ -1,5 +1,5 @@
 <div class="search-form" style="display: flex; flex-direction: column">
-  <h5>{{ propsToUse.label }}</h5>
+  <h3>{{ label$ }}</h3>
   <div *ngIf="searchCategoriesComp === 'dropdown'">
     <mat-form-field class="psdk-full-width">
       <mat-select [value]="currentTabId" (selectionChange)="handleTabClick($event.value)">

package/tests/assets/sdk-a/components/create/override-sdk/template/search-form/search-form.component.ts

@@ -37,6 +37,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
   @Input() searchSelectCacheKey;
+  @Input() type: string;
 
   configProps$: any;
   isInitialized = false;
@@ -47,6 +48,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
   tabItems: any[] = [];
   searchCategoriesComp: any;
   propsToUse: any;
+  label$: string;
   tabData: any = [];
   tabCountSources: any;
   deferLoadedTabs: any;
@@ -58,7 +60,13 @@ export class SearchFormComponent implements OnInit, OnChanges {
     this.isInitialized = true;
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.propsToUse = { ...this.pConn$.getInheritedProps() };
-    this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    this.label$ = this.configProps$?.label || this.propsToUse.label;
+    // When called from ObjectReference, pConn$ itself acts as deferLoadedTabs (no children[2])
+    if (this.type === 'ObjectReference') {
+      this.deferLoadedTabs = { getPConnect: () => this.pConn$ };
+    } else {
+      this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    }
     const cache: any = PCore.getNavigationUtils().getComponentCache(this.searchSelectCacheKey) ?? {};
     const { selectedCategory } = cache;
     const firstTabId = getFirstVisibleTabId(this.deferLoadedTabs, selectedCategory);

package/tests/assets/sdk-a/components/create/override-sdk/template/search-form/tabsData.ts

@@ -127,7 +127,6 @@ export function getData(deferLoadedTabs, tabCountSources, currentTabId, data) {
       });
   } else if (calculatedFieldsWithoutValue.length) {
     PCore.getViewRuleApi()
-      // @ts-ignore
       .getCalculatedFields(
         pConn.getCaseInfo().getKey(),
         pConn.getCurrentView(),

package/tests/assets/sdk-a/components/create/override-sdk/template/search-groups/search-groups.component.ts

@@ -37,7 +37,7 @@ export function flattenObj(obj: any): any {
 export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
   const filtersProperties = {};
   searchFields?.forEach(field => {
-    let val = '';
+    let val;
     const { value, defaultValue = '' } = field.config;
     const propPath = PCore.getAnnotationUtils().getPropertyName(value);
 
@@ -210,8 +210,7 @@ export class SearchGroupsComponent implements OnInit, OnDestroy, OnChanges {
       isValidInput(formValues)
     ) {
       if (this.isValidatorField) {
-        // @ts-ignore
-        PCore.getMessageManager().clearContextMessages({ context: transientItemID });
+        PCore.getMessageManager().clearContextMessages({ context: this.transientItemID });
       }
 
       this.previousFormValues = formValues;

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "label": "SimpleTable",
-    "componentKey": "SimpleTable",
-    "name": "SimpleTable",
-    "description": "Datatype List Template",
-    "type": "Template",
-    "subtype": "DATAVIEW",
-    "properties": []
-}
+  "label": "SimpleTable",
+  "componentKey": "SimpleTable",
+  "name": "SimpleTable",
+  "description": "Datatype List Template",
+  "type": "Template",
+  "subtype": "DATAVIEW",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table/simple-table.component.ts

@@ -5,6 +5,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { buildMetaForListView, getContext } from '@pega/angular-sdk-components';
+import { getReferenceList } from '@pega/angular-sdk-components';
 
 interface SimpleTableProps {
   // If any, enter additional props that only exist on this component
@@ -66,9 +67,12 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
+    const resolvedList = getReferenceList(this.pConn$);
+    this.pConn$.setReferenceList(resolvedList);
     // ONLY call updateSelf when the component should update
     if (bUpdateSelf) {
+      const resolvedList = getReferenceList(this.pConn$);
+      this.pConn$.setReferenceList(resolvedList);
       this.updateSelf();
     }
   }
@@ -78,6 +82,11 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableProps;
 
+    // Reset rendering state on every update
+    this.fieldGroupProps = null;
+    this.listViewProps = null;
+    this.refToPConnect = null;
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -91,6 +100,7 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     }
     if (multiRecordDisplayAs === 'fieldGroup') {
       this.fieldGroupProps = { ...this.configProps$, contextClass };
+      return;
     }
 
     const {

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/helpers.ts

@@ -148,12 +148,33 @@ const SUPPORTED_FIELD_TYPES = [
   'RichText'
 ];
 
+// PCore.getNameSpaceUtils() exists at runtime but is missing from the pcore typedefs.
+export const getQualifiedPrimaryFieldsName = (): string =>
+  (PCore as any).getNameSpaceUtils?.()?.getDefaultQualifiedName(PRIMARY_FIELDS) ?? PRIMARY_FIELDS;
+
+export const isPrimaryFieldsValue = (value): boolean => value === PRIMARY_FIELDS || value === getQualifiedPrimaryFieldsName();
+
+/**
+ * Strips annotation prefixes (ex: "@P .FirstName") and the leading dot from a raw config value.
+ */
+export const getPropertyNameFromConfigValue = (configValue): string => {
+  let name = configValue ?? '';
+  if (name.startsWith('@')) {
+    name = name.substring(name.indexOf(' ') + 1);
+  }
+  if (name.startsWith('.')) {
+    name = name.substring(1);
+  }
+  return name;
+};
+
 export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
   let primaryFields: any = [];
   let configFields: any = [];
+  const safeRawFields = rawFields || [];
 
   if (primaryFieldsViewIndex > -1) {
-    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(getQualifiedPrimaryFieldsName());
     if (Array.isArray(primaryFieldVMD)) {
       primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
       primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
@@ -166,7 +187,7 @@ export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex)
     }
   }
 
-  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  configFields = [...safeRawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...safeRawFields.slice(primaryFieldsViewIndex + 1)];
   // filter duplicate fields after combining raw fields and primary fields
   return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
 };
@@ -195,12 +216,62 @@ export function getFieldLabel(fieldConfig) {
   return fieldLabel;
 }
 
+function trimAnnotation(anno) {
+  if (typeof anno !== 'string' || !anno.startsWith('@')) return anno;
+  const spaceIndex = anno.indexOf(' ');
+  if (spaceIndex === -1) return anno;
+  return anno.substring(spaceIndex + 1);
+}
+
+/**
+ * Resolves an "@FL" label from the data model and localizes it using the property's locale reference.
+ */
+function getLocalizedFieldLabel(fieldConfig, pConnect) {
+  const { classID, label, caption } = fieldConfig;
+  let fieldLabel = getPropertyNameFromConfigValue(label || caption);
+  const fieldMetaData: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(fieldLabel, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? fieldLabel;
+  const localeValue = pConnect.getLocalizationService(fieldMetaData.localeReference).getLocalizedText(fieldLabel);
+  return localeValue || fieldLabel;
+}
+
+export function resolveFieldLabel(fieldViewMetadata, pConnect, classID?) {
+  const fieldClassID = classID || fieldViewMetadata.config.classID;
+  if (fieldClassID && pConnect) {
+    const fieldConfig: any = {
+      meta: fieldViewMetadata,
+      options: {
+        ...pConnect.options,
+        hasForm: false,
+        localeReference: pConnect.getLocaleRuleName()
+      },
+      useCustomContext: { classID: fieldClassID }
+    };
+    const fieldPConnect = PCore.createPConnect(fieldConfig).getPConnect();
+    const resolvedProps: any = fieldPConnect.resolveConfigProps({
+      label: fieldViewMetadata.config.label || fieldViewMetadata.config.caption
+    });
+    if (resolvedProps.label) return resolvedProps.label;
+  }
+
+  let label = fieldViewMetadata.config.label || fieldViewMetadata.config.caption;
+  if (isFLProperty(label)) {
+    label = getLocalizedFieldLabel(fieldViewMetadata.config, pConnect);
+  } else {
+    label = trimAnnotation(label);
+  }
+  if (pConnect) {
+    label = pConnect.getLocalizedValue(label);
+  }
+  return label;
+}
+
 export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
   const labelsOfFields: any = [];
   const { columnsRawConfig = [] } = options;
   fields.forEach((field, idx) => {
     const rawColumnConfig = columnsRawConfig[idx]?.config;
-    if (field.config.value === PRIMARY_FIELDS) {
+    if (isPrimaryFieldsValue(field.config.value)) {
       labelsOfFields.push('');
     } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
       labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
@@ -217,7 +288,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
         let label = configFields[i].config?.label;
         if (isFLProperty(label)) {
           label = getFieldLabel(configFields[i].config);
-        } else if (label.startsWith('@')) {
+        } else if (label?.startsWith('@')) {
           label = label.substring(3);
         }
         if (pConnect) {
@@ -233,13 +304,10 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
   return labelsOfFields;
 };
 
-export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
-  const { primaryFieldsViewIndex, fields } = options;
+export const buildFieldsForTable = (configFields, pConnect, showActionColumn, options) => {
+  const { classID } = options;
 
-  // get resolved field labels for primary fields raw config included in configFields
-  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
-  });
+  const fieldsLabels = configFields?.map(field => resolveFieldLabel(field, pConnect, classID)) ?? [];
 
   const fieldDefs = configFields?.map((field, index) => {
     return {
@@ -247,7 +315,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
       label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
-      name: field.config.value.substr(4),
+      name: getPropertyNameFromConfigValue(field.config.value),
       cellRenderer: TABLE_CELL,
       sort: false,
       noContextMenu: true,
@@ -256,12 +324,12 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
         ...field
       },
       // BUG-615253: Workaround for autosize in table with lazy loading components
-      width: getFieldWidth(field, fields[index].config.label)
+      width: getFieldWidth(field, fieldsLabels[index])
     };
   });
 
-  // ONLY add DELETE_ICON to fields when the table is requested as EDITABLE
-  if (showDeleteButton) {
+  // Add the action column when either edit or delete is available.
+  if (showActionColumn) {
     fieldDefs.push({
       type: 'text',
       label: '',
@@ -354,8 +422,8 @@ export const filterDataByDate = (item, filterObj) => {
 
 export const filterDataByCommonFields = (item, filterObj) => {
   let bKeep = true;
-  const value = item[filterObj.ref].toLowerCase();
-  const filterValue = filterObj.containsFilterValue.toLowerCase();
+  const value = String(item?.[filterObj.ref] ?? '').toLowerCase();
+  const filterValue = String(filterObj.containsFilterValue ?? '').toLowerCase();
 
   switch (filterObj.containsFilter) {
     case 'contains':