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

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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: {

package/tests/assets/sdk-a/components/create/override-sdk/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -4,11 +4,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: center;
-  margin-top: 1rem;
 }
 
-.psdk-grid-nondisplay {
-  margin-top: 1rem;
+.psdk-details-reference-value {
+  margin-top: 0;
 }
 
 .psdk-label {

package/tests/assets/sdk-a/components/create/override-sdk/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -14,7 +14,7 @@ import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components'
 export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() dataRelationshipContext?: any;
+  @Input() dataRelationshipContext: any = null;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -58,17 +58,16 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const rawViewMetadata = this.pConn$.getRawMetadata();
     const label = this.configProps.label;
     const showLabel = this.configProps.showLabel;
-    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
-    const type = (rawViewMetadata?.config as any)?.componentType;
+    const inheritedProps = this.pConn$.getInheritedProps();
+    const propsToUse = { label: label || inheritedProps['label'], showLabel: inheritedProps['showLabel'] || showLabel };
+    const type = (rawViewMetadata?.config as any)?.componentType ?? rawViewMetadata?.type;
     this.displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
     const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
     const hideLabel = this.configProps.hideLabel;
-    // const additionalFields = this.configProps.additionalFields;
     const displayAs = this.configProps.displayAs ?? 'readonly';
-    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
-      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
-      : this.dataRelationshipContext;
+    const dataRelationshipContext =
+      this.dataRelationshipContext ?? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField ?? '');
     if (propsToUse.showLabel === false) {
       propsToUse.label = '';
     }
@@ -77,7 +76,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
     const config: any = {
       ...rawViewMetadata?.config,
-      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      primaryField: (rawViewMetadata?.config as any)?.displayField ?? (rawViewMetadata?.config as any)?.primaryField,
       label: this.label
     };
 

package/tests/assets/sdk-a/components/create/override-sdk/template/sub-tabs/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "SubTabs",
-    "name": "SubTabs",
-    "label": "Sub tabs",
-    "description": "Sub tabs view",
-    "type": "Template",
-    "subtype": "TAB",
-    "properties": []
-}
+  "componentKey": "SubTabs",
+  "name": "SubTabs",
+  "label": "Sub tabs",
+  "description": "Sub tabs view",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

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

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

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

@@ -1,9 +1,9 @@
 {
-    "componentKey": "ThreeColumnPage",
-    "name": "ThreeColumnPage",
-    "label": "Three column",
-    "description": "ThreeColumn Page Template",
-    "type": "Template",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "ThreeColumnPage",
+  "name": "ThreeColumnPage",
+  "label": "Three column",
+  "description": "ThreeColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

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

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

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

@@ -1,9 +1,9 @@
 {
-    "componentKey": "TwoColumnPage",
-    "name": "TwoColumnPage",
-    "label": "Two column",
-    "description": "TwoColumn Page Template",
-    "type": "Template",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "TwoColumnPage",
+  "name": "TwoColumnPage",
+  "label": "Two column",
+  "description": "TwoColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}