@pega/dx-component-builder-sdk 0.25.7 → 0.25.9

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

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
 import { CommonModule } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatOptionModule } from '@angular/material/core';
@@ -42,6 +43,10 @@ interface ListViewProps {
   value: any;
   readonlyContextList: any;
   label?: string;
+  displayAs?: string;
+  showRecords: boolean;
+  viewName?: string;
+  localeReference?: any;
 }
 
 export class Group {
@@ -58,7 +63,6 @@ export class Group {
   selector: 'app-list-view',
   templateUrl: './list-view.component.html',
   styleUrls: ['./list-view.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatFormFieldModule,
@@ -89,6 +93,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   @Input() payload;
 
   repeatList$: MatTableDataSource<any>;
+  selection = new SelectionModel<any>(true, []);
   fields$: any[];
 
   displayedColumns$ = Array<any>();
@@ -156,11 +161,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
   query: any = null;
   paging: any;
   fieldDefs: any;
-  xRayApis = PCore.getDebugger().getXRayRuntime();
-  xRayUid = this.xRayApis.startXRay();
   checkBoxValue: string;
   label?: string = '';
-
+  uniqueId = crypto.randomUUID();
+  displayAs: any;
+  showRecords: any;
+  identifier: string;
+  promotedFiltersId: string;
   constructor(
     private psService: ProgressSpinnerService,
     public utils: Utils
@@ -172,12 +179,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
     const defRowID = this.configProps$?.referenceType === 'Case' ? 'pyID' : 'pyGUID';
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
-    this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
+    this.rowID = this.payload?.compositeKeys?.length === 1 ? this.payload?.compositeKeys[0] : defRowID;
     this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$?.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;
-
+    this.displayAs = this.configProps$.displayAs;
+    this.showRecords = this.configProps$.showRecords;
     this.menuSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl());
     this.arrowDownSvgIcon$ = this.utils.getImageSrc('arrow-down', this.utils.getSDKStaticContentUrl());
     this.arrowUpSvgIcon$ = this.utils.getImageSrc('arrow-up', this.utils.getSDKStaticContentUrl());
@@ -206,6 +214,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.label = title;
 
     this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl());
+    this.promotedFiltersId = `promoted-filters-queryable-${this.uniqueId}`;
     setTimeout(() => {
       PCore.getPubSubUtils().subscribe(
         PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
@@ -226,6 +235,15 @@ export class ListViewComponent implements OnInit, OnDestroy {
         false,
         this.pConn$.getContextName()
       );
+      PCore.getPubSubUtils().subscribe(
+        PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
+        data => {
+          this.showRecords = data.showRecords;
+          const filterData = this.prepareFilters(data);
+          this.processFilterChange(filterData);
+        },
+        this.promotedFiltersId
+      );
     }, 0);
     if (this.configProps$) {
       if (!this.payload) {
@@ -238,7 +256,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
         listContext: this.listContext,
         ref: this.ref,
         showDynamicFields: this.showDynamicFields,
-        xRayUid: this.xRayUid,
         cosmosTableRef: this.cosmosTableRef,
         selectionMode: this.selectionMode
       }).then(response => {
@@ -246,6 +263,29 @@ export class ListViewComponent implements OnInit, OnDestroy {
         this.getListData();
       });
     }
+    this.clearSelectionsAndUpdateTable(this.pConn$, this.uniqueId, this.configProps$?.viewName);
+  }
+
+  clearSelectionsAndUpdateTable(getPConnect: any, uniqueId: string, viewName): void {
+    const clearSelectionsAndRefreshList = ({ viewName: name, clearSelections }: any) => {
+      if (name === viewName) {
+        const { selectionMode } = getPConnect.getRawConfigProps();
+        if (!selectionMode) {
+          return;
+        }
+        if (clearSelections) {
+          if (selectionMode === 'single') {
+            getPConnect.getListActions().setSelectedRows({});
+          } else {
+            getPConnect.getListActions().clearSelectedRows();
+          }
+        }
+      }
+    };
+
+    this.identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+
+    PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, this.identifier);
   }
 
   getFieldFromFilter(filter, dateRange = false) {
@@ -260,82 +300,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   processFilterChange(data) {
-    const { filterId, filterExpression } = data;
-    let dashboardFilterPayload: any = {
-      query: {
-        filter: {},
-        select: []
-      }
-    };
-
-    this.filters[filterId] = filterExpression;
-    let isDateRange = !!data.filterExpression?.AND;
-    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-    const relationalOp = 'AND';
-
-    let field = this.getFieldFromFilter(filterExpression, isDateRange);
-    const selectParam: any[] = [];
-    // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    this.displayedColumns$?.forEach(col => {
-      selectParam.push({
-        field: col
-      });
-    });
-
-    // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(this.displayedColumns$?.length && this.displayedColumns$?.includes(field))) {
-      return;
-    }
-    // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
-    let validFilter = false;
-
-    let index = 1;
-    // Iterating over the current filters list to create filter data which will be POSTed
-    const filterKeys: any[] = Object.keys(this.filters);
-    const filterValues: any[] = Object.values(this.filters);
-    for (let filterIndex = 0; filterIndex < filterKeys.length; filterIndex++) {
-      const filter = filterValues[filterIndex];
-      // If the filter is null then we can skip this iteration
-      if (filter === null) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
+    this.updateFiltersFromData(data);
 
-      // Checking if the filter is of type- Date Range
-      isDateRange = !!filter?.AND;
-      field = this.getFieldFromFilter(filter, isDateRange);
+    const selectParam = this.displayedColumns$?.map(col => ({ field: col })) || [];
 
-      if (!(this.displayedColumns$?.length && this.displayedColumns$?.includes(field))) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      // If we reach here that implies we've at least one valid filter, hence setting the flag
-      validFilter = true;
-      /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
-       * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
-       */
-      if (isDateRange) {
-        dashboardFilterPayload = this.filterBasedOnDateRange(dashboardFilterPayload, filter, relationalOp, selectParam, index);
-      } else {
-        dashboardFilterPayload.query.filter.filterConditions = {
-          ...dashboardFilterPayload.query.filter.filterConditions,
-          [`T${index++}`]: { ...filter.condition, ignoreCase: true }
-        };
+    if (this.displayAs !== 'advancedSearch') {
+      const { filterExpression } = data;
+      const isDateRange = !!filterExpression?.AND;
+      const field = this.getFieldFromFilter(filterExpression, isDateRange);
 
-        if (dashboardFilterPayload.query.filter.logic) {
-          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
-        } else {
-          dashboardFilterPayload.query.filter.logic = `T${index - 1}`;
-        }
-
-        dashboardFilterPayload.query.select = selectParam;
+      if (filterExpression !== null && !this.displayedColumns$?.includes(field)) {
+        return;
       }
     }
 
-    // Reset the dashboardFilterPayload if we end up with no valid filters for the list
-    if (!validFilter) {
-      dashboardFilterPayload = undefined;
-    }
+    const dashboardFilterPayload = this.buildFilterPayload(selectParam);
+
     this.filterPayload = dashboardFilterPayload;
     this.getListData();
   }
@@ -366,14 +346,25 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getFieldsMetadata(refList) {
-    // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
     return PCore.getAnalyticsUtils().getDataViewMetadata(refList, this.showDynamicFields);
   }
 
+  getValue(col) {
+    return this.fieldDefs.find(f => f.name === col)?.label;
+  }
+
   getListData() {
+    this.preparePayload();
     const componentConfig = this.pConn$.getComponentConfig();
-    if (this.configProps$) {
-      this.preparePayload();
+    const columnFields = componentConfig.presets[0].children[0].children;
+    const columns = this.getHeaderCells(columnFields, this.fieldDefs);
+    this.fields$ = this.configProps$.presets[0].children[0].children;
+    this.displayedColumns$ = columns.map(col => {
+      return col.id;
+    });
+    if (this.displayAs === 'advancedSearch' && !this.showRecords) {
+      Promise.resolve({ data: null });
+    } else if (this.configProps$) {
       const refList = this.configProps$.referenceList;
       const fieldsMetaDataPromise = this.getFieldsMetadata(refList);
       // returns a promise
@@ -399,17 +390,9 @@ export class ListViewComponent implements OnInit, OnDestroy {
           const fieldsMetaData = results[0];
           const workListData = results[1];
 
-          this.fields$ = this.configProps$.presets[0].children[0].children;
-          // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
-          const columnFields = componentConfig.presets[0].children[0].children;
-
           const tableDataResults = !this.bInForm$ ? workListData.data.data : workListData.data;
 
-          const columns = this.getHeaderCells(columnFields, this.fieldDefs);
           this.fields$ = this.updateFields(this.fields$, fieldsMetaData.data.fields, columns);
-          this.displayedColumns$ = columns.map(col => {
-            return col.id;
-          });
           this.response = tableDataResults;
           this.updatedRefList = this.updateData(tableDataResults, this.fields$);
           if (this.selectionMode === SELECTION_MODE.SINGLE && this.updatedRefList?.length > 0) {
@@ -421,6 +404,14 @@ export class ListViewComponent implements OnInit, OnDestroy {
           }
 
           this.repeatList$ = new MatTableDataSource(this.updatedRefList);
+
+          if (this.configProps$?.readonlyContextList?.length > 0) {
+            const readonlyIds = new Set(this.configProps$.readonlyContextList.map(element => element[this.rowID]));
+            const rowsToSelect = this.repeatList$.data.filter(row => readonlyIds.has(row[this.rowID]));
+            if (rowsToSelect.length > 0) {
+              this.selection.select(...rowsToSelect);
+            }
+          }
           this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this);
 
           // keeping an original copy to get back after possible sorts, filters and groupBy
@@ -437,6 +428,33 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  prepareFilters(data) {
+    return Object.entries(data.payload).reduce((acc, [field, value]) => {
+      if (value) {
+        let comparator = 'EQ';
+        const filterRecord = this.listContext.meta.fieldDefs.filter(item => item.id === field);
+        if (filterRecord?.[0]?.meta.type === 'TextInput') {
+          comparator = 'CONTAINS';
+        }
+        acc[field] = {
+          filterExpression: {
+            condition: {
+              lhs: {
+                field
+              },
+              comparator,
+              rhs: {
+                value
+              }
+            }
+          },
+          filterId: field
+        };
+      }
+      return acc;
+    }, {});
+  }
+
   preparePayload() {
     const { fieldDefs, itemKey, patchQueryFields } = this.listContext.meta;
     this.fieldDefs = fieldDefs;
@@ -478,6 +496,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
       `dashboard-component-${'id'}`,
       this.pConn$.getContextName()
     );
+    PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', this.identifier);
+    PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, this.promotedFiltersId);
   }
 
   // ngAfterViewInit() {
@@ -496,6 +516,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     const arReturn = arFields;
     arReturn.forEach((field, i) => {
       field.config = { ...field.config, ...fields[i], name: fields[i].id };
+      field.config.label = PCore.getLocaleUtils().getLocaleValue(field.config.label, this.configProps$.localeReference);
     });
     return arReturn;
   }
@@ -521,13 +542,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
-  isChecked(rowIn): any {
-    const initialVal = false;
-    return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
-      return acc || rowIn[this.rowID] === currRow[this.rowID];
-    }, initialVal);
-  }
-
   fieldOnChange(row) {
     const value = row[this.rowID];
     const reqObj = {};
@@ -544,32 +558,31 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
   }
 
