@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/template/app-shell/app-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
@@ -52,14 +52,14 @@ export class AppShellComponent implements OnInit, OnDestroy {
   bOkDisplayError = false;
   portalTemplate: string;
   links: any = [];
-  imageURL: string | Blob;
+  imageURL: string | Blob | null;
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private utils: Utils
   ) {}
 
@@ -89,7 +89,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
       PCore.getEnvironmentInfo().setEnvironmentInfo({ ...PCore.getEnvironmentInfo().environmentInfoObject, pyPortalTemplate: 'wss' } as any);
     }
 
-    // @ts-ignore - Property 'pyCaseTypesAvailableToCreateDP' does not exist on type pxApplication
     const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
     if (caseTypesAvailableToCreateDP) {
       const portalID = this.pConn$.getValue('.pyOwner');
@@ -152,17 +151,15 @@ export class AppShellComponent implements OnInit, OnDestroy {
     const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
     const envPortalName = envInfo.getPortalName();
 
-    this.ngZone.run(() => {
-      // making a copy, so can add info
-      this.pages$ = this.configProps$.pages;
+    // making a copy, so can add info
+    this.pages$ = this.configProps$.pages;
 
-      if (this.pages$) {
-        this.bShowAppShell$ = true;
-      }
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
 
-      this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren();
-    });
+    this.caseTypes$ = this.configProps$.caseTypes;
+    this.arChildren$ = this.pConn$.getChildren();
 
     const portalLogo = this.configProps$.portalLogo;
     // using the default icon then fetch it from the static folder (not auth involved)
@@ -181,12 +178,14 @@ export class AppShellComponent implements OnInit, OnDestroy {
         .getSvcImageUrl(portalLogo)
         .then(data => {
           this.imageURL = data;
+          this.cdRef.markForCheck();
         })
         .catch(() => {
           console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
     this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
+    this.cdRef.markForCheck();
   }
 
   // fpr show/hiding error messages in the SnackBar component
@@ -244,5 +243,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
       default:
         break;
     }
+    this.cdRef.markForCheck();
   }
 }

package/lib/template/banner-page/banner-page.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
 
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
@@ -59,6 +58,6 @@ export class BannerPageComponent implements OnInit, OnChanges {
     this.backgroundImage = this.configProps$.backgroundImage;
 
     // The children may contain 'reference' components, so normalize the children...
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/base/details-template-base.ts

@@ -1,15 +1,20 @@
 import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
 @Directive()
 export class DetailsTemplateBase implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
 
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
 
-  childrenMetadataOld;
+  children: any[] = [];
+  propsToUse: any = {};
+  showHighlightedData: boolean;
+  highlightedDataArr: any = [];
 
   constructor(injector: Injector) {
     this.angularPConnect = injector.get(AngularPConnectService);
@@ -37,23 +42,13 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
     // Only call updateSelf when the component should update
-    if (bUpdateSelf || this.hasRawMetadataChanged()) {
+    if (bUpdateSelf) {
       this.updateSelf();
     }
   }
 
-  // this method will get overriden by the child component
-  updateSelf() {}
-
-  hasRawMetadataChanged(): boolean {
-    const newChildrenMetadata = this.fetchChildrenMetadata();
-
-    if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) {
-      this.childrenMetadataOld = newChildrenMetadata;
-      return true;
-    }
-
-    return false;
+  updateSelf() {
+    this.updateDetailsProps();
   }
 
   fetchChildrenMetadata() {
@@ -64,4 +59,36 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
       return pConnect.resolveConfigProps(pConnect.getRawMetadata());
     });
   }
+
+  updateDetailsProps() {
+    const { label, showLabel, showHighlightedData } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    this.showHighlightedData = showHighlightedData;
+
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    this.pConn$.setInheritedProp('readOnly', true);
+
+    this.children = this.pConn$.getChildren() as any[];
+
+    // Process highlighted fields for display in the highlighted section
+    this.highlightedDataArr = this.processHighlightedFields();
+  }
+
+  processHighlightedFields(): any[] {
+    if (!this.showHighlightedData) return [];
+
+    const { highlightedData = [] } = (this.pConn$.getRawMetadata() as any).config;
+
+    return (highlightedData ?? []).map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+      field.config.readOnly = true;
+
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return this.pConn$.createComponent(field, '', 0, {}).getPConnect();
+    });
+  }
 }

