@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

package/tests/assets/sdk-a/components/create/override-sdk/template/dynamic-tabs/dynamic-tabs.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, OnDestroy, OnInit, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { CommonModule } from '@angular/common';
+import { buildView } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface DynamicTabsProps {
+  referenceList: string;
+  template: string;
+}
+
+@Component({
+  selector: 'app-dynamic-tabs',
+  templateUrl: './dynamic-tabs.component.html',
+  styleUrls: ['./dynamic-tabs.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DynamicTabsComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  tabsItems: any[];
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // 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() {
+    const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+
+    const { tablabel } = this.pConn$.getComponentConfig();
+    const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+
+    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('readOnly', true);
+
+    const referenceListData: any = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+
+    this.tabsItems =
+      referenceListData?.map((item, i) => {
+        const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+        return {
+          id: i,
+          name: currentTabLabel,
+          content: buildView(this.pConn$, i, '')
+        };
+      }) || [];
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.ts

@@ -149,20 +149,12 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   addFieldGroupItem() {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for insert method
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
   }
 
   deleteFieldGroupItem(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+    this.pConn$.getListActions().deleteEntry(index);
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/field-value-list/field-value-list.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
-    {{ value$ || '---' }}
+    <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
   </div>
 </div>
 
@@ -9,7 +9,12 @@
   <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
     <div class="psdk-grid-label">{{ label$ }}</div>
     <div class="psdk-val-stacked">
-      {{ value$ || '---' }}
+      <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
     </div>
   </div>
 </ng-template>
+
+<ng-template #valueTemplate>
+  <div *ngIf="isHtml$; else valueOnly" id="instruction-text" [innerHTML]="value$ || '---'"></div>
+  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>
+</ng-template>

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

@@ -12,4 +12,5 @@ export class FieldValueListComponent {
   @Input() label$: any;
   @Input() value$: any;
   @Input() displayMode$: any;
+  @Input() isHtml$ = false;
 }

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

@@ -0,0 +1,10 @@
+{
+    "componentKey": "InlineDashboardPage",
+    "name": "InlineDashboardPage",
+    "label": "Inline Dashboard",
+    "description": "Inline Dashboard Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "icon": "InlineDashboardPage.svg",
+    "properties": []
+}

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

@@ -50,7 +50,7 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
                   {{ element[dCol.config.name] || '---' }}
@@ -114,10 +114,10 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </ng-template>
               </td>
             </ng-container>
@@ -150,20 +150,20 @@
             <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-radio-button [value]="row[rowID]" (change)="fieldOnChange(row)"></mat-radio-button>
+                <mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
               </td>
             </ng-container>
             <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-checkbox [value]="row[rowID]" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
+                <mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
               </td>
             </ng-container>
             <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
               <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
                 {{ dCol.config.label }}
               </th>
-              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>

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

@@ -40,6 +40,8 @@ interface ListViewProps {
   presets?: any;
   reorderFields: string | boolean;
   grouping: string | boolean;
+  value: any;
+  readonlyContextList: any;
 }
 
 export class Group {
@@ -156,6 +158,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   fieldDefs: any;
   xRayApis = PCore.getDebugger().getXRayRuntime();
   xRayUid = this.xRayApis.startXRay();
+  checkBoxValue: string;
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -169,7 +172,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
     this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
-    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload.globalSearch);
+    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$?.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;
@@ -184,6 +187,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     this.selectionMode = this.configProps$.selectionMode;
 
+    this.checkBoxValue = this.configProps$.value;
+
     this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
     this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
 
@@ -353,7 +358,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getListData() {
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
     const componentConfig = this.pConn$.getComponentConfig();
     if (this.configProps$) {
       this.preparePayload();
@@ -364,8 +368,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
       const dataViewParameters = this.payload.parameters;
 
       const workListDataPromise = !this.bInForm$
-        ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
-          PCore.getDataApiUtils().getData(refList, payload)
+        ? PCore.getDataApiUtils().getData(refList, payload)
         : PCore.getDataPageUtils().getDataAsync(
             refList,
             this.pConn$.getContextName(),
@@ -505,6 +508,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  isChecked(rowIn): any {
+    const initialVal = false;
+    return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
+      return acc || rowIn[this.rowID] === currRow[this.rowID];
+    }, initialVal);
+  }
+
   fieldOnChange(row) {
     const value = row[this.rowID];
     const reqObj = {};
@@ -517,6 +527,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     } else {
       reqObj[this.rowID] = value;
     }
+    this.checkBoxValue = value;
     this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
   }
 
@@ -601,7 +612,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
         this.pConn$.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
-        });
+        } as any);
       } else {
         this.pConn$.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
       }
@@ -619,10 +630,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
-  compare(a: number | string, b: number | string, isAsc: boolean) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
   _headerSortClick(event, columnData) {
     // images 0 - filter, 1 - arrow, 2 - more
 
@@ -655,21 +662,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.filterSortGroupBy();
   }
 
