@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/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':

package/lib/template/simple-table-manual/simple-table-manual.component.html

@@ -3,7 +3,14 @@
     <h3 *ngIf="label" className="label" style="font-weight: bold">
       {{ label }} <span class="results-count">{{ getResultsText() }}</span>
     </h3>
-    <table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
+    <table
+      *ngIf="readOnlyMode || allowEditingInModal || hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="readonly-table"
+      matSort
+    >
       <ng-container *ngFor="let dCol of processedFields; let i = index" [matColumnDef]="dCol.config.name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
           <div>{{ dCol.config.label }}</div>
@@ -39,20 +46,25 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
-        <div *ngIf="allowEditingInModal">
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let element; index as j">
-            <div class="header-icon">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element; index as j">
+          <ng-container *ngIf="allowEditingInModal; else deleteOnly">
+            <div *ngIf="rowActions[j]?.hasAnyAction" class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
                 <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
-                <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
-                <button mat-menu-item (click)="deleteRecord(j)">Delete</button>
+                <button *ngIf="rowActions[j]?.canEdit" mat-menu-item (click)="editRecord(element, element.__originalIndex)">Edit</button>
+                <button *ngIf="rowActions[j]?.canDelete" mat-menu-item (click)="deleteRecord(element.__originalIndex)">Delete</button>
               </mat-menu>
             </div>
-          </td>
-        </div>
+          </ng-container>
+          <ng-template #deleteOnly>
+            <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ng-template>
+        </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
@@ -62,7 +74,13 @@
         </td>
       </tr>
     </table>
-    <table *ngIf="editableMode && !allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
+    <table
+      *ngIf="editableMode && !allowEditingInModal && !hideEditRow"
+      mat-table
+      [dataSource]="elementsData"
+      class="mat-elevation-z8"
+      id="editable-table"
+    >
       <ng-container *ngFor="let dCol of fieldDefs; let i = index">
         <ng-container *ngIf="dCol.name != 'DeleteIcon'" [matColumnDef]="dCol.name">
           <th mat-header-cell *matHeaderCellDef class="psdk-mat-header">{{ dCol.label }}</th>
@@ -81,7 +99,7 @@
       <ng-container matColumnDef="DeleteIcon">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
-          <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
+          <button *ngIf="rowActions[j]?.canDelete" id="delete-button" mat-icon-button (click)="deleteRecord(j)">
             <mat-icon>delete</mat-icon>
           </button>
         </td>
@@ -95,9 +113,7 @@
       </tr>
     </table>
   </div>
-  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">
-    + {{ localizedVal('Add', localeCategory) }}
-  </button>
+  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">+ {{ addButtonLabel$ }}</button>
 </ng-container>
 
 <!-- pop overs for filters-->

package/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -130,6 +130,7 @@ td.mat-mdc-cell:last-child {
   align-items: center;
   height: 100%;
   width: 100%;
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -140,10 +141,11 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 150px;
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface-container);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
 }
 
 tr.mat-mdc-row {
@@ -163,6 +165,10 @@ tr.mat-mdc-header-row {
   text-align: center;
   border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
+
+  td.mat-cell {
+    text-align: center;
+  }
 }
 
 .psdk-utility-card-action-svg-icon {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -17,7 +17,7 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { getReferenceList } from '@pega/angular-sdk-components';
-import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
+import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getConfigFields, getContext, isPrimaryFieldsValue } from './helpers';
 import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getSeconds } from '@pega/angular-sdk-components';
@@ -39,6 +39,7 @@ interface SimpleTableManualProps {
   allowActions?: any;
   allowTableEdit?: boolean;
   allowRowDelete?: any;
+  allowRowEdit?: any;
   editMode?: string;
   addAndEditRowsWithin?: any;
   viewForAddAndEditModal?: any;
@@ -46,7 +47,8 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
-  targetClassLabel: string;
+  targetClassLabel?: string;
+  uniqueField?: string;
 }
 
 class Group {
@@ -59,6 +61,12 @@ class Group {
   }
 }
 
