@pega/angular-sdk-overrides 0.26.2 → 0.26.3

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, TemplateRef } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -9,14 +9,22 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrls: ['./field-group.component.scss'],
   imports: [CommonModule, MatGridListModule, MatIconModule]
 })
-export class FieldGroupComponent {
+export class FieldGroupComponent implements OnChanges {
   @Input() name?: string;
-  @Input() collapsible = false;
+  @Input() collapseOnLoad: 'none' | 'expanded' | 'collapsed' = 'none';
   @Input() instructions: string;
   @Input() childrenTemplate: TemplateRef<any>;
 
+  collapsible = false;
   collapsed = false;
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['collapseOnLoad']) {
+      this.collapsible = this.collapseOnLoad !== 'none';
+      this.collapsed = this.collapseOnLoad === 'collapsed';
+    }
+  }
+
   headerClickHandler() {
     this.collapsed = !this.collapsed;
   }

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -18,6 +18,9 @@
           <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
           <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value }}</span>
           <label *ngSwitchCase="'caseoperator'">operator</label>
+          <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
+            <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"></component-mapper>
+          </div>
           <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value }}</span>
         </dd>
       </ng-template>
@@ -46,9 +49,15 @@
           {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
-          <div [ngSwitch]="field.type">
-            <label *ngSwitchCase="'UserReference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
-            <label *ngSwitchCase="'Checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+          <div [ngSwitch]="field.type.toLowerCase()">
+            <label *ngSwitchCase="'userreference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
+            <label *ngSwitchCase="'checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+            <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
+              <component-mapper
+                name="ObjectReference"
+                [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"
+              ></component-mapper>
+            </div>
             <label *ngSwitchDefault class="psdk-secondary-value">{{ field.config.value || '---' }}</label>
           </div>
         </dd>

package/lib/field/auto-complete/auto-complete.component.html

@@ -15,10 +15,50 @@
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"
         />
-        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
-          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
-            <span>{{ opt.value }}</span>
-          </mat-option>
+        <mat-autocomplete #auto="matAutocomplete" [class]="'psdk-autocomplete-panel'" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+          <ng-container *ngIf="hasGroupBy; else flatOptionsList">
+            <mat-optgroup *ngFor="let group of groupedFilteredOptions$ | async" [label]="group.label">
+              <mat-option *ngFor="let opt of group.options" [value]="opt.value">
+                <span class="psdk-autocomplete-option-primary">{{ opt.value }}</span>
+                <div class="psdk-autocomplete-option-secondary" *ngIf="opt.secondaryComponents?.length">
+                  <ng-container *ngFor="let secondary of opt.secondaryComponents; let last = last">
+                    <component-mapper
+                      [name]="secondary.getPConnect().getComponentName()"
+                      [props]="{ pConn$: secondary.getPConnect(), formGroup$ }"
+                    ></component-mapper>
+                    <span *ngIf="!last" class="psdk-autocomplete-option-separator" aria-hidden="true"> · </span>
+                  </ng-container>
+                </div>
+              </mat-option>
+            </mat-optgroup>
+          </ng-container>
+          <ng-template #flatOptionsList>
+            <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+              <span class="psdk-autocomplete-option-primary">{{ opt.value }}</span>
+              <div class="psdk-autocomplete-option-secondary" *ngIf="opt.secondaryComponents?.length">
+                <ng-container *ngFor="let secondary of opt.secondaryComponents; let last = last">
+                  <component-mapper
+                    [name]="secondary.getPConnect().getComponentName()"
+                    [props]="{ pConn$: secondary.getPConnect(), formGroup$ }"
+                  ></component-mapper>
+                  <span *ngIf="!last" class="psdk-autocomplete-option-separator" aria-hidden="true"> · </span>
+                </ng-container>
+              </div>
+            </mat-option>
+          </ng-template>
+          <div *ngIf="showCreateButton" class="psdk-autocomplete-create-new-wrapper">
+            <mat-divider></mat-divider>
+            <button
+              mat-button
+              type="button"
+              class="psdk-autocomplete-create-new"
+              (mousedown)="$event.preventDefault()"
+              (click)="createNewButtonHandler()"
+            >
+              <mat-icon>add</mat-icon>
+              {{ createNewLabel }}
+            </button>
+          </div>
         </mat-autocomplete>
         <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/lib/field/auto-complete/auto-complete.component.scss

@@ -18,3 +18,95 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+// Scoped to this component's own panel via mat-autocomplete's [class] input — does not affect
+// other mat-option/mat-autocomplete instances in the app (research.md §3).
+::ng-deep .psdk-autocomplete-panel {
+  overflow-x: hidden;
+
+  .mat-mdc-option {
+    .mdc-list-item__primary-text {
+      width: 100%;
+      white-space: normal;
+      overflow: visible;
+      text-overflow: unset;
+    }
+
+    // Only grow/top-align options that actually render secondary content — leaves options
+    // without secondary text at Material's default single-line height/vertical centering.
+    &:has(.psdk-autocomplete-option-secondary) {
+      height: auto;
+      min-height: 48px;
+      align-items: flex-start;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+}
+
+.psdk-autocomplete-option-secondary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 0.25rem;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--mat-sys-on-surface-variant);
+
+  // Each secondary field renders through FieldValueList's own DISPLAY_ONLY template, which
+  // defaults to a two-column grid block (.psdk-container-labels-left) or an unset-display
+  // block (.psdk-container-nolabels). Override both to render inline here so multiple fields
+  // join on one line via the `·` separators, instead of stacking as separate block rows
+  // (FR-002/FR-004). FieldValueListComponent itself is not modified (research.md §6).
+  ::ng-deep .psdk-container-labels-left {
+    display: inline-flex;
+    column-gap: 0.25rem;
+    row-gap: 0;
+    padding-block: 0;
+  }
+
+  ::ng-deep .psdk-container-nolabels {
+    display: inline;
+    padding-block: 0;
+  }
+
+  ::ng-deep .psdk-grid-label::after {
+    content: ':';
+  }
+
+  ::ng-deep .psdk-val-labels-left {
+    white-space: normal;
+  }
+}
+
+::ng-deep .psdk-autocomplete-create-new-wrapper {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background-color: var(--mat-sys-surface-container, var(--mat-sys-surface, #fff));
+
+  .mat-divider {
+    margin: 0;
+  }
+
+  .psdk-autocomplete-create-new {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    text-align: left;
+    text-transform: none;
+    color: var(--mat-sys-primary);
+
+    .mat-mdc-button-touch-target {
+      width: 100%;
+    }
+
+    .mat-icon {
+      margin-right: 8px;
+    }
+  }
+}

package/lib/field/auto-complete/auto-complete.component.ts

@@ -1,10 +1,13 @@
-import { Component, EventEmitter, OnInit, Output, forwardRef, inject } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild, forwardRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
@@ -15,10 +18,22 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface IOption {
+interface AutoCompleteOption {
   key: string;
   value: string;
+  // Present only when at least one secondary column resolves to a non-empty value
+  secondaryComponents?: any[];
+  secondarySearchText?: string;
+  // Present only when a group-by field is configured for this (datapage-sourced) field
+  group?: string;
 }
+
+// Internal, render-time-only view-model — never part of the PConnect contract
+interface AutoCompleteGroup {
+  label: string;
+  options: AutoCompleteOption[];
+}
+
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -29,6 +44,12 @@ interface AutoCompleteProps extends PConnFieldProps {
   parameters?: any;
   datasource: any;
   columns: any[];
+  allowCreatingRecords?: boolean;
+  onCreateNew?: () => void;
+  createNewLabel?: string;
+  createNewRecord?: () => Promise<unknown>;
+  contextClass?: string;
+  referenceType?: string;
 }
 
 @Component({
@@ -42,6 +63,9 @@ interface AutoCompleteProps extends PConnFieldProps {
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDividerModule,
     FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
@@ -52,15 +76,29 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
 
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
 
+  @ViewChild(MatAutocompleteTrigger) private autocompleteTrigger?: MatAutocompleteTrigger;
+
   configProps$: AutoCompleteProps;
 
-  options$: any[];
+  options$: AutoCompleteOption[];
   listType: string;
-  columns = [];
+  columns: any[] = [];
   parameters: {};
-  filteredOptions: Observable<any[]>;
+  datasource: any;
+  filteredOptions: Observable<AutoCompleteOption[]>;
+  // Grouped view of filteredOptions, only rendered when hasGroupBy is true
+  groupedFilteredOptions$: Observable<AutoCompleteGroup[]>;
+  hasGroupBy = false;
   filterValue = '';
 
+  // "Create new" footer button state
+  showCreateButton = false;
+  createNewLabel = 'Create new';
+  contextClass?: string;
+  referenceType?: string;
+  private onCreateNewFn?: () => void;
+  private createNewRecordFn?: () => Promise<unknown>;
+
   // Override ngOnInit method
   override async ngOnInit(): Promise<void> {
     super.ngOnInit();
@@ -69,18 +107,36 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       startWith(''),
       map(value => this._filter((value as string) || ''))
     );
+
+    this.groupedFilteredOptions$ = this.filteredOptions.pipe(map(options => this.buildGroups(options)));
   }
 
-  setOptions(options: IOption[]) {
+  setOptions(options: AutoCompleteOption[]) {
     this.options$ = options;
     const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
     this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
     this.fieldControl.setValue(this.value$);
   }
 
-  private _filter(value: string): string[] {
+  // Matches only primary text and secondary search text — group value is never used for search
+  private _filter(value: string): AutoCompleteOption[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal) || option.secondarySearchText?.includes(filterVal));
+  }
+
+  // Buckets the already-sorted option list into contiguous groups by exact group value
+  buildGroups(options: AutoCompleteOption[]): AutoCompleteGroup[] {
+    const groups: AutoCompleteGroup[] = [];
+    options?.forEach(option => {
+      const label = option.group ?? '';
+      const lastGroup = groups[groups.length - 1];
+      if (lastGroup && lastGroup.label === label) {
+        lastGroup.options.push(option);
+      } else {
+        groups.push({ label, options: [option] });
+      }
+    });
+    return groups;
   }
 
   /**
@@ -94,18 +150,29 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     this.updateComponentCommonProperties(this.configProps$);
 
     // Set component specific properties
-    const { value, listType, parameters } = this.configProps$;
+    const { value, listType, parameters, allowCreatingRecords, onCreateNew, createNewLabel, createNewRecord, contextClass, referenceType } =
+      this.configProps$;
 
     this.listType = listType;
     this.parameters = parameters;
 
+    this.showCreateButton = allowCreatingRecords === true;
+    this.createNewLabel = createNewLabel || 'Create new';
+    this.contextClass = contextClass;
+    this.referenceType = referenceType;
+    this.onCreateNewFn = onCreateNew;
+    this.createNewRecordFn = createNewRecord;
+
     const context = this.pConn$.getContextName();
     const { columns, datasource } = this.generateColumnsAndDataSource();
+    this.datasource = datasource;
 
     if (columns) {
       this.columns = this.preProcessColumns(columns);
     }
 
+    this.hasGroupBy = this.columns?.some(col => col.groupBy === 'true') ?? false;
+
     if (this.listType === 'associated') {
       const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
       this.setOptions(optionsList);
@@ -152,22 +219,157 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       ];
     }
 
+    // Secondary text and grouping are both out of scope for associated/local list options
+    if (this.listType !== 'associated') {
+      const secondaryColumns = this.getSecondaryColumnsFromMetadata();
+      if (secondaryColumns.length > 0) {
+        columns = [...(columns || []), ...secondaryColumns];
+      }
+
+      const groupByColumns = this.getGroupByColumnsFromMetadata();
+      if (groupByColumns.length > 0) {
+        columns = [...(columns || []), ...groupByColumns];
+      }
+    }
+
     return { columns, datasource };
   }
 
+  // Reads unresolved groupsFields metadata to derive group-by column descriptor(s); not a
+  // display/search column, so grouping stays independent of primary/secondary text
+  getGroupByColumnsFromMetadata() {
+    const groupsFields = (this.pConn$.getRawMetadata()?.config as any)?.groupsFields;
+    if (!Array.isArray(groupsFields)) {
+      return [];
+    }
+    return this.mapMetadataColumns(groupsFields, { display: 'false', groupBy: 'true', useForSearch: false });
+  }
+
+  // Reads unresolved columnsFormatter metadata to derive secondary (contextual) display columns
+  getSecondaryColumnsFromMetadata() {
+    const columnsFormatter = (this.pConn$.getRawMetadata()?.config as any)?.columnsFormatter;
+    if (!Array.isArray(columnsFormatter)) {
+      return [];
+    }
+    return this.mapMetadataColumns(columnsFormatter, { display: 'true', secondary: 'true', useForSearch: true });
+  }
+
+  // Shared by getSecondaryColumnsFromMetadata/getGroupByColumnsFromMetadata: value must stay an
+  // unresolved property reference (e.g. "@P .propName") for use as a raw-row lookup key
+  mapMetadataColumns(rawColumns: any[], columnFlags: object): any[] {
+    return rawColumns
+      .map(item => {
+        const property = item?.config?.value;
+        if (typeof property !== 'string' || !property) {
+          return undefined;
+        }
+        let value = property;
+        if (property.startsWith('@P ')) {
+          value = property.substring(3);
+        } else if (property.startsWith('@USER ')) {
+          value = property.substring(6);
+        }
+        return { value, type: item?.type, label: item?.config?.label, ...columnFlags };
+      })
+      .filter(Boolean);
+  }
+
   fillOptions(results: any) {
-    const optionsData: any[] = [];
+    const optionsData: AutoCompleteOption[] = [];
     const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+    const secondaryColumns = this.columns?.filter(col => col.display === 'true' && col.secondary === 'true') || [];
+    const groupByColumn = this.columns?.find(col => col.groupBy === 'true');
+
     results?.forEach(element => {
-      const obj = {
+      const obj: AutoCompleteOption = {
         key: element[displayColumn.key] || element.pyGUID,
         value: element[displayColumn.primary]?.toString()
       };
+
+      if (secondaryColumns.length > 0) {
+        const secondaryComponents = this.buildSecondaryComponents(element, secondaryColumns);
+        if (secondaryComponents.length > 0) {
+          obj.secondaryComponents = secondaryComponents;
+        }
+
+        const secondarySearchText = this.buildSecondarySearchText(element, secondaryColumns);
+        if (secondarySearchText) {
+          obj.secondarySearchText = secondarySearchText;
+        }
+      }
+
+      if (groupByColumn) {
+        obj.group = this.resolveGroupValue(element[groupByColumn.value as string]);
+      }
+
       optionsData.push(obj);
     });
+
+    if (groupByColumn) {
+      this.sortByGroup(optionsData);
+    }
+
     this.setOptions(optionsData);
   }
 
+  // Null/undefined/whitespace-only source values normalize to '' — the shared blank group
+  resolveGroupValue(rawValue: any): string {
+    if (rawValue === null || rawValue === undefined) {
+      return '';
+    }
+    const stringValue = rawValue.toString();
+    return stringValue.trim() ? stringValue : '';
+  }
+
+  // Ascending, case-sensitive, stable sort so same-group options keep their original relative order
+  sortByGroup(options: AutoCompleteOption[]): void {
+    options.sort((a, b) => {
+      const groupA = a.group ?? '';
+      const groupB = b.group ?? '';
+      if (groupA < groupB) {
+        return -1;
+      }
+      if (groupA > groupB) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  // Rendering only — one read-only PConnect component per configured secondary field, in
+  // configured order, regardless of whether its value is empty (FieldValueList's own
+  // empty-value fallback renders the placeholder, e.g. "Label: ---"). Mirrors ScalarListComponent's
+  // createComponent/DISPLAY_ONLY pattern.
+  buildSecondaryComponents(element: any, secondaryColumns): any[] {
+    return secondaryColumns.map(col =>
+      this.pConn$.createComponent(
+        {
+          type: col.type,
+          config: {
+            value: element[col.value as string],
+            displayMode: 'DISPLAY_ONLY',
+            readOnly: true,
+            label: col.label
+          }
+        },
+        '',
+        0,
+        {}
+      )
+    ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+  }
+
+  // Search only — independent of buildSecondaryComponents; never derived from rendered output.
+  buildSecondarySearchText(element: any, secondaryColumns): string {
+    return secondaryColumns
+      .map(col => {
+        const rawValue = element[col.value as string];
+        return rawValue === null || rawValue === undefined ? '' : rawValue.toString().trim().toLowerCase();
+      })
+      .filter(Boolean)
+      .join(' ');
+  }
+
   flattenParameters(params = {}) {
     const flatParams = {};
     Object.keys(params).forEach(key => {
@@ -182,12 +384,12 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     const displayColumns = columnList.filter(col => col.display === 'true');
     const metaDataObj: any = { key: '', primary: '', secondary: [] };
     const keyCol = columnList.filter(col => col.key === 'true');
-    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    metaDataObj.key = keyCol.length > 0 ? (keyCol[0].value ?? 'auto') : 'auto';
     for (let index = 0; index < displayColumns.length; index += 1) {
       if (displayColumns[index].primary === 'true') {
-        metaDataObj.primary = displayColumns[index].value;
-      } else {
-        metaDataObj.secondary.push(displayColumns[index].value);
+        metaDataObj.primary = displayColumns[index].value ?? '';
+      } else if (displayColumns[index].secondary === 'true') {
+        metaDataObj.secondary.push(displayColumns[index].value ?? '');
       }
     }
     return metaDataObj;
@@ -222,4 +424,127 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       this.onRecordChange.emit(value);
     }
   }
+
+  // Re-fetches the options list
+  refreshOptionsList(): void {
+    if (!this.displayMode$ && this.listType !== 'associated') {
+      const context = this.pConn$.getContextName();
+      this.dataPageService
+        .getDataPageData(this.datasource, this.parameters, context)
+        .then((results: any) => this.fillOptions(results))
+        .catch(e => console.error(e));
+    }
+  }
+
+  // Sets values for all columns that have setProperty defined
+  setValuesToAdditionalFields(record: Record<string, unknown>): void {
+    const setPropertyList = this.columns.filter(col => col.setProperty).map(col => ({ source: col.value, target: col.setProperty, key: col.key }));
+
+    setPropertyList.forEach(prop => {
+      let valueToSet: string;
+      if (prop.key === 'true') {
+        valueToSet = record[prop.source]?.toString() || (record as any).pyGUID || '';
+      } else {
+        valueToSet = record[prop.source]?.toString() || '';
+      }
+
+      if (prop.target === 'Associated property') {
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, valueToSet);
+      } else {
+        const target = typeof prop.target === 'string' ? prop.target : '';
+        const targetProp = target.startsWith('.') ? target : `.${target}`;
+        (this.actionsApi as any).updateFieldValue(targetProp, valueToSet, { associatedProperty: this.propName });
+        (this.actionsApi as any).triggerFieldChange(targetProp, valueToSet);
+      }
+    });
+  }
+
+  createNewButtonHandler(): void {
+    // Close the options panel so it doesn't remain open on top of the create-new modal
+    this.autocompleteTrigger?.closePanel();
+
+    if (this.onCreateNewFn) {
+      this.onCreateNewFn();
+      return;
+    }
+
+    if (!this.contextClass) {
+      return;
+    }
+
+    const context = this.pConn$.getContextName();
+    const normalizedReferenceType = typeof this.referenceType === 'string' ? this.referenceType.toLowerCase() : '';
+    const isDataReference = normalizedReferenceType === 'data';
+    const { CREATE_STAGE_DONE } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    const DATA_OBJECT_CREATED = (PCore.getConstants().PUB_SUB_EVENTS as any).DATA_EVENTS?.DATA_OBJECT_CREATED;
+    const eventType = isDataReference && DATA_OBJECT_CREATED ? DATA_OBJECT_CREATED : CREATE_STAGE_DONE;
+    const contextClass = this.contextClass;
+
+    const createNewCallback = isDataReference
+      ? (data: { data?: { responseData?: Record<string, unknown> } }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const responseData = data?.data?.responseData;
+          if (responseData) {
+            this.setValuesToAdditionalFields(responseData);
+            const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+            const newKey = responseData[displayColumn.key]?.toString() || (responseData as any).pyGUID;
+            if (this.onRecordChange && newKey) {
+              this.onRecordChange.emit({ id: newKey });
+            }
+          }
+
+          this.refreshOptionsList();
+          PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+        }
+      : (data: { caseId?: string; caseType?: string; ID?: string }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const newCaseId = data.caseId?.split(' ').pop();
+          if (data.caseType === contextClass) {
+            const selectKey = data.ID || newCaseId;
+
+            if (selectKey && this.listType !== 'associated' && this.datasource) {
+              this.dataPageService
+                .getDataPageData(this.datasource, this.parameters, context)
+                .then((results: any) => {
+                  this.fillOptions(results);
+
+                  const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+                  const newRecord = results?.find((el: any) => el.ID === data.ID || (el[displayColumn.key] || el.pyGUID) === selectKey);
+                  if (newRecord) {
+                    this.setValuesToAdditionalFields(newRecord);
+                  } else {
+                    handleEvent(this.actionsApi, 'changeNblur', this.propName, selectKey);
+                  }
+                  if (this.onRecordChange) {
+                    this.onRecordChange.emit({ id: selectKey });
+                  }
+                })
+                .catch(e => console.error(e));
+            }
+            PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+          }
+        };
+
+    // Build the create action if createNewRecord fn is not provided
+    const triggerCreate = this.createNewRecordFn
+      ? this.createNewRecordFn()
+      : isDataReference
+        ? this.pConn$.getActionsApi().showDataObjectCreateView(contextClass)
+        : this.pConn$.getActionsApi().createWork(contextClass, {
+            openCaseViewAfterCreate: false,
+            startingFields: {}
+          });
+
+    Promise.resolve(triggerCreate)
+      .then(() => {
+        PCore.getPubSubUtils().subscribe(eventType, createNewCallback, contextClass);
+        // Re-initialize the list
+        this.refreshOptionsList();
+      })
+      .catch(e => console.error(e));
+  }
 }