@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,47 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsWideNarrowComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsWideNarrowComponent extends DetailsTemplateBase {}

package/lib/template/dynamic-tabs/dynamic-tabs.component.html

@@ -4,5 +4,6 @@
 <mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
   <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
     <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
+    <component-mapper name="reference" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
   </mat-tab>
 </mat-tab-group>

package/lib/template/field-group-template/field-group-template.component.ts

@@ -43,6 +43,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   readonlyMode: boolean;
   contextClass: any;
   heading: any;
+  headingPath: string[] = [];
   children: any;
   menuIconOverride$: any;
   referenceListLength = signal<number | null>(null);
@@ -131,8 +132,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
 
     if (this.referenceListLength() != referenceList?.length) {
-      // @ts-ignore - Expected 3 arguments, but got 1
-      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList, []);
 
       this.children = referenceList?.map((item, index) => {
         return {
@@ -150,11 +150,24 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     return `${heading} ${index + 1}`;
   };
 
-  getDynamicHeader = (item, index) => {
-    if (this.heading && item[this.heading.substring(1)]) {
-      return item[this.heading.substring(1)];
+  getDynamicHeader = (item: Record<string, unknown>, index: number): string => {
+    if (this.heading) {
+      let value: any = item;
+      this.headingPath = this.heading.substring(1).split('.');
+
+      for (const key of this.headingPath) {
+        if (value === null || typeof value !== 'object' || !(key in value)) {
+          value = undefined;
+          break;
+        }
+        value = Reflect.get(value, key);
+      }
+
+      if (value !== undefined && value !== null && value !== '') {
+        return value.toString();
+      }
     }
-    return `Row ${index + 1}`;
+    return `${PCore.getLocaleUtils().getLocaleValue('Row', 'SimpleTable')} ${index + 1}`;
   };
 
   addFieldGroupItem() {

package/lib/template/field-value-list/field-value-list.component.scss

@@ -21,3 +21,20 @@
 .psdk-val-labels-left {
   white-space: break-spaces;
 }
+
+.psdk-container-stacked-large-val {
+  margin: 8px 0;
+}
+
+.psdk-container-stacked-large-val .psdk-grid-label {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.psdk-val-stacked {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.25rem;
+  line-height: 1.5;
+}

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { buildFilterComponents } from '@pega/angular-sdk-components';
@@ -17,7 +17,7 @@ interface InlineDashboardPageProps {
   styleUrls: ['./inline-dashboard-page.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class InlineDashboardPageComponent implements OnInit, OnChanges {
+export class InlineDashboardPageComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: InlineDashboardPageProps;
@@ -34,14 +34,6 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
     this.updateSelf();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const { pConn$ } = changes;
-
-    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
-      this.updateSelf();
-    }
-  }
-
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
     const arChildren$ = this.pConn$.getChildren();

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

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

package/lib/template/one-column/one-column.component.html

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

package/lib/template/one-column-tab/one-column-tab.component.html

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

package/lib/template/page/page.component.html

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

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

@@ -2,7 +2,9 @@
   <div class="psdk-self-service-case-view-header">
     <div class="heading">{{ this.heading$ }}</div>
     <div *ngIf="showCaseActions" class="psdk-case-view-buttons">
-      <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)">
@@ -14,6 +16,16 @@
             {{ 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>

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

@@ -1,24 +1,109 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { SelfServiceCaseViewComponent } from './self-service-case-view.component';
 
 describe('SelfServiceCaseViewComponent', () => {
   let component: SelfServiceCaseViewComponent;
-  let fixture: ComponentFixture<SelfServiceCaseViewComponent>;
+  let actionsApi: { openDataObjectAction: jasmine.Spy; createWork: jasmine.Spy };
+  let dataInfoActions: any;
+  let configProps: any;
+  let dataRecord: any;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [SelfServiceCaseViewComponent]
-    }).compileComponents();
-  }));
+  const utilityChild = {
+    getPConnect: () => ({ getRawMetadata: () => ({ type: 'region', name: 'Utilities', children: [] }) })
+  };
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SelfServiceCaseViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    (globalThis as any).PCore = {
+      getLocaleUtils: () => ({ getLocaleValue: (value: string) => value }),
+      getCaseUtils: () => ({ isObjectCaseType: () => false })
+    };
+
+    actionsApi = {
+      openDataObjectAction: jasmine.createSpy('openDataObjectAction'),
+      createWork: jasmine.createSpy('createWork')
+    };
+    dataInfoActions = undefined;
+    dataRecord = { PlanID: 'P-1' };
+    // Summary region is switched off so the test does not depend on case summary metadata.
+    configProps = { icon: 'case', header: 'Header', subheader: 'ID-1', showSummaryRegion: false, showCaseActions: true };
+
+    const utils = {
+      getImageSrc: () => '',
+      getSDKStaticContentUrl: () => '',
+      getBooleanValue: (value: any) => value === true || value === 'true'
+    } as any;
+
+    component = new SelfServiceCaseViewComponent({} as any, utils);
+    component.pConn$ = {
+      resolveConfigProps: () => configProps,
+      getConfigProps: () => configProps,
+      getCaseLocaleReference: () => 'MY-CLASS!CASE!MY-CASE',
+      getChildren: () => [utilityChild, utilityChild, utilityChild, utilityChild, utilityChild],
+      getLocalizationService: () => ({ getLocalizedText: (value: string) => value }),
+      getDataObject: () => ({ caseInfo: { ID: 'C-1', availableActions: [], availableProcesses: [] } }),
+      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);
+    expect(component.bActionsMenuDisabled$).toBeFalse();
+  });
+
+  it('falls back to empty arrays and disables the menu when nothing is available', () => {
+    component.fullUpdate();
+
+    expect(component.arDataObjectActions$).toEqual([]);
+    expect(component.arCreateCaseActions$).toEqual([]);
+    expect(component.bActionsMenuDisabled$).toBeTrue();
+  });
+
+  it('keeps honouring the showCaseActions configuration flag', () => {
+    configProps = { ...configProps, showCaseActions: false };
+
+    component.fullUpdate();
+
+    expect(component.showCaseActions).toBeFalse();
+  });
+
+  it('preserves the case locale reference used for action labels', () => {
+    component.fullUpdate();
+
+    expect(component.localeKey).toBe('MY-CLASS!CASE!MY-CASE');
+  });
+
+  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' }] }
+    });
+
+    expect(actionsApi.createWork).toHaveBeenCalledWith('My-Work-Class', { startingFields: { PlanRef: { PlanID: 'P-1' } } });
+  });
 });

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

@@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { prepareCaseSummaryData } from '@pega/angular-sdk-components';
+import { CreateCaseAction, DataObjectAction, DataObjectActions } from '@pega/angular-sdk-components';
 
 interface SelfServiceCaseViewProps {
   // If any, enter additional props that only exist on this component
@@ -45,6 +46,9 @@ export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
 
   arAvailableActions$: any[] = [];
   arAvailabeProcesses$: any[] = [];
+  arDataObjectActions$: DataObjectAction[] = [];
+  arCreateCaseActions$: CreateCaseAction[] = [];
+  bActionsMenuDisabled$ = true;
 
   caseSummaryPConn$: any;
   currentCaseID = '';
@@ -102,10 +106,31 @@ export class SelfServiceCaseViewComponent 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 SelfServiceCaseViewComponent 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();
 
     const { showCaseLifecycle = true, showSummaryRegion = true, showUtilitiesRegion = true, showCaseActions = true, caseClass } = this.configProps$;
     this.showCaseLifecycle = this.utils.getBooleanValue(showCaseLifecycle);
@@ -204,4 +228,29 @@ export class SelfServiceCaseViewComponent 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/simple-table/simple-table.component.ts

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