+interface RowActions {
+  canEdit: boolean;
+  canDelete: boolean;
+  hasAnyAction: boolean;
+}
+
 @Component({
   selector: 'app-simple-table-manual',
   templateUrl: './simple-table-manual.component.html',
@@ -92,7 +100,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   bVisible$ = true;
   displayedColumns: string[] = [];
-  rowData: MatTableDataSource<any>;
+  rowData = new MatTableDataSource<any>([]);
   originalData: any[] = [];
   processedFields: any[] = [];
   fieldDefs: any[] = [];
@@ -108,6 +116,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   elementsData: MatTableDataSource<any>;
   originalElementsData: MatTableDataSource<any>;
   rawFields: any;
+  configFields: any[] = [];
+  uniqueField?: string;
+  normalizedUniqueField?: string;
   label?: string = '';
   searchIcon$: string;
 
@@ -159,12 +170,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   referenceListStr: any;
   bUseSeparateViewForEdit: any;
   editView: any;
+  editType: any;
+  defaultActionId: any;
+  editActionId: any;
   settingsSvgIcon$: string;
 
   isInitialized = false;
-  targetClassLabel: string;
+  targetClassLabel = '';
+  addButtonLabel$ = '';
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
   localeCategory = 'SimpleTable';
+  hideEditRow: any;
+  hideDeleteRow: boolean;
+  showEditButton: boolean;
+  showDeleteButton: boolean;
+  showActionColumn: boolean;
+  rowActions: RowActions[] = [];
   constructor(
     private angularPConnect: AngularPConnectService,
     public utils: Utils,
@@ -235,7 +256,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       presets,
       allowActions,
       allowTableEdit,
-      allowRowDelete,
       label: labelProp,
       propertyLabel,
       fieldMetadata,
@@ -246,9 +266,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       displayMode,
       useSeparateViewForEdit,
       viewForEditModal,
-      targetClassLabel
+      targetClassLabel,
+      uniqueField
     } = this.configProps$;
 
+    // uniqueField is authored as a property reference (ex: ".EmbedListUUID__"); page instructions expect it
+    // with the leading dot while the inserted row payload expects the bare property name.
+    this.uniqueField = uniqueField;
+    this.normalizedUniqueField = uniqueField?.startsWith('.') ? uniqueField.substring(1) : uniqueField;
+
     const simpleTableManualProps: any = {};
     if (this.checkIfAllowActionsOrRowEditingExist(allowActions) && editMode) {
       simpleTableManualProps.hideAddRow = allowActions?.allowAdd === false;
@@ -264,7 +290,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-    this.targetClassLabel = targetClassLabel;
+    this.targetClassLabel = targetClassLabel ?? '';
+    this.addButtonLabel$ = this.getAddButtonLabel();
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
@@ -301,16 +328,31 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.readOnlyMode = renderMode === 'ReadOnly';
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
+    this.showAddRowButton = this.getShowAddRowButton(simpleTableManualProps.hideAddRow);
+    this.hideEditRow = simpleTableManualProps.hideEditRow;
+    this.hideDeleteRow = simpleTableManualProps.hideDeleteRow;
     this.allowEditingInModal =
       (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
-    const showDeleteButton = this.editableMode && !simpleTableManualProps.hideDeleteRow && evaluateAllowRowAction(allowRowDelete, this.rowData);
+    this.showEditButton = this.allowEditingInModal && !this.hideEditRow;
+    this.showDeleteButton = this.editableMode && !this.hideDeleteRow;
+    this.showActionColumn = this.showEditButton || this.showDeleteButton;
+    const { allowRowEdit, allowRowDelete } = this.pConn$.getComponentConfig?.() ?? {};
+    this.rowActions = this.referenceList.map(row => this.getRowActions(row, allowRowEdit, allowRowDelete));
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
-    const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
+    this.editType = editModeConfig?.editType;
+    this.defaultActionId = this.editType === 'action' ? editModeConfig?.defaultAction : undefined;
+    this.editActionId =
+      this.editType === 'action' && editModeConfig?.useSeparateActionForEdit ? editModeConfig?.editAction : editModeConfig?.defaultAction;
+    const primaryFieldsViewIndex = resolvedFields?.findIndex(field => isPrimaryFieldsValue(field.config.value)) ?? -1;
     // const showDeleteButton = !this.readOnlyMode && !hideDeleteRow;
 
+    // "pyPrimaryFields" is a single authored column that expands into several real columns, so the
+    // resolved/raw children can no longer be used directly - configFields is the expanded column list.
+    const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+    this.configFields = configFields.filter(field => !(field?.config?.hide === true));
+
     // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
     //  so ignoring that for now...
     // fieldDefs will be an array where each entry will have a "name" which will be the
@@ -319,9 +361,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, showDeleteButton, {
+    this.fieldDefs = buildFieldsForTable(configFields, this.pConn$, this.showActionColumn, {
       primaryFieldsViewIndex,
-      fields: resolvedFields
+      fields: resolvedFields,
+      classID: contextClass
     });
     this.fieldDefs = this.fieldDefs?.filter(field => !(field.meta?.config?.hide === true));
     this.initializeDefaultPageInstructions();
@@ -335,7 +378,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return field.name ? field.name : field.cellRenderer;
     });
 
-    // And now we can process the resolvedFields to add in the "name"
+    // And now we can process the configFields to add in the "name"
     //  from from the fieldDefs. This "name" is the value that
     //  we'll share to connect things together in the table.
 
@@ -343,12 +386,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return { ...acc, [curr.name]: curr.label };
     }, {});
 
-    this.processedFields = [];
-
-    this.processedFields = resolvedFields.map((field, i) => {
-      field.config.name = this.displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
-      field.config.label = labelsMap[field.config.name] || field.config.label;
-      return field;
+    this.processedFields = this.configFields.map((field, i) => {
+      const name = this.displayedColumns[i];
+      return { ...field, config: { ...field.config, name, label: labelsMap[name] || field.config.label } };
     });
 
     // for adding rows to table when editable and not modal view
@@ -357,7 +397,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     }
 
     // for edit and adding rows in modal view and to generate readonly list
-    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal)) {
+    if (!isEqual(this.prevReferenceList, this.referenceList) && (this.readOnlyMode || this.allowEditingInModal || this.hideEditRow)) {
       this.generateRowsData();
     }
 
@@ -384,17 +424,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   initializeDefaultPageInstructions() {
-    if (this.isInitialized) {
-      this.isInitialized = false;
-      if (this.allowEditingInModal) {
-        this.pConn$.getListActions().initDefaultPageInstructions(
-          this.pConn$.getReferenceList(),
-          this.fieldDefs.filter(item => item.name).map(item => item.name)
-        );
-      } else {
-        // @ts-ignore - An argument for 'propertyNames' was not provided.
-        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
-      }
+    if (!this.isInitialized) {
+      return;
+    }
+
+    this.isInitialized = false;
+
+    if (this.allowEditingInModal) {
+      this.pConn$.getListActions().initDefaultPageInstructions(
+        this.pConn$.getReferenceList(),
+        // Temporary filter for attachments to align with constellation payload behavior.
+        this.fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name),
+        this.uniqueField
+      );
+    } else {
+      // @ts-ignore - 'propertyNames' is optional at runtime; uniqueField is passed as the 3rd argument.
+      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), undefined, this.uniqueField);
     }
   }
 
