@pega/angular-sdk-overrides 0.25.1 → 0.25.2

package/lib/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 './data-reference-advanced-search.service';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
@@ -38,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: [] }
+            });
           });
-        });
+      }
     }
   }
 
@@ -104,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) {
@@ -154,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('.');
@@ -200,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;
@@ -220,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);
+    };
   }
 }

package/lib/template/data-reference/search-form/search-form.component.html

@@ -0,0 +1,39 @@
+<div class="search-form" style="display: flex; flex-direction: column">
+  <h5>{{ propsToUse.label }}</h5>
+  <div *ngIf="searchCategoriesComp === 'dropdown'">
+    <mat-form-field class="psdk-full-width">
+      <mat-select [value]="currentTabId" (selectionChange)="handleTabClick($event.value)">
+        <mat-option *ngFor="let tab of tabItems" [value]="tab.id">{{ tab.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div *ngIf="searchCategoriesComp === 'radio'">
+    <mat-radio-group [value]="currentTabId">
+      <mat-radio-button *ngFor="let tab of tabItems" [value]="tab.id" (click)="handleTabClick($event)">{{ tab.name }}</mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <!-- Tab Content -->
+  <div>
+    <div *ngFor="let tab of tabItems; let index = index">
+      <div *ngIf="tab.id === currentTabId" class="psdk-sub-tabs">
+        <component-mapper
+          *ngIf="tab.content?.getPConnect() as tabPConn"
+          [name]="tabPConn.getComponentName()"
+          [props]="{ pConn$: tabPConn, formGroup$ }"
+        ></component-mapper>
+      </div>
+    </div>
+  </div>
+  <!-- Dialog -->
+  <ng-template #dialogTemplate>
+    <h2 mat-dialog-title>Discard selections?</h2>
+    <mat-dialog-content>
+      <p>When changing search categories, any previous selections will be lost.</p>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-stroked-button type="button" (click)="onDialogClose()">Go back</button>
+      <button mat-raised-button color="primary" (click)="clearSelectionAndSwitchTab()">Discard</button>
+    </mat-dialog-actions>
+  </ng-template>
+</div>

package/lib/template/data-reference/search-form/search-form.component.scss

@@ -0,0 +1,11 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+::ng-deep {
+  mat-tab-group {
+    .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list {
+      display: none;
+    }
+  }
+}