@pega/dx-component-builder-sdk 25.1.12 → 25.1.13

package/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.ts

@@ -21,7 +21,6 @@ interface CaseViewProps {
   templateUrl: './case-view.component.html',
   styleUrls: ['./case-view.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class CaseViewComponent implements OnInit, OnDestroy {
@@ -50,7 +49,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   caseSummaryPConn$: any;
   currentCaseID = '';
   editAction: boolean;
-  bHasNewAttachments = false;
   localizedVal: any;
   localeCategory = 'CaseView';
   localeKey: string;
@@ -114,14 +112,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
-    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-
-    if (hasNewAttachments !== this.bHasNewAttachments) {
-      this.bHasNewAttachments = hasNewAttachments;
-      if (this.bHasNewAttachments) {
-        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-      }
-    }
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
@@ -135,7 +125,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     const timer = interval(100).subscribe(() => {
       timer.unsubscribe();
 
-      this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
+      this.heading$ = this.pConn$.getLocalizationService().getLocalizedText(this.configProps$.header);
       this.id$ = this.configProps$.subheader;
       this.status$ = this.pConn$.getValue('.pyStatusWork');
     });

package/tests/assets/sdk-a/components/create/override-sdk/template/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div>
   <div *ngIf="showConfirmView">
     <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
-    <div *ngIf="showDetails">
+    <div *ngIf="showDetails" class="confirmation-details">
       <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
     </div>
     <div *ngIf="showTasks && toDoList?.length > 0">

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

@@ -18,7 +18,6 @@ interface ConfirmationProps {
   selector: 'app-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ConfirmationComponent implements OnInit, OnDestroy {

package/tests/assets/sdk-a/components/create/override-sdk/template/data-reference/data-reference.component.html

@@ -1,13 +1,16 @@
-<div *ngIf="childrenToRender && childrenToRender.length > 0">
-  <div *ngIf="!displayMultiRef">
-    <div *ngFor="let kid of childrenToRender">
-      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
-    </div>
-  </div>
+<div *ngIf="showAdvancedSearch; else notadvancedSearch">
+  <component-mapper name="SearchForm" [props]="{ pConn$: pConn$, formGroup$, searchSelectCacheKey: '' }"></component-mapper>
+</div>
+<ng-template #notadvancedSearch>
   <div *ngIf="displaySingleRef">
-    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect(), dataRelationshipContext }"></component-mapper>
   </div>
   <div *ngIf="displayMultiRef">
     <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
   </div>
-</div>
+  <div *ngIf="displayChild && childrenToRender && childrenToRender.length > 0">
+    <div *ngFor="let kid of childrenToRender">
+      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/template/data-reference/data-reference.component.ts

@@ -3,6 +3,10 @@ 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 { getMappedKey } from '@pega/angular-sdk-components';
+import { componentCachePersistUtils } from '@pega/angular-sdk-components';
+import { getFirstChildConfig } from '@pega/angular-sdk-components';
+import { DataReferenceAdvancedSearchService } from '@pega/angular-sdk-components';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
@@ -10,7 +14,6 @@ const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
   selector: 'app-data-reference',
   templateUrl: './data-reference.component.html',
   styleUrls: ['./data-reference.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DataReferenceComponent implements OnInit, OnDestroy {
@@ -39,46 +42,71 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   displaySingleRef: boolean;
   displayMultiRef: boolean;
   refList: any;
+  displayAs: any;
+  isDDSourceDeferred: any;
+  showPromotedFilters: any;
+  displayMode: any;
+  refFieldMetadata: any;
+  contextClass: any;
+  selectionList: any;
+  inline: any;
+  isCreationOfNewRecordAllowedForReference: any;
+  showAdvancedSearch: boolean;
+  pyID: any;
+  allowImplicitRefresh: any;
+  displayChild = false;
+  dataRelationshipContext: any;
+  imagePosition: any;
+  showImageDescription: any;
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private advancedSearchService: DataReferenceAdvancedSearchService
+  ) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.children = this.pConn$.getChildren();
     this.updateSelf();
-    if (this.firstChildMeta?.type === 'Dropdown' && this.rawViewMetadata.config?.parameters) {
+
+    if (
+      this.rawViewMetadata.config?.parameters &&
+      !this.isDDSourceDeferred &&
+      ['Checkbox', 'Dropdown', 'RadioButtons'].includes(this.firstChildMeta?.type)
+    ) {
       const { value, key, text } = this.firstChildMeta.config.datasource.fields;
-      PCore.getDataApiUtils()
-        .getData(
-          this.refList,
-          {
+
+      if (this.firstChildMeta.config.variant !== 'card' || this.firstChildMeta.config.variant === 'card') {
+        PCore.getDataApiUtils()
+          .getData(this.refList, {
             dataViewParameters: this.parameters
-          },
-          ''
-        )
-        .then(res => {
-          if (res.data.data !== null) {
-            const ddDataSource = res.data.data
-              .map(listItem => ({
-                key: listItem[key.split(' .', 2)[1]],
-                text: listItem[text.split(' .', 2)[1]],
-                value: listItem[value.split(' .', 2)[1]]
-              }))
-              .filter(item => item.key);
-            // Filtering out undefined entries that will break preview
-            this.dropDownDataSource = ddDataSource;
-            this.updateSelf();
-          } else {
-            const ddDataSource: any = [];
-            this.dropDownDataSource = ddDataSource;
-          }
-        })
-        .catch(() => {
-          return Promise.resolve({
-            data: { data: [] }
+          })
+          .then(res => {
+            if (res.data.data !== null) {
+              const ddDataSource = this.firstChildMeta.config.datasource.filterDownloadedFields
+                ? res.data.data
+                : res.data.data
+                    .map(listItem => ({
+                      key: listItem[key.split(' .', 2)[1]],
+                      text: listItem[text.split(' .', 2)[1]],
+                      value: listItem[value.split(' .', 2)[1]]
+                    }))
+                    .filter(item => item.key); // Filtering out undefined entries
+              this.dropDownDataSource = ddDataSource;
+              this.updateSelf();
+            } else {
+              const ddDataSource: any = [];
+              this.dropDownDataSource = ddDataSource;
+            }
+          })
+          .catch(err => {
+            console.error(err?.stack);
+            return Promise.resolve({
+              data: { data: [] }
+            });
           });
-        });
+      }
     }
   }
 
@@ -105,47 +133,59 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     const theConfigProps = this.pConn$.getConfigProps();
     this.updatePropertiesFromProps(theConfigProps);
 
-    const displayAs = theConfigProps.displayAs;
-    const displayMode = theConfigProps.displayMode;
+    const { displayAs, displayMode } = theConfigProps;
     this.rawViewMetadata = this.pConn$.getRawMetadata();
     this.viewName = this.rawViewMetadata.name;
     this.firstChildMeta = this.rawViewMetadata.children[0];
     this.refList = this.rawViewMetadata.config.referenceList;
-    this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
-    // this.childrenToRender = this.children;
+    this.dataRelationshipContext =
+      this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name ? this.rawViewMetadata.config.name : null;
+    this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && ['autocomplete', 'dropdown'].includes(displayAs);
     this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
+    this.refFieldMetadata = this.pConn$.getFieldMetadata(this.rawViewMetadata?.config?.authorContext);
+    this.pyID = getMappedKey('pyID');
+    // @ts-ignore
+    const { allowImplicitRefresh } = PCore.getFieldDefaultUtils().fieldDefaults?.DataReference || {};
 
-    if (this.firstChildMeta?.type !== 'Region') {
-      this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
+    this.allowImplicitRefresh = allowImplicitRefresh;
+    this.isDDSourceDeferred =
+      (this.firstChildMeta?.type === 'Dropdown' && this.selectionMode === SELECTION_MODE.SINGLE && this.refFieldMetadata?.descriptors) ||
+      this.firstChildMeta.config.deferDatasource;
 
-      /* remove refresh When condition from those old view so that it will not be used for runtime */
-      if (this.firstChildMeta.config?.readOnly) {
-        delete this.firstChildMeta.config.readOnly;
-      }
-      if (this.firstChildMeta?.type === 'Dropdown') {
-        this.firstChildMeta.config.datasource.source = this.rawViewMetadata.config?.parameters
-          ? this.dropDownDataSource
-          : '@DATASOURCE '.concat(this.refList).concat('.pxResults');
-      } else if (this.firstChildMeta?.type === 'AutoComplete') {
-        this.firstChildMeta.config.datasource = this.refList;
-
-        /* Insert the parameters to the component only if present */
-        if (this.rawViewMetadata.config?.parameters) {
-          this.firstChildMeta.config.parameters = this.parameters;
-        }
-      }
-      // set displayMode conditionally
-      if (!this.canBeChangedInReviewMode) {
-        this.firstChildMeta.config.displayMode = displayMode;
-      }
-      if (this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI) {
-        this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList);
-      } else {
-        this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
-      }
+    if (this.firstChildMeta?.type === 'Region') {
+      return;
+    }
+
+    this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
 
-      this.generateChildrenToRender();
+    /* remove refresh When condition from those old view so that it will not be used for runtime */
+    if (this.firstChildMeta.config?.readOnly) {
+      delete this.firstChildMeta.config.readOnly;
+    }
+    if (this.firstChildMeta?.type === 'Dropdown') {
+      this.firstChildMeta.config.datasource.source = this.rawViewMetadata.config?.parameters
+        ? this.dropDownDataSource
+        : '@DATASOURCE '.concat(this.refList).concat('.pxResults');
+    } else if (this.firstChildMeta?.type === 'AutoComplete') {
+      this.firstChildMeta.config.datasource = this.refList;
+
+      /* Insert the parameters to the component only if present */
+      if (this.rawViewMetadata.config?.parameters) {
+        this.firstChildMeta.config.parameters = this.parameters;
+      }
+    }
+    // set displayMode conditionally
+    if (!this.canBeChangedInReviewMode) {
+      this.firstChildMeta.config.displayMode = displayMode;
+    }
+    if (this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI) {
+      this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList);
+    } else {
+      this.propName = PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
     }
+
+    this.generateChildrenToRender();
+    this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
   }
 
   updatePropertiesFromProps(theConfigProps) {
@@ -155,38 +195,81 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.selectionMode = theConfigProps.selectionMode;
     this.parameters = theConfigProps.parameters;
     this.hideLabel = theConfigProps.hideLabel;
-
+    this.displayAs = theConfigProps.displayAs;
+    this.showPromotedFilters = theConfigProps.showPromotedFilters;
+    this.displayMode = theConfigProps.displayMode;
     this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    this.contextClass = theConfigProps.contextClass;
+    this.selectionList = theConfigProps.selectionList;
+    this.inline = theConfigProps.inline;
+    this.isCreationOfNewRecordAllowedForReference = theConfigProps.isCreationOfNewRecordAllowedForReference;
     if (this.propsToUse.showLabel === false) {
       this.propsToUse.label = '';
     }
+    this.imagePosition = theConfigProps.imagePosition;
+    this.showImageDescription = theConfigProps.showImageDescription;
   }
 
   generateChildrenToRender() {
     const theRecreatedFirstChild = this.recreatedFirstChild();
-    const viewsRegion = this.rawViewMetadata.children[1];
-    if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
-      this.childrenToRender = [theRecreatedFirstChild, ...this.children.slice(1)];
-    } else {
+    if (this.firstChildMeta?.type !== 'Region') {
+      const viewsRegion = this.rawViewMetadata.children[1];
+
+      if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+        viewsRegion.children.map(child => {
+          child.config.isEmbeddedInDataReference = true;
+          return child;
+        });
+        this.childrenToRender = [theRecreatedFirstChild, ...this.children.slice(1)];
+      } else {
+        this.childrenToRender = [theRecreatedFirstChild];
+      }
+    } else if (this.displayAs === 'advancedSearch') {
       this.childrenToRender = [theRecreatedFirstChild];
     }
+
+    // Render
+    if (this.childrenToRender.length === 1) {
+      return this.childrenToRender[0] ?? null;
+    }
   }
 
   handleSelection(event) {
     const caseKey = this.pConn$.getCaseInfo().getKey();
-    const refreshOptions = { autoDetectRefresh: true };
-    if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
-      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), '', refreshOptions);
-      PCore.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
-    } else {
-      const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '');
-      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.viewName, pgRef, refreshOptions);
+    const refreshOptions: any = { autoDetectRefresh: true, propertyName: '' };
+
+    if ((this.pConn$?.getRawMetadata()?.children as Array<any>)?.length > 0 && this.pConn$?.getRawMetadata()?.children?.[0].config?.value) {
+      refreshOptions.propertyName = this.pConn$?.getRawMetadata()?.children?.[0].config.value;
+      refreshOptions.classID = (this.pConn$.getRawMetadata() as any).classID;
     }
 