package/lib/template/base/form-template-base.ts

@@ -7,8 +7,6 @@ export class FormTemplateBase implements OnDestroy {
   angularPConnectData: AngularPConnectData;
 
   ngOnDestroy(): void {
-    PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
-
     if (this.angularPConnectData?.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();
     }

package/lib/template/case-summary/case-summary.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import { getAllFields } from '@pega/angular-sdk-components';
 
 interface CaseSummaryProps {
   // If any, enter additional props that only exist on this component
@@ -52,11 +52,6 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   initComponent() {
-    // dereference the View in case the incoming pConn$ is a 'reference'
-    this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
-
-    // Then, continue on with other initialization
-
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
     this.arChildren$ = this.pConn$.getChildren();
 
@@ -79,7 +74,20 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
     this.generatePrimaryAndSecondaryFields();
+    this.status$ = this.configProps$.status;
+    this.bShowStatus$ = this.configProps$.showStatus;
+  }
+
+  additionalProps() {
+    const allFields = getAllFields(this.pConn$);
+    const fields = {
+      primaryFields: allFields[0],
+      secondaryFields: allFields[1]
+    };
+
+    return this.pConn$.resolveConfigProps(fields);
   }
 
   ngOnChanges() {
@@ -92,7 +100,7 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
 
     for (const oField of this.arChildren$[0].getPConnect().getChildren()) {
       const kid = oField.getPConnect();
-      this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
+      this.primaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid });
     }
 
     const secondarySummaryFields = this.prepareCaseSummaryData(this.arChildren$[1].getPConnect());

package/lib/template/case-view/case-view.component.html

@@ -17,7 +17,9 @@
 
     <div class="psdk-case-view-buttons">
       <button *ngIf="editAction" mat-raised-button color="secondary" (click)="_editClick()">{{ localizedVal('Edit', localeCategory) }}</button>
-      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
+      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu" [disabled]="bActionsMenuDisabled$">
+        {{ localizedVal('Actions...', localeCategory) }}
+      </button>
       <mat-menu #actionMenu="matMenu" overlapTrigger="false">
         <ng-container *ngFor="let action of arAvailableActions$">
           <button mat-menu-item (click)="_menuActionClick(action)">
@@ -29,13 +31,23 @@
             {{ process.name }}
           </button>
         </ng-container>
+        <ng-container *ngFor="let action of arDataObjectActions$">
+          <button mat-menu-item (click)="_menuDataObjectActionClick(action)">
+            {{ localizedVal(action.name, '', localeKey) }}
+          </button>
+        </ng-container>
+        <ng-container *ngFor="let action of arCreateCaseActions$">
+          <button mat-menu-item (click)="_menuCreateCaseActionClick(action)">
+            {{ localizedVal(action.name, '', localeKey) }}
+          </button>
+        </ng-container>
       </mat-menu>
     </div>
 
     <div class="psdk-case-view-divider"></div>
 
     <div class="psdk-case-view-summary">
-      <component-mapper name="CaseSummary" [props]="{ pConn$: caseSummaryPConn$ }"></component-mapper>
+      <component-mapper name="reference" [props]="{ pConn$: caseSummaryPConn$ }"></component-mapper>
     </div>
 
     <component-mapper

package/lib/template/case-view/case-view.component.spec.ts

@@ -1,24 +1,133 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ChangeDetectorRef } from '@angular/core';
 
 import { CaseViewComponent } from './case-view.component';
 
 describe('CaseViewComponent', () => {
   let component: CaseViewComponent;
-  let fixture: ComponentFixture<CaseViewComponent>;
+  let actionsApi: { openDataObjectAction: jasmine.Spy; createWork: jasmine.Spy };
+  let dataInfoActions: any;
+  let dataRecord: any;
+  let caseInfo: any;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [CaseViewComponent]
-    }).compileComponents();
-  }));
+  const tabsChild = {
+    getPConnect: () => ({
+      getRawMetadata: () => ({ type: 'region', name: 'Tabs' }),
+      getChildren: () => []
+    })
+  };
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CaseViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    (globalThis as any).PCore = {
+      getLocaleUtils: () => ({ getLocaleValue: (value: string) => value })
+    };
+
+    actionsApi = {
+      openDataObjectAction: jasmine.createSpy('openDataObjectAction'),
+      createWork: jasmine.createSpy('createWork')
+    };
+    dataInfoActions = undefined;
+    dataRecord = { PlanID: 'P-1', CustomerID: 'C-9' };
+    caseInfo = { ID: 'C-1', availableActions: [], availableProcesses: [] };
+
+    const cdRef = { detectChanges: () => {}, markForCheck: () => {} } as unknown as ChangeDetectorRef;
+    const utils = { getImageSrc: () => '', getSDKStaticContentUrl: () => '' } as any;
+
+    component = new CaseViewComponent(cdRef, {} as any, utils);
+    component.pConn$ = {
+      resolveConfigProps: (props: any) => props,
+      getConfigProps: () => ({ icon: 'case', header: 'Header', subheader: 'ID-1' }),
+      getCaseInfo: () => ({ getClassName: () => 'My-Class', getName: () => 'My Case' }),
+      getChildren: () => [tabsChild],
+      getLocalizationService: () => ({ getLocalizedText: (value: string) => value }),
+      getDataObject: () => ({ caseInfo }),
+      getValue: (prop: string, context?: string) => {
+        if (prop === '.actions' && context === 'dataInfo') return dataInfoActions;
+        if (prop === '.content' && context === 'dataInfo') return dataRecord;
+        if (prop === '.classID' && context === 'dataInfo.content') return 'My-Data-Class';
+        if (context === '') return dataRecord[prop.slice(1)];
+        return undefined;
+      },
+      getActionsApi: () => actionsApi
+    } as any;
+    component.localizedVal = (value: string) => value;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('lists data object actions published under dataInfo', () => {
+    dataInfoActions = {
+      availableActions: [{ ID: 'Edit', name: 'Edit' }],
+      availableCreateCaseActions: [{ ID: 'My-Work-Class', name: 'Request Plan Change' }]
+    };
+
+    component.fullUpdate();
+
+    expect(component.arDataObjectActions$.length).toBe(1);
+    expect(component.arCreateCaseActions$.length).toBe(1);
+  });
+
+  it('falls back to empty arrays when the dataInfo context is absent', () => {
+    dataInfoActions = undefined;
+
+    component.fullUpdate();
+
+    expect(component.arDataObjectActions$).toEqual([]);
+    expect(component.arCreateCaseActions$).toEqual([]);
+  });
+
+  it('disables the actions menu when no action of any kind is available', () => {
+    component.fullUpdate();
+
+    expect(component.bActionsMenuDisabled$).toBeTrue();
+  });
+
+  it('enables the actions menu when only data object actions are available', () => {
+    dataInfoActions = { availableActions: [{ ID: 'Edit', name: 'Edit' }] };
+
+    component.fullUpdate();
+
+    expect(component.bActionsMenuDisabled$).toBeFalse();
+  });
+
+  it('picks up case actions that arrive after the first update, without a case ID change', () => {
+    component.fullUpdate();
+    expect(component.bActionsMenuDisabled$).toBeTrue();
+    expect(component.editAction).toBeUndefined();
+
+    caseInfo.availableActions = [{ ID: 'pyUpdateCaseDetails', name: 'Edit details' }];
+    component.updateCaseActions();
+
+    expect(component.arAvailableActions$.length).toBe(1);
+    expect(component.editAction).toBeTruthy();
+    expect(component.bActionsMenuDisabled$).toBeFalse();
+  });
+
+  it('opens a data object action with the record class and content', () => {
+    component._menuDataObjectActionClick({ ID: 'updateCVV', name: 'Update CVV' });
+
+    expect(actionsApi.openDataObjectAction).toHaveBeenCalledWith('My-Data-Class', dataRecord, 'updateCVV', 'Update CVV');
+  });
+
+  it('starts a new case with starting fields nested under the target reference field', () => {
+    component._menuCreateCaseActionClick({
+      ID: 'My-Work-Class',
+      name: 'Request Plan Change',
+      targetDataReferenceField: {
+        field: 'PlanRef',
+        inputs: [{ linkedField: 'PlanID' }, { linkedField: 'CustomerID' }]
+      }
+    });
+
+    expect(actionsApi.createWork).toHaveBeenCalledWith('My-Work-Class', {
+      startingFields: { PlanRef: { PlanID: 'P-1', CustomerID: 'C-9' } }
+    });
+  });
+
+  it('starts a new case with no starting fields when the action declares no inputs', () => {
+    component._menuCreateCaseActionClick({ ID: 'My-Work-Class', name: 'Request Plan Change' });
+
+    expect(actionsApi.createWork).toHaveBeenCalledWith('My-Work-Class', { startingFields: {} });
+  });
 });