@@ -403,6 +448,30 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
+  private getRowActions(row: any, allowRowEdit: any, allowRowDelete: any): RowActions {
+    const canEdit = this.showEditButton && evaluateAllowRowAction(allowRowEdit, row);
+    const canDelete = this.showDeleteButton && this.isDeleteAllowedForRow(row, allowRowDelete);
+
+    return {
+      canEdit,
+      canDelete,
+      hasAnyAction: canEdit || canDelete
+    };
+  }
+
+  private isDeleteAllowedForRow(row: any, allowRowDelete: any): boolean {
+    if (allowRowDelete === undefined || allowRowDelete === true) return true;
+    if (typeof allowRowDelete === 'string' && allowRowDelete.startsWith('@E ')) {
+      try {
+        const expression = allowRowDelete.replace('@E ', '');
+        return PCore.getExpressionEngine().evaluate(expression, row);
+      } catch {
+        return true;
+      }
+    }
+    return false;
+  }
+
   sortCompare(a, b): number {
     let aValue = a[0][this.compareRef];
     let bValue = b[0][this.compareRef];
@@ -902,11 +971,10 @@ export class SimpleTableManualComponent 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;
   }
@@ -922,9 +990,13 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
+    let index = 0;
+
     for (const key of refKeys) {
-      valBuilder = valBuilder[key];
+      index += 1;
+      valBuilder = valBuilder[key] !== undefined || index === refKeys.length ? valBuilder[key] : valBuilder;
     }
