@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.ts

@@ -45,6 +45,7 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
+  targetClassLabel: string;
 }
 
 class Group {
@@ -158,6 +159,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   settingsSvgIcon$: string;
 
   isInitialized = false;
+  targetClassLabel: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -219,7 +221,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
     //  We need to use the prop name as the "glue" to tie the Angular Material table dataSource, displayColumns and data together.
     //  So, in the code below, we'll use the unresolved config.value (but replacing the space with an underscore to keep things happy)
-    const rawMetadata: any = this.pConn$.getRawMetadata();
+    const rawMetadata = this.pConn$.getRawMetadata();
 
     // Adapted from Nebula
     const {
@@ -237,13 +239,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       editModeConfig,
       displayMode,
       useSeparateViewForEdit,
-      viewForEditModal
+      viewForEditModal,
+      targetClassLabel
     } = this.configProps$;
 
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-
+    this.targetClassLabel = targetClassLabel;
     const hideAddRow = allowTableEdit === false;
     const hideDeleteRow = allowTableEdit === false;
     let { contextClass } = this.configProps$;
@@ -262,7 +265,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //    config.value (ex: "@P .DeclarantChoice") or
     //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
     //  Neither of these appear in the resolved (this.configProps$)
-    const rawConfig = rawMetadata?.config;
+    const rawConfig: any = rawMetadata?.config;
     const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
     this.rawFields = rawFields;
     // At this point, fields has resolvedFields and rawFields we can use
@@ -355,7 +358,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     if (this.isInitialized) {
       this.isInitialized = false;
       if (this.allowEditingInModal) {
-        // @ts-ignore - An argument for 'uniqueField' was not provided.
         this.pConn$.getListActions().initDefaultPageInstructions(
           this.pConn$.getReferenceList(),
           this.fieldDefs.filter(item => item.name).map(item => item.name)
@@ -918,19 +920,19 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
         .getActionsApi()
         .openEmbeddedDataModal(
           this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           this.referenceList.length,
-          PCore.getConstants().RESOURCE_STATUS.CREATE
+          PCore.getConstants().RESOURCE_STATUS.CREATE,
+          this.targetClassLabel
         );
     } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
       this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
 
     this.pConn$.clearErrorMessages({
-      property: (this.pConn$.getStateProps() as any)?.referenceList?.substring(1)
-    } as any);
+      property: this.pConn$.getStateProps()?.referenceList?.substring(1)
+    });
   }
 
   editRecord(data, index) {
@@ -939,16 +941,16 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
         .getActionsApi()
         .openEmbeddedDataModal(
           this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           index,
-          PCore.getConstants().RESOURCE_STATUS.UPDATE
+          PCore.getConstants().RESOURCE_STATUS.UPDATE,
+          this.targetClassLabel
         );
     }
   }
 
   deleteRecord(index) {
-    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
     this.pConn$.getListActions().deleteEntry(index);
   }
 

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-select/simple-table-select.component.ts

@@ -57,7 +57,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.label = theConfigProps.label;
     this.renderMode = theConfigProps.renderMode;
     this.showLabel = theConfigProps.showLabel;
@@ -71,7 +71,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       this.propsToUse.label = '';
     }
     const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
-    const { selectionMode, selectionList }: any = this.pConn$.getConfigProps();
+    const { selectionMode, selectionList } = this.pConn$.getConfigProps();
     const isMultiSelectMode = selectionMode === MULTI;
     if (isMultiSelectMode && this.renderMode === 'ReadOnly') {
       this.showSimpleTableManual = true;
@@ -137,7 +137,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       parameters: this.parameters
     };
 
-    this.filters = (this.pConn$.getRawMetadata() as any).config.promotedFilters ?? [];
+    this.filters = (this.pConn$.getRawMetadata()?.config as any).promotedFilters ?? [];
 
     this.isSearchable = this.filters.length > 0;
   }

package/tests/assets/sdk-a/components/create/override-sdk/template/three-column/three-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-three-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ThreeColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class ThreeColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class ThreeColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/two-column/two-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-two-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class TwoColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class TwoColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class TwoColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/two-column-tab/two-column-tab.component.ts

@@ -29,6 +29,6 @@ export class TwoColumnTabComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/wide-narrow-form/wide-narrow-form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-wide-narrow-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class WideNarrowFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class WideNarrowFormComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class WideNarrowFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/wide-narrow-page/wide-narrow-page.component.ts