package/lib/template/case-view/case-view.component.ts

@@ -8,6 +8,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { CreateCaseAction, DataObjectAction, DataObjectActions } from '@pega/angular-sdk-components';
 
 interface CaseViewProps {
   // If any, enter additional props that only exist on this component
@@ -45,6 +46,9 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   arAvailableActions$: any[] = [];
   arAvailabeProcesses$: any[] = [];
+  arDataObjectActions$: DataObjectAction[] = [];
+  arCreateCaseActions$: CreateCaseAction[] = [];
+  bActionsMenuDisabled$ = true;
 
   caseSummaryPConn$: any;
   currentCaseID = '';
@@ -98,10 +102,31 @@ export class CaseViewComponent implements OnInit, OnDestroy {
         sessionStorage.setItem('okToInitFlowContainer', 'true');
       } else {
         this.updateHeaderAndSummary();
+        this.updateCaseActions();
       }
     }
   }
 
+  // React re-reads every action source on each render. Here fullUpdate is gated on a case ID
+  // change and so runs once, while actions (and a data object's `dataInfo.actions`) arrive
+  // later, so they are all refreshed on every store update instead.
+  updateCaseActions() {
+    const caseInfo = this.pConn$.getDataObject()?.caseInfo ?? {};
+    this.arAvailableActions$ = caseInfo.availableActions ?? [];
+    this.arAvailabeProcesses$ = caseInfo.availableProcesses ?? [];
+    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+
+    const dataInfoActions: DataObjectActions = this.pConn$.getValue('.actions', 'dataInfo') ?? {};
+    this.arDataObjectActions$ = dataInfoActions.availableActions ?? [];
+    this.arCreateCaseActions$ = dataInfoActions.availableCreateCaseActions ?? [];
+
+    this.bActionsMenuDisabled$ =
+      this.arAvailableActions$.length === 0 &&
+      this.arAvailabeProcesses$.length === 0 &&
+      this.arDataObjectActions$.length === 0 &&
+      this.arCreateCaseActions$.length === 0;
+  }
+
   hasCaseIDChanged(): boolean {
     if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
       this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
@@ -144,9 +169,8 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     const caseInfo = this.pConn$.getDataObject().caseInfo;
     this.currentCaseID = caseInfo.ID;
-    this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
-    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
-    this.arAvailabeProcesses$ = caseInfo?.availableProcesses ? caseInfo.availableProcesses : [];
+
+    this.updateCaseActions();
 
     this.svgCase$ = this.utils.getImageSrc(this.configProps$.icon, this.utils.getSDKStaticContentUrl());
 
@@ -218,4 +242,29 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     openProcessAction(data.ID, { ...data });
   }
