@pega/angular-sdk-overrides 0.26.1 → 0.26.3

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,46 +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') {
-        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,
-          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 });
+  }
 }

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();
@@ -186,6 +194,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
     this.generateChildrenToRender();
     this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
+    this.getData();
   }
 
   updatePropertiesFromProps(theConfigProps) {

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

@@ -48,6 +48,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
   tabItems: any[] = [];
   searchCategoriesComp: any;
   propsToUse: any;
+  label$: string;
   tabData: any = [];
   tabCountSources: any;
   deferLoadedTabs: any;
@@ -59,6 +60,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
     this.isInitialized = true;
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.propsToUse = { ...this.pConn$.getInheritedProps() };
+    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$ };

package/lib/template/default-form/default-form.component.html

@@ -1,6 +1,22 @@
-<div *ngIf="instructions" class="psdk-default-form-instruction-text">
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
-</div>
+<ng-container *ngIf="instructions && bShowInstructions$">
+  <component-mapper
+    *ngIf="instructionBannerVariant$; else instructionText"
+    name="Alert"
+    [props]="{
+      message: instructions,
+      messageIsHtml: true,
+      severity: instructionBannerVariant$,
+      hideClose: !bDismissInstructions$
+    }"
+    [parent]="this"
+    [outputEvents]="{ onClose: dismissInstructions }"
+  ></component-mapper>
+  <ng-template #instructionText>
+    <div class="psdk-default-form-instruction-text">
+      <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+    </div>
+  </ng-template>
+</ng-container>
 <div [className]="divClass$">
   <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper

package/lib/template/default-form/default-form.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { TemplateUtils } from '@pega/angular-sdk-components';
+import { InstructionObject, TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
@@ -20,7 +20,7 @@ function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  instructions: string;
+  instructions?: string | InstructionObject;
 }
 
 @Component({
@@ -38,7 +38,10 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
 
   arChildren$: any[];
   divClass$: string;
-  instructions: string;
+  instructions: string | undefined;
+  instructionBannerVariant$: 'warning' | 'info' | 'success' | undefined;
+  bDismissInstructions$ = false;
+  bShowInstructions$ = true;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -70,6 +73,9 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    const instructionsType = this.templateUtils.getInstructionsType(configProps?.instructions);
+    this.instructionBannerVariant$ = instructionsType ? this.templateUtils.mapInstructionsTypeToBannerVariant(instructionsType) : undefined;
+    this.bDismissInstructions$ = this.templateUtils.getDismissBanner(configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {
@@ -96,4 +102,8 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
       this.arChildren$ = children;
     }
   }
+
+  dismissInstructions() {
+    this.bShowInstructions$ = false;
+  }
 }

package/lib/template/details/details.component.html

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details/details.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}