@pega/dx-component-builder-sdk 0.24.3 → 0.24.4

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/case-history/case-history.component.ts

@@ -29,7 +29,6 @@ export class CaseHistoryComponent implements OnInit {
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
 
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
     const dataViewName = 'D_pyWorkHistory';
     const context = this.pConn$.getContextName();
@@ -46,7 +45,7 @@ export class CaseHistoryComponent implements OnInit {
       this.fields$ = [
         { label: this.pConn$.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
         { label: this.pConn$.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-        { label: this.pConn$.getLocalizedValue('User', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
+        { label: this.pConn$.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
       ];
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/feed-container/feed-container.component.ts

@@ -387,7 +387,6 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
     if (bUpdateSelf) {
       this.updateSelf();
     } else {
-      // @ts-ignore - parameter “contextName” for getDataObject method should be optional
       const newPulseData = this.pConn$.getDataObject().pulse;
 
       if (!isEqual(newPulseData, this.pulseData)) {
@@ -395,7 +394,6 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
       }
     }
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     this.pulseData = this.pConn$.getDataObject().pulse;
   }
 
@@ -406,10 +404,8 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   getMessageData() {
     const messageIDs = (this.pConn$.getConfigProps() as any).messageIDs;
     const userName = (this.pConn$.getConfigProps() as any).currentUser;
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const imageKey = this.pConn$.getValue('OperatorID.pyImageInsKey');
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const oData: any = this.pConn$.getDataObject();
 
     if (messageIDs && messageIDs.length > 0) {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.html

@@ -41,7 +41,7 @@
 
 <div *ngIf="bShowLinkModal$" class="psdk-dialog-background">
   <div class="psdk-modal-link-top">
-    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>
+    <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>
     <div class="psdk-modal-link-entry">
       <div class="psdk-modal-body">
         <div class="psdk-modal-links-row">
@@ -61,7 +61,7 @@
           </div>
 
           <div class="psdk-modal-link-add">
-            <button mat-raised-button color="primary" (click)="_addLink()">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>
+            <button mat-raised-button color="primary" (click)="_addLink()">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>
           </div>
         </div>
 

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -64,18 +64,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
 
   currentCaseID = '';
 
-  addAttachmentsActions: any[] = [
-    {
-      text: 'Add files',
-      id: 'addNewFiles',
-      onClick: () => this.createModal('addLocalFile')
-    },
-    {
-      text: 'Add links',
-      id: 'addNewLinks',
-      onClick: () => this.createModal('addLocalLink')
-    }
-  ];
+  addAttachmentsActions: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -93,7 +82,18 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     this.lu_icon$ = 'paper-clip';
 
     this.closeSvgIcon$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
-
+    this.addAttachmentsActions = [
+      {
+        text: this.pConn$.getLocalizedValue('Add files', '', ''),
+        id: 'addNewFiles',
+        onClick: () => this.createModal('addLocalFile')
+      },
+      {
+        text: this.pConn$.getLocalizedValue('Add links', '', ''),
+        id: 'addNewLinks',
+        onClick: () => this.createModal('addLocalLink')
+      }
+    ];
     // const onViewAllCallback = () => this.onViewAll(this.arFullListAttachments);
 
     this.lu_onViewAllFunction = { onClick: this.onViewAll.bind(this) };
@@ -142,7 +142,6 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
 
   onAttachFiles(files) {
     const attachmentUtils = PCore.getAttachmentUtils();
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
 
     if (files.length > 0) {
@@ -185,7 +184,6 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
 
   onAttachLinks(links) {
     const attachmentUtils = PCore.getAttachmentUtils();
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
 
     if (links.length > 0) {
@@ -711,7 +709,6 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   }
 
   getCaseID() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     return this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID) || '';
   }
 
@@ -760,7 +757,6 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   }
 
   caseHasChanged(): boolean {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
     if (this.currentCaseID !== caseID) {
       this.currentCaseID = caseID;

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.html

@@ -8,7 +8,7 @@
       <div class="psdk-utility-count" id="attachments-count">{{ count$ }}</div>
       <div style="flex-grow: 1"></div>
       <div class="header-icon">
-        <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
+        <button id="file-menu" mat-icon-button [matMenuTriggerFor]="utilityMenu">
           <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
         </button>
         <mat-menu #utilityMenu="matMenu" overlapTrigger="false">

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/quick-create/quick-create.component.html

@@ -0,0 +1 @@
+<component-mapper name="WssQuickCreate" [props]="{ heading$, actions$: cases$ }"></component-mapper>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/quick-create/quick-create.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuickCreateComponent } from './quick-create.component';
+
+describe('QuickCreateComponent', () => {
+  let component: QuickCreateComponent;
+  let fixture: ComponentFixture<QuickCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [QuickCreateComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(QuickCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/quick-create/quick-create.component.ts

@@ -0,0 +1,96 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
+import { Utils } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface QuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  heading?: string;
+  showCaseIcons?: boolean;
+  classFilter?: any;
+}
+
+@Component({
+  selector: 'app-quick-create',
+  templateUrl: './quick-create.component.html',
+  styleUrls: ['./quick-create.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class QuickCreateComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: QuickCreateProps;
+  arChildren$: any[];
+  heading$?: string;
+  showCaseIcons$?: boolean;
+  classFilter$: any;
+  cases$: any = [];
+
+  constructor(private utils: Utils) {}
+
+  createCase(className) {
+    this.pConn$
+      .getActionsApi()
+      .createWork(className, {} as any)
+      .catch(error => {
+        console.log('Error in case creation: ', error?.message);
+      });
+  }
+
+  initComponent() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as QuickCreateProps;
+
+    this.heading$ = this.configProps$.heading;
+    this.showCaseIcons$ = this.configProps$.showCaseIcons;
+    this.classFilter$ = this.configProps$.classFilter;
+
+    const envInfo = PCore.getEnvironmentInfo();
+    if (
+      this.classFilter$ &&
+      envInfo.environmentInfoObject &&
+      envInfo.environmentInfoObject.pyCaseTypeList &&
+      envInfo.environmentInfoObject.pyCaseTypeList.length > 0
+    ) {
+      this.classFilter$.forEach(item => {
+        let icon = this.utils.getImageSrc('polaris-solid', this.utils.getSDKStaticContentUrl());
+        let label = '';
+        (envInfo.environmentInfoObject as any).pyCaseTypeList.forEach(casetype => {
+          if (casetype.pyWorkTypeImplementationClassName === item) {
+            icon = casetype.pxIcon && this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl());
+            label = casetype.pyWorkTypeName ?? '';
+          }
+        });
+        if (label !== '') {
+          this.cases$.push({
+            label,
+            onClick: () => {
+              this.createCase(item);
+            },
+            ...(this.showCaseIcons$ && { icon })
+          });
+        }
+      });
+    }
+  }
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    // this.updateSelf();
+
+    this.initComponent();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.initComponent();
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.html

@@ -15,7 +15,7 @@
           <div class="psdk-todo-assignment-title">{{ getAssignmentName(assignment) }}</div>
           <div class="psdk-todo-assignment-data">
             <div class="psdk-todo-assignment-task">
-              Task in
+              {{ localizedVal('Task in', localeCategory) }}
               <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)">
                 {{ assignment.name }} {{ getID(assignment) }}
               </button>
@@ -26,7 +26,7 @@
             </div>
           </div>
         </div>
-        <div class="psdk-todo-assignment-action">
+        <div class="psdk-todo-assignment-action" *ngIf="!isConfirm || canPerform">
           <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
         </div>
       </div>
@@ -37,11 +37,11 @@
 
 <div *ngIf="assignmentCount$ > 3">
   <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
-    <button mat-stroked-button (click)="_showMore()">Show more</button>
+    <button mat-stroked-button (click)="_showMore()">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>
   </div>
   <ng-template #showLess>
     <div class="psdk-todo-show-more">
-      <button mat-stroked-button (click)="_showLess()">Show less</button>
+      <button mat-stroked-button (click)="_showLess()">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>
     </div>
   </ng-template>
 </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.ts

@@ -48,6 +48,7 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Todo';
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
+  canPerform: boolean;
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -105,11 +106,9 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateWorkList(key) {
-    (
-      PCore.getDataApiUtils()
-        // @ts-ignore - 2nd parameter "payload" and 3rd parameter "context" should be optional in getData method
-        .getData(key) as Promise<any>
-    )
+    PCore.getDataApiUtils()
+      // @ts-ignore - 2nd parameter "payload" and 3rd parameter "context" should be optional in getData method
+      .getData(key)
       .then(responseData => {
         const dataObject = {};
         dataObject[key] = {
@@ -151,6 +150,8 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
       }
     }
 
+    this.canPerform = this.arAssignments$?.[0]?.canPerform === 'true' || this.arAssignments$?.[0]?.canPerform === true;
+
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
     this.currentUserInitials$ = this.utils.getInitials(this.currentUser$);
   }

package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Phone here
@@ -12,6 +14,7 @@ export default function Phone(props: PhoneProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -19,7 +22,6 @@ export default function Phone(props: PhoneProps) {
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -27,6 +29,14 @@ export default function Phone(props: PhoneProps) {
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -69,15 +79,14 @@ export default function Phone(props: PhoneProps) {
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -94,7 +103,7 @@ export default function Phone(props: PhoneProps) {
       onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...testProp }}
     />
   );

package/tests/assets/sdk-r/components/create/override-sdk/infra/Assignment/Assignment.tsx

@@ -41,6 +41,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
   const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
   const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  const approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+  const rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
   // const showPage = actionsAPI.showPage.bind(actionsAPI);
 
   const [showSnackbar, setShowSnackbar] = useState(false);
@@ -212,6 +214,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'rejectCase': {
+          const rejectPromise = rejectCase(itemKey);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Rejection failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
@@ -230,6 +244,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'approveCase': {
+          const approvePromise = approveCase(itemKey);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Approve failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }

package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx

@@ -65,7 +65,6 @@ interface ListViewProps extends PConnProps {
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
 let myRows: any[];
-let myDisplayColumnList: any[];
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -119,6 +118,7 @@ export default function ListView(props: ListViewProps) {
   const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
   const [arRows, setRows] = useState<any[]>([]);
+  const [rowsData, setRowsData] = useState<any[]>([]);
   const [arColumns, setColumns] = useState<any[]>([]);
   const [response, setResponse] = useState<any[]>([]);
 
@@ -291,16 +291,6 @@ export default function ListView(props: ListViewProps) {
     });
   }
 
-  function getMyColumnList(arCols: any[]): string[] {
-    const myColList: string[] = [];
-
-    arCols.forEach(col => {
-      myColList.push(col.id);
-    });
-
-    return myColList;
-  }
-
   /** Will return field from a filter expression */
   function getFieldFromFilter(filter, dateRange = false) {
     let fieldValue;
@@ -543,8 +533,8 @@ export default function ListView(props: ListViewProps) {
 
     // store globally, so can be searched, filtered, etc.
     myRows = usingDataResults;
-    myDisplayColumnList = getMyColumnList(myColumns);
 
+    setRowsData(myRows);
     // At this point, if we have data ready to render and haven't been asked
     //  to NOT call setRows and setColumns, call them
     if (bCallSetRowsColumns) {
@@ -604,24 +594,22 @@ export default function ListView(props: ListViewProps) {
   }, [listContext]);
 
   function searchFilter(value: string, rows: any[]) {
+    const cols = arColumns.map(ele => {
+      return ele.id;
+    });
+
     function filterArray(el: any): boolean {
-      const bReturn = false;
-      for (const key of Object.keys(el)) {
-        // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
-        if (myDisplayColumnList.includes(key)) {
-          let myVal = el[key];
-          if (myVal !== null) {
-            if (typeof myVal !== 'string') {
-              myVal = myVal.toString();
-            }
-            if (myVal.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
-              return true;
-            }
+      return Object.keys(el).some(key => {
+        // only search columns that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
+        if (cols.includes(key)) {
+          const myVal = el[key];
+          if (myVal !== null && typeof myVal !== 'undefined') {
+            const strVal = String(myVal); // Ensure myVal is a string
+            return strVal.toLowerCase().includes(value.toLowerCase());
           }
         }
-      }
-
-      return bReturn;
+        return false;
+      });
     }
 
     rows = rows.filter(filterArray);
@@ -631,8 +619,7 @@ export default function ListView(props: ListViewProps) {
 
   function _onSearch(event: any) {
     const searchValue = event.target.value;
-
-    const filteredRows = searchFilter(searchValue, myRows.slice());
+    const filteredRows = searchFilter(searchValue, rowsData?.slice());
 
     setRows(filteredRows);
   }

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyForm/demo.stories.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyForm from './index';
-import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { DateInput, Input, FieldValueList, Text, EmptyState } from '@pega/cosmos-react-core';
 import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
 import { pyReviewRaw, regionChildrenResolved } from './mock';
 
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
@@ -128,6 +128,43 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return (
+      <EmptyState
+        key={Math.random()}
+        getPConnect={() => {
+          return {
+            getChildren: () => {
+              return [
+                {
+                  getPConnect: () => {
+                    return {
+                      getRawMetadata: () => {
+                        return {};
+                      },
+                      resolveConfigProps: props => {
+                        return props;
+                      },
+                      getConfigProps: () => {
+                        return {
+                          value: '',
+                          label,
+                          displayMode: 'LABELS_LEFT'
+                        };
+                      },
+                      getComponent: () => {
+                        return val;
+                      }
+                    };
+                  }
+                }
+              ];
+            }
+          };
+        }}
+      />
+    );
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -138,7 +175,10 @@ const renderField = resolvedProps => {
 };
 
 export const BasePegaDxilMyForm: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -151,17 +191,41 @@ export const BasePegaDxilMyForm: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                readOnly
+              });
           }
         }
       };
@@ -180,6 +244,7 @@ export const BasePegaDxilMyForm: Story = args => {
 };
 
 BasePegaDxilMyForm.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form template',
   NumCols: 1,