+
+  _menuDataObjectActionClick(action: DataObjectAction) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openDataObjectAction = actionsAPI.openDataObjectAction.bind(actionsAPI);
+    const classID = this.pConn$.getValue('.classID', 'dataInfo.content');
+    const dataRecord = this.pConn$.getValue('.content', 'dataInfo');
+
+    openDataObjectAction(classID, dataRecord, action.ID, this.localizedVal(action.name, '', this.localeKey));
+  }
+
+  _menuCreateCaseActionClick(action: CreateCaseAction) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const createWork = actionsAPI.createWork.bind(actionsAPI);
+    const { field, inputs } = action.targetDataReferenceField ?? {};
+    const startingFields: Record<string, any> = {};
+
+    // The engine expects the linked values nested under the target reference field.
+    if (field) {
+      inputs?.forEach(input => {
+        startingFields[field] = { ...startingFields[field], [input.linkedField]: this.pConn$.getValue(`.${input.linkedField}`, '') };
+      });
+    }
+
+    createWork(action.ID, { startingFields });
+  }
 }

package/lib/template/data-reference/data-reference.component.ts

@@ -58,6 +58,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   dataRelationshipContext: any;
   imagePosition: any;
   showImageDescription: any;
+  private isUpdatingFromDataCallback = false;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -69,7 +70,30 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.children = this.pConn$.getChildren();
     this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  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();