@@ -15,7 +15,7 @@ export class WideNarrowPageComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
-  thePConnType = '';
+  thePConnType: string | undefined = '';
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -37,11 +37,11 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$ = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -129,7 +129,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();

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

@@ -120,7 +120,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   updateSelf() {
     const configProps: AttachmentProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AttachmentProps;
-    const stateProps: any = this.pConn$.getStateProps();
+    const stateProps = this.pConn$.getStateProps();
     const { value, label, extensions, displayMode } = configProps;
 
     if (configProps.required != null) {
@@ -149,7 +149,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
     this.validateMessage = this.angularPConnectData.validateMessage;
     this.extensions$ = extensions;
-    this.valueRef = (this.pConn$.getStateProps() as any).value;
+    this.valueRef = this.pConn$.getStateProps().value;
     this.valueRef = this.valueRef.startsWith('.') ? this.valueRef.substring(1) : this.valueRef;
     this.displayMode = displayMode;
     /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
@@ -277,7 +277,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       this.updateAttachmentState(this.pConn$, this.getAttachmentKey(this.valueRef), [...currentAttachmentList, ...attachmentsList]);
       if (file.inProgress) {
         // @ts-ignore - 3rd parameter "responseEncoding" should be optional
-        PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+        PCore.getAttachmentUtils().cancelRequest(file.ID, this.pConn$.getContextName());
       }
     }
 
@@ -317,14 +317,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           )} ${this.extensions$.replaceAll('.', '')}`;
         }
         if (f.props.error) {
-          const fieldName = (this.pConn$.getStateProps() as any).value;
+          const fieldName = this.pConn$.getStateProps().value;
           const context = this.pConn$.getContextName();
           PCore.getMessageManager().addMessages({
             messages: [
               {
                 type: 'error',
-                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
-                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
               }
             ],
             property: fieldName,
@@ -348,7 +347,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
   }
 
   clearFieldErrorMessages() {
-    const fieldName = (this.pConn$.getStateProps() as any).value;
+    const fieldName = this.pConn$.getStateProps().value;
     const context = this.pConn$.getContextName();
     PCore.getMessageManager().clearMessages({
       type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
@@ -376,14 +375,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
             f.props.icon = this.utils.getIconFromFileType(f.type);
             f.props.name = this.pConn$.getLocalizedValue('Unable to upload file', '', '');
             f.inProgress = false;
-            const fieldName = (this.pConn$.getStateProps() as any).value;
+            const fieldName = this.pConn$.getStateProps().value;
             const context = this.pConn$.getContextName();
             // set errors to property to block submit even on errors in file upload
             PCore.getMessageManager().addMessages({
               messages: [
                 {
                   type: 'error',
-                  // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                   message: this.pConn$.getLocalizedValue('Error with one or more files', '', '')
                 }
               ],

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

@@ -25,8 +25,8 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
-  userName$: string;
-  imageKey$: string;
+  userName$: string | undefined;
+  imageKey$: string | undefined;
 
   currentUserInitials$: string;
   currentUserName$: string;
@@ -65,7 +65,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.userName$ = PCore.getEnvironmentInfo().getOperatorName();
     this.imageKey$ = PCore.getEnvironmentInfo().getOperatorImageInsKey();
-    this.updateCurrentUserName(this.userName$);
+    this.updateCurrentUserName(this.userName$ ?? '');
 
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -402,11 +402,11 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   }
 
   getMessageData() {
-    const messageIDs = (this.pConn$.getConfigProps() as any).messageIDs;
-    const userName = (this.pConn$.getConfigProps() as any).currentUser;
+    const messageIDs = this.pConn$.getConfigProps().messageIDs;
+    const userName = this.pConn$.getConfigProps().currentUser;
     const imageKey = this.pConn$.getValue('OperatorID.pyImageInsKey');
 
-    const oData: any = this.pConn$.getDataObject();
+    const oData = this.pConn$.getDataObject();
 
     if (messageIDs && messageIDs.length > 0) {
       this.pulseMessages$ = JSON.parse(JSON.stringify(oData.pulse.messages));
@@ -532,7 +532,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
 
       // If feedAPI is defined then only post message
       if (this.feedAPI) {
-        this./* feedAPI. */ postMessage((this.pConn$.getConfigProps() as any).value, this.pulseConversation);
+        this./* feedAPI. */ postMessage(this.pConn$.getConfigProps().value, this.pulseConversation);
       } else {
         console.log("We don't support Pulse yet");
       }

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

@@ -106,7 +106,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     this.createModalButtons();
 
     PCore.getPubSubUtils().subscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
+      PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
       this.updateSelf.bind(this),
       'caseAttachmentsUpdateFromCaseview'
     );
@@ -117,10 +117,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.angularPConnectData.unsubscribeFn();
     }
 
-    PCore.getPubSubUtils().unsubscribe(
-      (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW,
-      'caseAttachmentsUpdateFromCaseview'
-    );
+    PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, 'caseAttachmentsUpdateFromCaseview');
   }
 
   // Callback passed when subscribing to store change

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

@@ -2,7 +2,7 @@
   <div class="psdk-todo-header">
     <div *ngIf="showTodoList$" class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
     <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
-    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ assignmentCount$ }}</div>
+    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ count }}</div>
   </div>
   <br /><br />
   <div *ngIf="showTodoList$" class="psdk-display-divider"></div>
@@ -36,7 +36,7 @@
   </div>
 </div>
 
-<div *ngIf="assignmentCount$ > 3">
+<div *ngIf="count > 3">
   <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
     <button mat-stroked-button (click)="_showMore()">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>
   </div>

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

@@ -1,10 +1,54 @@
-import { Component, OnInit, Input, NgZone, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import { updateWorkList } from '@pega/angular-sdk-components';
+
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
+  return PCore.getDataPageUtils()
+    .getDataAsync(
+      datapage,
+      context,
+      {},
+      {
+        pageNumber: 1,
+        pageSize: numberOfRecords
+      },
+      {
+        select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) })),
+        sortBy: [
+          { field: 'pxUrgencyAssign', type: 'DESC' },
+          { field: 'pxDeadlineTime', type: 'ASC' },
+          { field: 'pxCreateDateTime', type: 'DESC' }
+        ]
+      },
+      {
+        invalidateCache: true,
+        additionalApiParams: {
+          includeTotalCount
+        }
+      }
+    )
+    .then(response => {
+      return {
+        ...response,
+        data: (Array.isArray(response?.data) ? response.data : []).map(row =>
+          Object.keys(fields).reduce((obj, key) => {
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            return obj;
+          }, {})
+        )
+      };
+    });
+};
+
+const getMappedValue = value => {
+  const mappedValue = PCore.getEnvironmentInfo().getKeyMapping(value);
+  return mappedValue === null ? value : mappedValue;
+};
 
 interface ToDoProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +67,7 @@ interface ToDoProps {
   standalone: true,
   imports: [CommonModule, MatButtonModule]
 })
-export class TodoComponent implements OnInit, OnDestroy, OnChanges {
+export class TodoComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() caseInfoID$: string;
   @Input() datasource$: any;
@@ -36,9 +80,8 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isConfirm;
 
   configProps$: ToDoProps;
-  currentUser$: string;
+  currentUser$: string | undefined;
   currentUserInitials$ = '--';
-  assignmentCount$: number;
   bShowMore$ = true;
   arAssignments$: any[];
   assignmentsSource$: any;
@@ -49,99 +92,62 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
   canPerform: boolean;
+  count: number;
 
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
   ngOnInit() {
     this.CONSTS = PCore.getConstants();
-    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
-
-    PCore.getPubSubUtils().subscribe(
-      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
-      () => {
-        this.updateToDo();
-      },
-      'updateToDo'
-    );
-
-    PCore.getPubSubUtils().subscribe(
-      CREATE_STAGE_SAVED,
-      () => {
-        this.updateList();
-      },
-      CREATE_STAGE_SAVED
-    );
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
-    PCore.getPubSubUtils().subscribe(
-      CREATE_STAGE_DELETED,
-      () => {
-        this.updateList();
-      },
-      CREATE_STAGE_DELETED
-    );
+    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => this.updateToDo(), 'updateToDo');
+    PCore.getPubSubUtils().subscribe(CREATE_STAGE_SAVED, () => this.updateList(), CREATE_STAGE_SAVED);
+    PCore.getPubSubUtils().subscribe(CREATE_STAGE_DELETED, () => this.updateList(), CREATE_STAGE_DELETED);
 
     this.updateToDo();
   }
 
   ngOnDestroy() {
-    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED }: any = PCore.getEvents().getCaseEvent();
+    const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
-
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
-
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
   }
 
-  ngOnChanges() {
-    // don't update until we'va had an init
-    if (PCore) {
-      this.updateToDo();
-    }
-  }
-
-  updateWorkList(key) {
-    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] = {
-          pxResults: responseData.data.data
-        };
-
-        this.pConn$.updateState(dataObject);
-        this.updateToDo();
-      })
-      .catch(err => {
-        console.error(err?.stack);
-      });
-  }
-
   updateList() {
-    this.updateWorkList('D_pyMyWorkList');
+    const {
+      WORK_BASKET: {
+        DATA_PAGES: { D__PY_MY_WORK_LIST }
+      }
+    } = PCore.getConstants();
+    updateWorkList(getPConnect, getMappedValue(D__PY_MY_WORK_LIST));
   }
 
   updateToDo() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
 
-    if (this.headerText$ == undefined) {
-      this.headerText$ = this.configProps$.headerText;
-    }
-
-    this.datasource$ = this.configProps$.datasource ? this.configProps$.datasource : this.datasource$;
-    this.myWorkList$ = this.configProps$.myWorkList ? this.configProps$.myWorkList : this.myWorkList$;
+    this.headerText$ = this.headerText$ || this.configProps$.headerText;
+    this.datasource$ = this.datasource$ || this.configProps$.datasource;
+    this.myWorkList$ = this.myWorkList$ || this.configProps$.myWorkList;
 
     this.assignmentsSource$ = this.datasource$?.source || this.myWorkList$?.source;
 
     if (this.showTodoList$) {
-      this.assignmentCount$ = this.assignmentsSource$ != null ? this.assignmentsSource$.length : 0;
-      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+      if (this.assignmentsSource$) {
+        this.count = this.assignmentsSource$ ? this.assignmentsSource$.length : 0;
+        this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
+      } else if (this.myWorkList$.datapage) {
+        fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, 3, true, this.context$).then(responseData => {
+          this.deferLoadWorklistItems(responseData);
+        });
+      } else {
+        this.arAssignments$ = [];
+      }
     } else {
       // get caseInfoId assignment.
       // eslint-disable-next-line no-lonely-if
@@ -153,7 +159,12 @@ 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$);
+    this.currentUserInitials$ = this.utils.getInitials(this.currentUser$ ?? '');
+  }
+
+  deferLoadWorklistItems(responseData) {
+    this.count = responseData.totalCount;
+    this.arAssignments$ = responseData.data;
   }
 
   getID(assignment: any) {
@@ -182,15 +193,6 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
     return this.type$ === this.CONSTS.TODO ? assignment.name : assignment.stepName;
   }
 
-  initAssignments(): any[] {
-    if (this.assignmentsSource$) {
-      this.assignmentCount$ = this.assignmentsSource$.length;
-      return this.topThreeAssignments(this.assignmentsSource$);
-    }
-    // turn off todolist
-    return [];
-  }
-
   getCaseInfoAssignment(assignmentsSource: any[], caseInfoID: string) {
     const result: any[] = [];
     for (const source of assignmentsSource) {
@@ -207,18 +209,26 @@ export class TodoComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   _showMore() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = false;
+    this.bShowMore$ = false;
+
+    const { WORKLIST } = PCore.getConstants();
+
+    if (this.type$ === WORKLIST && this.count && this.count > this.arAssignments$.length && !this.assignmentsSource$) {
+      fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
+        response => {
+          this.arAssignments$ = response.data;
+        }
+      );
+    } else {
       this.arAssignments$ = this.assignmentsSource$;
-    });
+    }
   }
 
   _showLess() {
-    this.ngZone.run(() => {
-      this.bShowMore$ = true;
+    this.bShowMore$ = true;
+    const { WORKLIST } = PCore.getConstants();
 
-      this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
-    });
+    this.arAssignments$ = this.type$ === WORKLIST ? this.arAssignments$.slice(0, 3) : this.topThreeAssignments(this.assignmentsSource$);
   }
 
   isChildCase(assignment) {