-  onCheckboxClick(row, event) {
-    const value = row[this.rowID];
-    const checked = event?.checked;
-    const reqObj: any = {};
-    if (this.compositeKeys?.length > 1) {
-      const index = this.response.findIndex(element => element[this.rowID] === value);
-      const selectedRow = this.response[index];
-      this.compositeKeys.forEach(element => {
-        reqObj[element] = selectedRow[element];
-      });
-      reqObj.$selected = checked;
-    } else {
-      reqObj[this.rowID] = value;
-      reqObj.$selected = checked;
-    }
-    this.pConn$?.getListActions()?.setSelectedRows([reqObj]);
+  onCheckboxClick(row) {
+    this.selection.toggle(row);
+    const requiredValue = this.getSelectedValue(row);
+    this.pConn$?.getListActions()?.setSelectedRows([requiredValue]);
   }
 
-  // rowClick(row) {
-  //   switch (this.configProps$.rowClickAction) {
-  //     case 'openAssignment':
-  //       this.psService.sendMessage(true);
-  //       this.openAssignment(row);
-  //       break;
-  //   }
-  // }
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.repeatList$.data.length;
+    return numSelected === numRows;
+  }
+
+  toggleAllRows() {
+    if (this.isAllSelected()) {
+      this.selection.clear();
+      this.pConn$?.getListActions()?.clearSelectedRows();
+      return;
+    }
+    if (this.selection.hasValue() && !this.isAllSelected()) {
+      this.pConn$?.getListActions()?.clearSelectedRows();
+    }
+    this.selection.select(...this.repeatList$.data);
+    const requiredValues = this.repeatList$.data.map(row => this.getSelectedValue(row));
+    this.pConn$?.getListActions()?.setSelectedRows(requiredValues);
+  }
 
   _getIconStyle(level): string {
     let sReturn = '';
@@ -1157,7 +1170,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     const seen = {};
     return a.filter(item => {
       const k = key(item);
-      // eslint-disable-next-line no-return-assign, no-prototype-builtins
+      // eslint-disable-next-line no-prototype-builtins
       return seen.hasOwnProperty(k) ? false : (seen[k] = true);
     });
   }