+    }
+  }
 
+  getData() {
+    if (this.isUpdatingFromDataCallback) {
+      return;
+    }
     if (
       this.rawViewMetadata.config?.parameters &&
       !this.isDDSourceDeferred &&
@@ -94,7 +118,9 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
                     }))
                     .filter(item => item.key); // Filtering out undefined entries
               this.dropDownDataSource = ddDataSource;
+              this.isUpdatingFromDataCallback = true;
               this.updateSelf();
+              this.isUpdatingFromDataCallback = false;
             } else {
               const ddDataSource: any = [];
               this.dropDownDataSource = ddDataSource;
@@ -110,24 +136,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  // Callback passed when subscribing to store change
-  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() {
     // Update properties based on configProps
     const theConfigProps = this.pConn$.getConfigProps();
@@ -144,8 +152,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
     this.refFieldMetadata = this.pConn$.getFieldMetadata(this.rawViewMetadata?.config?.authorContext);
     this.pyID = getMappedKey('pyID');
-    // @ts-ignore
-    const { allowImplicitRefresh } = PCore.getFieldDefaultUtils().fieldDefaults?.DataReference || {};
+    const { allowImplicitRefresh } = PCore.getFieldDefaultUtils().fieldDefaults?.['DataReference'] || {};
 
     this.allowImplicitRefresh = allowImplicitRefresh;
     this.isDDSourceDeferred =
@@ -186,6 +193,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
     this.generateChildrenToRender();
     this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
+    this.getData();
   }
 
   updatePropertiesFromProps(theConfigProps) {
@@ -256,7 +264,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     if (this.pConn$.getContextName().includes('modal') || this.pConn$.getContextName().includes('workarea')) {
       if (hasAssociatedViewConfigured || this.allowImplicitRefresh) {
         const pageReference = this.pConn$.getPageReference();
-        let pgRef: any = null;
+        let pgRef: string;
         if (pageReference.startsWith('objectInfo')) {
           pgRef = pageReference.replace('objectInfo.content', '');
         } else {
@@ -389,7 +397,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     if (['Dropdown', 'Checkbox', 'RadioButtons'].includes(type) && !config.deferDatasource && config.datasource) {
       const isCardVariant = config.variant === 'card';
       const hasParameters = this.rawViewMetadata.config?.parameters;
-      // @ts-ignore
       const isDeferDataPageCallEnabled = isCardVariant && hasParameters && !this.firstChildPConnect()?.getSharedDataPageForReferenceList();
 
       const useDropDownDataSource = (isCardVariant && (this.dropDownDataSource || isDeferDataPageCallEnabled)) || (!isCardVariant && hasParameters);

package/lib/template/data-reference/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/lib/template/data-reference/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/lib/template/data-reference/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(),