-    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset
+    // When value is empty propValue will be undefined here and no value will be set for the reference
     const propValue = event?.id || event?.target?.value;
-    if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
-      PCore.getDataApiUtils()
+    const propName =
+      this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI
+        ? PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList)
+        : PCore.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
+
+    const hasAssociatedViewConfigured = this.rawViewMetadata.children[1].children?.length;
+
+    if (this.pConn$.getContextName().includes('modal') || this.pConn$.getContextName().includes('workarea')) {
+      if (hasAssociatedViewConfigured || this.allowImplicitRefresh) {
+        const pageReference = this.pConn$.getPageReference();
+        let pgRef: any = null;
+        if (pageReference.startsWith('objectInfo')) {
+          pgRef = pageReference.replace('objectInfo.content', '');
+        } else {
+          pgRef = pageReference.replace('caseInfo.content', '');
+        }
+        const viewName = this.rawViewMetadata.name;
+        this.pConn$
+          .getActionsApi()
+          .refreshCaseView(caseKey, viewName, pgRef, refreshOptions)
+          .catch(() => {});
+      }
+    } else if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
+      PCore.getCaseUtils()
         .getCaseEditLock(caseKey, '')
         .then(caseResponse => {
           const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
@@ -201,7 +284,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
           });
 
           // expecting format like {Customer: {pyID:"C-100"}}
