@pega/angular-sdk-overrides 0.26.2 → 0.26.4

package/lib/infra/multi-step/multi-step.component.html

@@ -1,43 +1,35 @@
 <div *ngIf="bShow$">
-  <div *ngIf="bIsVertical$" class="psdk-vertical-stepper">
-    <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
-      <div class="psdk-vertical-step-header">
-        <div class="{{ _getVIconClass(mainStep.visited_status) }}">
-          <div class="psdk-vertical-step-icon-content">
-            <span>{{ i + 1 }}</span>
-          </div>
-        </div>
-        <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
-          {{ mainStep.name }}
-        </div>
-      </div>
-      <div class="{{ _getVBodyClass(i) }}">
-        <ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
-          <div *ngFor="let subStep of mainStep.steps">
-            <div *ngIf="subStep.visited_status == 'current'">
-              <component-mapper
-                name="AssignmentCard"
-                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-                [parent]="this"
-                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-              ></component-mapper>
+  <div
+    *ngIf="isVerticalLayout()"
+    class="psdk-vertical-stepper-container"
+    [class.stepper-start]="stepIndicator$ === 'vertical-start'"
+    [class.stepper-end]="stepIndicator$ === 'vertical'"
+  >
+    <div class="psdk-stepper-rail">
+      <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
+        <div class="psdk-vertical-step-header">
+          <div class="{{ _getVIconClass(mainStep.visited_status) }}">
+            <div class="psdk-vertical-step-icon-content">
+              <span>{{ i + 1 }}</span>
             </div>
           </div>