+
     return valBuilder;
   }
 
@@ -958,20 +1030,25 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   addRecord() {
-    if (this.allowEditingInModal && this.defaultView) {
+    if (this.allowEditingInModal && (this.defaultView || this.defaultActionId)) {
       this.pConn$
         .getActionsApi()
-        // @ts-expect-error
         .openEmbeddedDataModal(
           this.defaultView,
           this.pConn$ as any,
           this.referenceListStr,
           this.referenceList.length,
           PCore.getConstants().RESOURCE_STATUS.CREATE,
-          this.targetClassLabel
+          this.targetClassLabel,
+          this.editType,
+          this.defaultActionId
         );
     } else {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+      const payload: any = { classID: this.contextClass };
+      if (this.normalizedUniqueField) {
+        payload[this.normalizedUniqueField] = crypto.randomUUID();
+      }
+      this.pConn$.getListActions().insert(payload, this.referenceList.length);
     }
 
     this.pConn$.clearErrorMessages({
@@ -979,46 +1056,65 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     });
   }
 
+  getAddButtonLabel(): string {
+    const addLabel = this.targetClassLabel
+      ? this.localizedVal('Add {0}', this.localeCategory).replace('{0}', this.targetClassLabel)
+      : this.localizedVal('Add', this.localeCategory);
+
+    return this.localizedVal(addLabel, this.localeCategory);
+  }
+
+  getShowAddRowButton(hideAddRow?: boolean): boolean {
+    return !this.readOnlyMode && !hideAddRow;
+  }
+
   editRecord(data, index) {
-    if (data) {
+    if (data && Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
+      const viewForEdit = this.bUseSeparateViewForEdit ? this.editView : this.defaultView;
       this.pConn$
         .getActionsApi()
-        // @ts-expect-error
         .openEmbeddedDataModal(
-          this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
+          viewForEdit,
           this.pConn$ as any,
           this.referenceListStr,
           index,
           PCore.getConstants().RESOURCE_STATUS.UPDATE,
-          this.targetClassLabel
+          this.targetClassLabel,
+          this.editType,
+          this.editActionId
         );
     }
   }
 
   deleteRecord(index) {
-    this.pConn$.getListActions().deleteEntry(index);
+    if (Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
+      this.pConn$.getListActions().deleteEntry(index);
+    }
   }
 
   buildElementsForTable() {
     const context = this.pConn$.getContextName();
+    const { allowRowEdit } = this.pConn$.getComponentConfig?.() ?? {};
     const eleData: any = [];
     this.referenceList.forEach((element, index) => {
+      const isRowEditable = evaluateAllowRowAction(allowRowEdit, element);
       const data: any = [];
-      this.rawFields?.forEach(item => {
+      data.__originalIndex = index;
+      this.configFields?.forEach(item => {
         if (!item?.config?.hide) {
           item = {
             ...item,
             config: {
               ...item.config,
               label: '',
-              displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined
+              displayMode: this.readOnlyMode || this.allowEditingInModal || this.hideEditRow || !isRowEditable ? 'DISPLAY_ONLY' : undefined
             }
           };
           const referenceListData = getReferenceList(this.pConn$);
           const isDatapage = referenceListData.startsWith('D_');
           const pageReferenceValue = isDatapage
             ? `${referenceListData}[${index}]`
-            : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
+            : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
           const config = {
             meta: item,
             options: {