-          const propArr = this.propName.split('.');
+          const propArr = propName.split('.');
           propArr.forEach((element, idx) => {
             if (idx + 1 === propArr.length) {
               curr[element] = propValue;
@@ -221,49 +304,199 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     }
   }
 
-  // Re-create first child with overridden props
-  // Memoized child in order to stop unmount and remount of the child component when data reference
-  // rerenders without any actual change
   recreatedFirstChild() {
-    const { type, config } = this.firstChildMeta;
-    if (this.firstChildMeta?.type !== 'Region') {
-      this.pConn$.clearErrorMessages({
-        property: this.propName,
-        category: '',
-        context: ''
+    if (this.firstChildMeta?.type === 'Region' && this.displayAs !== 'advancedSearch') {
+      return;
+    }
+    const { type } = this.firstChildMeta;
+    this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
+
+    this.setReadOnlyDisplayFlags();
+
+    if (type === 'Dropdown' && this.dropDownDataSource === null && !this.isDDSourceDeferred && this.rawViewMetadata.config?.parameters) {
+      return null;
+    }
+
+    this.prepareFirstChildMeta();
+
+    const dataReferenceConfigToChild = this.buildDataReferenceConfig();
+    const { disableStartingFieldsForReference = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || ({} as any);
+
+    if (this.displayAs === 'advancedSearch') {
+      this.showAdvancedSearch = true;
+      const searchSelectCacheKey = componentCachePersistUtils.getComponentStateKey(this.pConn$, this.rawViewMetadata.config.name);
+      this.advancedSearchService.setConfig({
+        dataReferenceConfigToChild,
+        isCreateNewReferenceEnabled: !!dataReferenceConfigToChild.createNewRecord,
+        disableStartingFieldsForReference,
+        pyID: this.pyID,
+        searchSelectCacheKey
       });
-      if (!this.canBeChangedInReviewMode && this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.SINGLE) {
-        this.displaySingleRef = true;
+      return;
+    }
+
+    return this.firstChildPConnect().createComponent({
+      type,
+      config: {
+        ...getFirstChildConfig({
+          firstChildMeta: this.firstChildMeta,
+          getPConnect: this.pConn$,
+          rawViewMetadata: this.rawViewMetadata,
+          contextClass: this.contextClass,
+          dataReferenceConfigToChild,
+          isCreateNewReferenceEnabled: !!dataReferenceConfigToChild.createNewRecord,
+          disableStartingFieldsForReference,
+          pyID: this.pyID
+        })
       }
+    });
+  }
+
+  private setReadOnlyDisplayFlags() {
+    const isSingleMode = this.selectionMode === SELECTION_MODE.SINGLE;
+    const isMultiMode = this.selectionMode === SELECTION_MODE.MULTI;
+
+    if (isSingleMode && (this.displayAs === 'readonly' || this.isDisplayModeEnabled) && !this.canBeChangedInReviewMode) {
+      this.displaySingleRef = true;
+    }
+
+    if (isMultiMode && (['readonly', 'readonlyMulti', 'map'].includes(this.displayAs) || this.isDisplayModeEnabled)) {
+      this.displayMultiRef = true;
+    }
+  }
+
+  private prepareFirstChildMeta() {
+    // Cleanup
+    if (this.firstChildMeta.config?.readOnly) {
+      delete this.firstChildMeta.config.readOnly;
+    }
+
+    // Set datasource
+    this.setChildDatasource();
 
-      if (this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.MULTI) {
-        this.displayMultiRef = true;
+    // Pass through configs
+    if (this.firstChildMeta.config) {
+      this.firstChildMeta.config.showPromotedFilters = this.showPromotedFilters;
+      if (!this.canBeChangedInReviewMode) {
+        this.firstChildMeta.config.displayMode = this.displayMode;
       }
+    }
+  }
+
+  private setChildDatasource() {
+    const { type, config } = this.firstChildMeta;
+
+    if (['Dropdown', 'Checkbox', 'RadioButtons'].includes(type) && !config.deferDatasource && config.datasource) {
+      const isCardVariant = config.variant === 'card';
+      const hasParameters = this.rawViewMetadata.config?.parameters;
+      // @ts-ignore
+      const isDeferDataPageCallEnabled = isCardVariant && hasParameters && !this.firstChildPConnect()?.getSharedDataPageForReferenceList();
+
+      const useDropDownDataSource = (isCardVariant && (this.dropDownDataSource || isDeferDataPageCallEnabled)) || (!isCardVariant && hasParameters);
 
-      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
-      if (type === 'Dropdown' && this.rawViewMetadata.config?.parameters && this.dropDownDataSource === null) {
-        return null;
+      config.datasource.source = useDropDownDataSource ? this.dropDownDataSource : `@DATASOURCE ${this.refList}.pxResults`;
+      if (isCardVariant) {
+        config.imagePosition = this.imagePosition;
+        config.showImageDescription = this.showImageDescription;
       }
+    } else if (type === 'AutoComplete') {
+      config.datasource = this.refList;
+      if (this.rawViewMetadata.config?.parameters) {
+        config.parameters = this.parameters;
+      }
+    }
+  }
 
-      return this.firstChildPConnect().createComponent({
-        type,
-        config: {
-          ...config,
-          required: this.propsToUse.required,
-          visibility: this.propsToUse.visibility,
-          disabled: this.propsToUse.disabled,
-          label: this.propsToUse.label,
-          viewName: this.pConn$.getCurrentView(),
-          parameters: this.rawViewMetadata.config.parameters,
-          readOnly: false,
-          localeReference: this.rawViewMetadata.config.localeReference,
-          ...(this.selectionMode === SELECTION_MODE.SINGLE ? { referenceType: this.referenceType } : ''),
-          dataRelationshipContext:
-            this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name ? this.rawViewMetadata.config.name : null,
-          hideLabel: this.hideLabel,
-          onRecordChange: this.handleSelection.bind(this)
+  private buildDataReferenceConfig() {
+    const fieldMetaData = this.buildFieldMetaData();
+    const isCreateNewReferenceEnabled = this.isCreateNewRecordEnabled();
+
+    const config: any = {
+      selectionMode: this.selectionMode,
+      additionalInfo: this.refFieldMetadata?.additionalInformation ? { content: this.refFieldMetadata.additionalInformation } : undefined,
+      descriptors: this.selectionMode === SELECTION_MODE.SINGLE ? this.refFieldMetadata?.descriptors : null,
+      datasourceMetadata: fieldMetaData?.datasourceMetadata,
+      required: this.propsToUse.required,
+      visibility: this.propsToUse.visibility,
+      disabled: this.propsToUse.disabled,
+      label: this.propsToUse.label,
+      displayAs: this.displayAs,
+      readOnly: false,
+      dataRelationshipContext: this.dataRelationshipContext,
+      hideLabel: this.hideLabel,
+      onRecordChange: this.handleSelection.bind(this),
+      createNewRecord: isCreateNewReferenceEnabled ? this.getCreateNewRecordFn() : undefined,
+      inline: this.inline
+    };
+
+    if (this.selectionMode === SELECTION_MODE.SINGLE) {
+      config.referenceType = this.referenceType;
+      if (this.displayAs === 'advancedSearch') {
+        config.value = this.rawViewMetadata.config.value;
+        config.contextPage = this.rawViewMetadata.config.contextPage;
+      }
+    } else if (this.displayAs === 'advancedSearch') {
+      config.selectionList = this.selectionList;
+      config.readonlyContextList = this.rawViewMetadata.config.readonlyContextList;
+    }
+
+    return config;
+  }
+
+  private buildFieldMetaData() {
+    if (!this.isDDSourceDeferred || this.firstChildMeta.config.deferDatasource) {
+      return null;
+    }
+
+    const { text, value } = this.firstChildMeta?.config?.datasource?.fields || {};
+    const getProp = (prop: string) => (prop?.startsWith('@P') ? prop.substring(3) : prop);
+
+    const fieldMetaData = {
+      datasourceMetadata: {
+        ...this.refFieldMetadata,
+        datasource: {
+          name: this.rawViewMetadata.config?.referenceList,
+          propertyForDisplayText: getProp(text),
+          propertyForValue: getProp(value)
         }
-      });
+      }
+    };
+
+    if (this.rawViewMetadata.config?.parameters) {
+      fieldMetaData.datasourceMetadata.datasource['parameters'] = this.parameters;
     }
+
+    return fieldMetaData;
+  }
+
+  private isCreateNewRecordEnabled() {
+    const { features } = (PCore.getEnvironmentInfo().environmentInfoObject || {}) as any;
+    const isEnvLP = features?.form;
+    const isCreateNewRefEnabledInAuthoring = this.isCreationOfNewRecordAllowedForReference ?? isEnvLP?.isCreateNewReferenceEnabled;
+    const isCaseRef = this.referenceType === 'Case' || this.firstChildMeta?.config?.referenceType === 'Case';
+    const hasAccess = PCore.getAccessPrivilege().hasCreateAccess(this.contextClass);
+    const isCreateNewRefEnabledForUser = isEnvLP ? isEnvLP.isCreateNewReferenceEnabled && hasAccess : isCaseRef;
+
+    return isCreateNewRefEnabledInAuthoring && isCreateNewRefEnabledForUser;
+  }
+
+  private getCreateNewRecordFn() {
+    const { disableStartingFieldsForReference = false } = PCore.getEnvironmentInfo().environmentInfoObject?.features?.form || ({} as any);
+    const isCaseRef = this.referenceType === 'Case' || this.firstChildMeta?.config?.referenceType === 'Case';
+
+    return () => {
+      if (isCaseRef) {
+        const startingFields: any = {};
+        if (!disableStartingFieldsForReference) {
+          startingFields.pyAddCaseContextPage = { pyID: this.pConn$.getCaseInfo().getKey()?.split(' ')?.pop() };
+        }
+        return this.pConn$.getActionsApi().createWork(this.contextClass, {
+          openCaseViewAfterCreate: false,
+          startingFields
+        });
+      }
+      // Assumes Data reference type otherwise
+      return getPConnect().getActionsApi().showDataObjectCreateView(this.contextClass);
+    };
   }
 }