@@ -1431,4 +1444,78 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     return select;
   }
+
+  private getSelectedValue(row) {
+    const value = row[this.rowID];
+    const checked = this.selection.isSelected(row);
+    const reqObj: any = {};
+    if (this.compositeKeys?.length > 1) {
+      const index = this.response.findIndex(element => element[this.rowID] === value);
+      const selectedRow = this.response[index];
+      this.compositeKeys.forEach(element => {
+        reqObj[element] = selectedRow[element];
+      });
+      reqObj.$selected = checked;
+    } else {
+      reqObj[this.rowID] = value;
+      reqObj.$selected = checked;
+    }
+    return reqObj;
+  }
+
+  private updateFiltersFromData(data) {
+    if (this.displayAs === 'advancedSearch') {
+      this.filters = {};
+      Object.values(data).forEach((value: any) => {
+        this.filters[value.filterId] = value.filterExpression;
+      });
+    } else {
+      const { filterId, filterExpression } = data;
+      this.filters[filterId] = filterExpression;
+    }
+  }
+
+  private buildFilterPayload(selectParam: any[]) {
+    const filterConditions = {};
+    let logic = '';
+    let index = 1;
+    const relationalOp = 'AND';
+
+    for (const currentFilter of Object.values(this.filters)) {
+      const filter: any = currentFilter;
+      if (!filter) continue;
+
+      const isDateRange = !!filter.AND;
+      const field = this.getFieldFromFilter(filter, isDateRange);
+
+      if (!this.displayedColumns$?.includes(field)) continue;
+
+      if (logic) {
+        logic += ` ${relationalOp} `;
+      }
+
+      if (isDateRange) {
+        const dateRelationalOp = filter.AND ? 'AND' : 'OR';
+        filterConditions[`T${index}`] = { ...filter[relationalOp][0].condition };
+        filterConditions[`T${index + 1}`] = { ...filter[relationalOp][1].condition };
+        logic += `(T${index} ${dateRelationalOp} T${index + 1})`;
+        index += 2;
+      } else {
+        filterConditions[`T${index}`] = { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' && { ignoreCase: true }) };
+        logic += `T${index}`;
+        index++;
+      }
+    }
+
+    if (!logic) {
+      return undefined;
+    }
+
+    return {
+      query: {
+        filter: { filterConditions, logic },
+        select: selectParam
+      }
+    };
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/listViewHelpers.ts

@@ -12,7 +12,6 @@ export function init(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -67,8 +66,7 @@ export function init(props) {
     pConn$,
     compositeKeys,
     isSearchable,
-    isCacheable: true,
-    xRayUid
+    isCacheable: true
   }).then(async context => {
     return readContextResponse(context, {
       ...props,
@@ -76,7 +74,6 @@ export function init(props) {
       selectionCountThreshold,
       ref,
       selectionMode,
-      xRayUid,
       cosmosTableRef
     });
   });

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/utils.ts

@@ -550,6 +550,27 @@ function populateRenderingOptions(name, config, field) {
     config.cellRenderer = formatConstants.Integer;
   }
 }
+function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+
+  const definedOnClassID = fieldMetaData.definedOnClassID;
+  const localeValue = PCore.getLocaleUtils().getLocaleValue(
+    fieldLabel,
+    `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+    PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+    null
+  );
+  return localeValue || fieldLabel;
+}
 export function initializeColumns(fields: any[] = [], getMappedProperty: any = null) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -562,7 +583,9 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
 
     let label = field.config.label || field.config.caption;
     const { show = true, displayAs } = field.config;
-    if (label.startsWith('@')) {
+    if (isFLProperty(label)) {
+      label = getFieldLabel(field.config);
+    } else if (label.startsWith('@')) {
       label = label.substring(3);
     }
 
@@ -653,7 +676,7 @@ export const readContextResponse = async (context, params) => {
   const { pConn$, apiContext, children, showDynamicFields, referenceList, isDataObject } = params;
   // let { listContext } = params;
   const { promisesResponseArray, apiContext: otherContext } = context;
-  // eslint-disable-next-line sonarjs/no-unused-collection
+
   const listOfComponents: any[] = [];
   const {
     data: { fields: metaFields, classID, isQueryable }

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

@@ -1,4 +1,4 @@
 <div>
   <h3 style="font-weight: bold; margin: 0">{{ label }}</h3>
-  <component-mapper name="SimpleTable" [props]="{ pConn$ }"></component-mapper>
+  <component-mapper name="SimpleTable" [props]="{ pConn$: newPConn.getPConnect() }"></component-mapper>
 </div>

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

@@ -4,6 +4,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 interface MultiReferenceReadOnlyProps {
+  readonlyContextList: string;
+  referenceList: string;
   label: string;
   hideLabel: boolean;
 }
@@ -12,7 +14,6 @@ interface MultiReferenceReadOnlyProps {
   selector: 'app-multi-reference-readonly',
   templateUrl: './multi-reference-readonly.component.html',
   styleUrls: ['./multi-reference-readonly.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
@@ -22,6 +23,7 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   angularPConnectData: AngularPConnectData = {};
   configProps$: MultiReferenceReadOnlyProps;
   label: string;
+  newPConn: any;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -50,5 +52,29 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps$ = this.pConn$.getConfigProps() as MultiReferenceReadOnlyProps;
     this.label = this.configProps$.label;
+
+    const config = (this.pConn$.getMetadata() as any)?.config;
+    const { referenceList, readonlyContextList } = config;
+    let readonlyContextObject;
+    if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
+      readonlyContextObject = {
+        referenceList: readonlyContextList
+      };
+    }
+    const hideLabel = this.configProps$.hideLabel ?? false;
+    this.newPConn = this.pConn$.createComponent(
+      {
+        type: 'SimpleTable',
+        config: {
+          ...config,
+          ...readonlyContextObject,
+          label: this.label,
+          hideLabel
+        }
+      },
+      '',
+      0,
+      {}
+    );
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/narrow-wide-form/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "NarrowWideForm",
-    "name": "NarrowWideForm",
-    "label": "Narrow-wide",
-    "description": "NarrowWide Template",
-    "type": "Template",
-    "subtype": "FORM",
-    "properties": []
-}
+  "name": "NarrowWideForm",
+  "label": "Narrow-wide",
+  "description": "NarrowWide Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

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

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-narrow-wide-form',
   templateUrl: './narrow-wide-form.component.html',
   styleUrls: ['./narrow-wide-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class NarrowWideFormComponent implements OnInit, OnChanges {

package/tests/assets/sdk-a/components/create/override-sdk/template/one-column/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "OneColumn",
-    "name": "OneColumn",
-    "label": "One column",
-    "description": "OneColumn Template",
-    "type": "Template",
-    "subtype": "FORM",
-    "properties": []
-}
+  "name": "OneColumn",
+  "label": "One column",
+  "description": "OneColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

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

@@ -5,6 +5,9 @@
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'View'">
     <component-mapper name="View" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>
+  <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'reference'">
+    <component-mapper name="reference" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+  </div>
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'">
     <component-mapper name="CaseCreateStage" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>