-  clearOutArrows(event, columnData) {
-    const arImages = event.srcElement.parentElement.getElementsByTagName('img');
-
-    for (const theImage of arImages) {
-      // let theImage = arImages[i]
-      const arrow = theImage.getAttribute('arrow');
-      if (arrow) {
-        const arrowId = theImage.getAttribute('arrowid');
-        if (arrow != 'none' && arrowId != columnData.config.name) {
-          theImage.setAttribute('arrow', 'none');
-          theImage.src = '';
-        }
-      }
-    }
-  }
+  // Commenting below method, since the code which is using it, is already commented
+  // clearOutArrows(event, columnData) {
+  //   const arImages = event.srcElement.parentElement.getElementsByTagName('img');
+
+  //   for (const theImage of arImages) {
+  //     // let theImage = arImages[i]
+  //     const arrow = theImage.getAttribute('arrow');
+  //     if (arrow) {
+  //       const arrowId = theImage.getAttribute('arrowid');
+  //       if (arrow != 'none' && arrowId != columnData.config.name) {
+  //         theImage.setAttribute('arrow', 'none');
+  //         theImage.src = '';
+  //       }
+  //     }
+  //   }
+  // }
 
   sortCompare(a, b): number {
     let aValue = a[this.compareRef];
@@ -689,18 +697,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     switch (this.arrowDirection) {
       case 'up':
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return -1;
         }
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return 1;
         }
         break;
       case 'down':
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return -1;
         }
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return 1;
         }
         break;

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

@@ -25,7 +25,6 @@ export function useInit(props) {
   let selectionCountThreshold;
 
   // promise to fetch metadata
-  // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
   const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
 
   const promisesArray = [metaDataPromise];

package/tests/assets/sdk-a/components/create/override-sdk/template/repeating-structures/repeating-structures.component.ts

@@ -41,8 +41,7 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.fields$ = this.initializeColumns(componentConfig.fields);
 
-    const refList = this.configProps$.referenceList;
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    const refList: any = this.configProps$.referenceList;
     const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
 
     // update elements like date format

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

@@ -87,10 +87,8 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     const { multiRecordDisplayAs } = this.configProps$;
     let { contextClass } = this.configProps$;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     if (multiRecordDisplayAs === 'fieldGroup') {

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

@@ -130,7 +130,7 @@ export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
       type: 'text',
       label: fields[index].config.label || fields[index].config.caption,
       fillAvailableSpace: !!field.config.fillAvailableSpace,
-      id: index,
+      id: `${index}`,
       name: field.config.value.substr(4),
       cellRenderer: TABLE_CELL,
       sort: false,

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

@@ -27,7 +27,7 @@
             </mat-menu>
           </div>
         </th>
-        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
         <div *ngIf="allowEditingInModal">

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

@@ -157,6 +157,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   editView: any;
   settingsSvgIcon$: string;
 
+  isInitialized = false;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
@@ -164,6 +166,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.isInitialized = true;
     // 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 SimpleTableManualProps;
@@ -246,10 +249,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     this.contextClass = contextClass;
@@ -300,6 +301,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula and we may not end up using it all.
     this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+    this.initializeDefaultPageInstructions();
+
     // end of from Nebula
 
     // Here, we use the "name" field in fieldDefs since that has the assoicated property
@@ -348,9 +351,25 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  initializeDefaultPageInstructions() {
+    if (this.isInitialized) {
+      this.isInitialized = false;
+      if (this.allowEditingInModal) {
+        // @ts-ignore - An argument for 'uniqueField' was not provided.
+        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());
+      }
+    }
+  }
+
   getResultsText() {
     const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
-    return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
+    return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
   sortCompare(a, b): number {
@@ -369,13 +388,28 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       }
     }
 
-    if (aValue === bValue) {
-      return 0;
+    //
+    switch (this.arrowDirection) {
+      case 'up':
+        if (!aValue || aValue < bValue) {
+          return -1;
+        }
+        if (!bValue || aValue > bValue) {
+          return 1;
+        }
+        break;
+      case 'down':
+        if (!bValue || aValue > bValue) {
+          return -1;
+        }
+        if (!aValue || aValue < bValue) {
+          return 1;
+        }
+        break;
+      default:
+        break;
     }
 
-    if (this.arrowDirection === 'up') return aValue - bValue;
-    if (this.arrowDirection === 'down') return bValue - aValue;
-
     return 0;
   }
 
@@ -889,12 +923,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
           this.referenceList.length,
           PCore.getConstants().RESOURCE_STATUS.CREATE
         );
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
     } else {
       // @ts-ignore - second parameter "pageRef" is optional for insert method
       this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
+
+    this.pConn$.clearErrorMessages({
+      property: (this.pConn$.getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   }
 
   editRecord(data, index) {
@@ -912,12 +948,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   deleteRecord(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+    this.pConn$.getListActions().deleteEntry(index);
   }
 
   buildElementsForTable() {
@@ -928,9 +960,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       this.rawFields?.forEach(item => {
         const referenceListData = getReferenceList(this.pConn$);
         const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage
-          ? `${referenceListData}[${index}]`
-          : `${this.pConn$.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
         const config = {
           meta: item,
           options: {

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

@@ -85,10 +85,8 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
         contextPageReference = pageReference.concat('.').concat(referenceProp);
       }
       const metadata = isMultiSelectMode
-        ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
-        : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
+        ? this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
+        : this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
 
       const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = metadata;
 

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.html

@@ -0,0 +1,32 @@
+<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+  <mat-toolbar-row mat-icon-button>
+    <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
+      <div>
+        <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
+      </div>
+      <div class="psdk-nav-portal-info">
+        <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
+      </div>
+    </div>
+
+    <div *ngFor="let page of navPages$">
+      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
+        <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
+      </div>
+    </div>
+
+    <span class="spacer"></span>
+
+    <mat-list>
+      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+        <div class="flex-box">
+          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        </div>
+      </mat-list-item>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Profile</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
+      </mat-menu>
+    </mat-list>
+  </mat-toolbar-row>
+</mat-toolbar>