-        </ng-container>
-
-        <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
-          <component-mapper
-            name="AssignmentCard"
-            [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-            [parent]="this"
-            [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-          ></component-mapper>
-        </ng-container>
+          <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
+            {{ mainStep.name }}
+          </div>
+        </div>
       </div>
     </div>
+    <div class="psdk-stepper-content">
+      <component-mapper
+        name="AssignmentCard"
+        [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+        [parent]="this"
+        [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+      ></component-mapper>
+    </div>
   </div>
 
-  <div *ngIf="!bIsVertical$" class="psdk-horizontal-stepper">
+  <div *ngIf="isHorizontalLayout()" class="psdk-horizontal-stepper">
     <div class="psdk-horizontal-stepper-header-container">
       <ng-container *ngFor="let mainStep of arNavigationSteps$; let i = index">
         <div class="psdk-horizontal-step-header">

package/lib/infra/multi-step/multi-step.component.scss

@@ -143,6 +143,54 @@ mat-horizontal-stepper {
   bottom: -16px;
 }
 
+.psdk-vertical-stepper-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.psdk-vertical-stepper-container.stepper-end {
+  grid-template-columns: 1fr minmax(12rem, auto);
+  grid-template-areas: 'content stepper';
+}
+
+.psdk-vertical-stepper-container.stepper-start {
+  grid-template-columns: minmax(12rem, auto) 1fr;
+  grid-template-areas: 'stepper content';
+}
+
+.psdk-stepper-rail {
+  grid-area: stepper;
+}
+
+.psdk-stepper-content {
+  grid-area: content;
+}
+
+.psdk-stepper-rail .psdk-vertical-step {
+  position: relative;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 0.75rem;
+  top: calc(0.75rem + 1.75rem);
+  bottom: -0.25rem;
+  width: 0.0625rem;
+  background-color: var(--mat-sys-outline-variant);
+}
+
+.psdk-stepper-rail .psdk-vertical-step-label,
+.psdk-stepper-rail .psdk-vertical-step-label-selected {
+  font-size: 0.875rem;
+}
+
 .psdk-horizontal-stepper {
   background-color: transparent;
   display: block;

package/lib/infra/multi-step/multi-step.component.ts

@@ -4,6 +4,8 @@ import { FormGroup } from '@angular/forms';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+type StepIndicator = 'horizontal' | 'vertical' | 'vertical-start';
+
 @Component({
   selector: 'app-multi-step',
   templateUrl: './multi-step.component.html',
@@ -18,6 +20,7 @@ export class MultiStepComponent implements OnInit {
   @Input() arSecondaryButtons$: any[];
   @Input() arChildren$: any[];
   @Input() bIsVertical$: boolean;
+  @Input() stepIndicator$?: StepIndicator;
   @Input() arCurrentStepIndicies$: number[];
   @Input() arNavigationSteps$: any[];
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
@@ -38,6 +41,14 @@ export class MultiStepComponent implements OnInit {
     this.actionButtonClick.emit(oData);
   }
 
+  isVerticalLayout(): boolean {
+    return this.stepIndicator$ === 'vertical' || this.stepIndicator$ === 'vertical-start';
+  }
+
+  isHorizontalLayout(): boolean {
+    return !this.isVerticalLayout();
+  }
+
   _getVIconClass(status): string {
     if (status == 'current') {
       return 'psdk-vertical-step-icon-selected';

package/lib/infra/view/view.component.ts

@@ -3,17 +3,28 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getAllFields } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs',
+  'DetailsSubTabs',
+  'ListView'
+];
+
 const DETAILS_TEMPLATES = [
   'Details',
-  'DetailsFields',
   'DetailsOneColumn',
-  'DetailsSubTabs',
-  'DetailsThreeColumn',
   'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'DetailsSubTabs',
   'NarrowWideDetails',
   'WideNarrowDetails'
 ];
@@ -157,7 +168,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.showLabel$ =
       this.inheritedProps$.showLabel !== undefined
         ? this.inheritedProps$.showLabel
-        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+        : (this.configProps$.showLabel ?? isDetailsTemplate(this.templateName$));
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
@@ -183,39 +194,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     // console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
   }
 
-  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
-  //    on the component classes stored in PComponents (that Angular doesn't have)...
-  additionalProps(state: any, getPConnect: any) {
-    let propObj = {};
-
-    // We already have the template name in this.templateName$
-    if (this.templateName$ !== '') {
-      let allFields = {};
-
-      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
-      switch (this.templateName$) {
-        case 'CaseSummary':
-          allFields = getAllFields(getPConnect);
-          // eslint-disable-next-line no-case-declarations
-          const unresFields = {
-            primaryFields: allFields[0],
-            secondaryFields: allFields[1]
-          };
-          propObj = getPConnect.resolveConfigProps(unresFields);
-          break;
-
-        case 'Details':
-          allFields = getAllFields(getPConnect);
-          propObj = { fields: allFields[0] };
-          break;
-        default:
-          break;
-      }
-    }
-
-    return propObj;
-  }
-
   ngOnDestroy(): void {
     if (this.angularPConnectData.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();

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

@@ -11,7 +11,10 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
 
-  childrenMetadataOld;
+  children: any[] = [];
+  propsToUse: any = {};
+  showHighlightedData: boolean;
+  highlightedDataArr: any = [];
 
   constructor(injector: Injector) {
     this.angularPConnect = injector.get(AngularPConnectService);
@@ -39,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() {
@@ -67,47 +60,35 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     });
   }
 
-  processDetailFields(kid: any): any[] {
-    const pKid = kid.getPConnect();
-    const fields = pKid.getChildren();
-    const processedFields: any[] = [];
-
-    fields?.forEach(field => {
-      const thePConn = field.getPConnect();
-      const theCompType = thePConn.getComponentName().toLowerCase();
-      if (theCompType === 'reference' || theCompType === 'group' || theCompType === 'objectreference') {
-        const configProps = thePConn.getConfigProps();
-        configProps.readOnly = true;
-        configProps.displayMode = 'DISPLAY_ONLY';
-        const propToUse = { ...thePConn.getInheritedProps() };
-        configProps.label = propToUse?.label;
-        const options = {
-          context: thePConn.getContextName(),
-          pageReference: thePConn.getPageReference(),
-          referenceList: thePConn.getReferenceList()
-        };
-        const viewContConfig = {
-          meta: {
-            ...thePConn.getMetadata(),
-            type: theCompType,
-            config: configProps
-          },
-          options
-        };
-        const theViewCont = PCore.createPConnect(viewContConfig);
-        processedFields.push({
-          type: theCompType,
-          config: thePConn.getConfigProps(),
-          pConn: theViewCont?.getPConnect()
-        });
-      } else {
-        processedFields.push({
-          type: theCompType,
-          config: thePConn.getConfigProps()
-        });
+  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 processedFields;
+      return this.pConn$.createComponent(field, '', 0, {}).getPConnect();
+    });
   }
 }

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

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } 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
@@ -73,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() {
@@ -86,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,6 +31,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>
 

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 });
+  }
 }