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

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

@@ -0,0 +1,167 @@
+import { Component, forwardRef, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { getFirstVisibleTabId, getActiveTabId, searchtabsClick } from '@pega/angular-sdk-components';
+import { MatRadioModule } from '@angular/material/radio';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule, MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getTabCountSources, getData } from './tabsData';
+import { getFieldMeta } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-search-form',
+  templateUrl: './search-form.component.html',
+  styleUrls: ['./search-form.component.scss'],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatDialogModule,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogTitle,
+    MatButtonModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class SearchFormComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchSelectCacheKey;
+
+  configProps$: any;
+  isInitialized = false;
+
+  currentTabId: string;
+  nextTabId: string;
+  openDialog = false;
+  tabItems: any[] = [];
+  searchCategoriesComp: any;
+  propsToUse: any;
+  tabData: any = [];
+  tabCountSources: any;
+  deferLoadedTabs: any;
+  @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
+  dialogRef: any;
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.isInitialized = true;
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { ...this.pConn$.getInheritedProps() };
+    this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    const cache: any = PCore.getNavigationUtils().getComponentCache(this.searchSelectCacheKey) ?? {};
+    const { selectedCategory } = cache;
+    const firstTabId = getFirstVisibleTabId(this.deferLoadedTabs, selectedCategory);
+    this.currentTabId = getActiveTabId(this.deferLoadedTabs.getPConnect().getChildren(), firstTabId);
+    this.updateSelf();
+  }
+
+  ngOnChanges() {
+    if (this.isInitialized) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.tabCountSources = getTabCountSources(this.deferLoadedTabs);
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    this.initializeSearchCategories();
+  }
+
+  initializeSearchCategories(): void {
+    if (this.tabItems.length >= 3) {
+      this.searchCategoriesComp = 'dropdown';
+    } else if (this.tabItems.length > 1) {
+      this.searchCategoriesComp = 'radio';
+    }
+  }
+
+  handleTabClick(event) {
+    const tabId = event.target.value;
+    const viewName = this.tabData
+      .find((tab: any) => tab.id === this.currentTabId)
+      ?.getPConnect()
+      .getConfigProps().name;
+
+    if (this.checkIfSelectionsExist(this.pConn$)) {
+      event.preventDefault();
+      this.nextTabId = tabId;
+      this.dialogRef = this.dialog.open(this.dialogTemplate, {
+        width: '400px'
+      });
+    } else {
+      // @ts-ignore
+      this.publishEvent({ viewName, tabId });
+      this.currentTabId = tabId;
+      this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+      this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    }
+  }
+
+  clearSelectionAndSwitchTab(): void {
+    const viewName = this.tabItems
+      .find((tab: any) => tab.id === this.currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+
+    this.publishEvent({ clearSelections: true, viewName });
+    searchtabsClick(this.nextTabId, this.tabData, this.currentTabId);
+    this.onDialogClose();
+    this.currentTabId = this.nextTabId;
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+  }
+
+  onDialogClose(): void {
+    this.dialogRef.close();
+  }
+
+  publishEvent({ clearSelections, viewName }) {
+    const payload: any = {};
+
+    if (clearSelections) {
+      payload.clearSelections = clearSelections;
+    }
+
+    if (viewName) {
+      payload.viewName = viewName;
+    }
+
+    PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+  }
+
+  get activeTabPConnect() {
+    const tabData = this.tabItems.find(tab => tab.id === this.currentTabId);
+    return tabData.content?.getPConnect();
+  }
+
+  checkIfSelectionsExist(getPConnect) {
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect.getConfigProps();
+    const isMultiSelectMode = selectionMode === MULTI;
+
+    const dataRelationshipContext = contextClass && name ? name : null;
+
+    const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+
+    let selectionsExist = false;
+    if (isMultiSelectMode) {
+      selectionsExist = readonlyContextList?.length > 0;
+    } else if (contextPage) {
+      selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;
+    }
+    return selectionsExist;
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/data-reference/search-form/tabsData.ts

@@ -0,0 +1,160 @@
+import { getTabLabel } from '@pega/angular-sdk-components';
+
+export function getTabCountSources(deferLoadedTabs) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.reduce(
+    (prev, tab, index) => {
+      const config = tab.getPConnect().getConfigProps();
+      const { value: showTabCount } = config.inheritedProps?.find(item => item.prop === 'showTabCount') || {};
+      const { value } = config.inheritedProps?.find(item => item.prop === 'count') || {};
+      const tabCountSource = config.inheritedProps?.find(item => item.prop === 'tabCount');
+      const name = getTabLabel(tab.getPConnect());
+      const tabId = `${viewName}-${config.name || name}-${index}`;
+      if (showTabCount) {
+        if (tabCountSource?.value?.fields?.count) {
+          const isPrefixedByDot = tabCountSource.value.fields.count.substring(0, 1) === '.';
+          return {
+            ...prev,
+            dataPageSources: [
+              ...prev.dataPageSources,
+              {
+                dataPageName: tabCountSource.value.source,
+                tabId,
+                tabCountProp: isPrefixedByDot ? tabCountSource.value.fields.count.substring(1) : tabCountSource.value.fields.count,
+                dataViewParameters: tabCountSource.value?.parameters || {}
+              }
+            ]
+          };
+        }
+        if (Number.isInteger(value) && value % 1 === 0) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                count: value,
+                context: tab.getPConnect().getContextName(),
+                tabId
+              }
+            ]
+          };
+        }
+        if (value?.isDeferred) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                propertyName: value.propertyName,
+                context: 'content',
+                tabId
+              }
+            ]
+          };
+        }
+      }
+      return prev;
+    },
+    {
+      dataPageSources: [],
+      calculatedFields: []
+    }
+  );
+}
+
+function tabContent(id, index, overideTabContent, tab, data, currentTabId, template) {
+  if (id === currentTabId || template === 'HierarchicalForm') {
+    if (overideTabContent) {
+      return tab.getPConnect().getComponent();
+    }
+    if (data[index]?.content) {
+      return data[index]?.content;
+    }
+    return tab.getPConnect().getComponent();
+  }
+  if (template !== 'HierarchicalForm') {
+    return overideTabContent ? null : data[index]?.content;
+  }
+}
+
+function getTabsData(deferLoadedTabs, countMetadata, currentTabId, data) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.map((tab, index) => {
+    const config = tab.getPConnect().getConfigProps();
+    const name = getTabLabel(tab.getPConnect());
+    const tabId = `${viewName}-${config.name || name}-${index}`;
+    const count = countMetadata.find(item => item.tabId === tabId)?.count;
+
+    return {
+      name,
+      id: tabId,
+      getPConnect: tab.getPConnect,
+      content: tabContent(tabId, index, '', tab, data, currentTabId, ''),
+      loaded: tabId === currentTabId || Boolean(data[index]?.content),
+      visibility: () => {
+        const tabConfig = tab.getPConnect().getConfigProps();
+        const isVisible = !('visibility' in tabConfig) || tabConfig.visibility === true;
+        if (!isVisible) {
+          tab.getPConnect().removeNode();
+        }
+        return isVisible;
+      },
+      count
+    };
+  });
+}
+
+export function getData(deferLoadedTabs, tabCountSources, currentTabId, data) {
+  let countMetadata;
+  let tabData;
+  const pConn = deferLoadedTabs.getPConnect();
+  const { dataPageSources, calculatedFields } = tabCountSources;
+  const calculatedFieldsWithoutValue = calculatedFields.filter(item => item.propertyName);
+  if (dataPageSources.length) {
+    Promise.all(dataPageSources.map(item => PCore.getDataPageUtils().getPageDataAsync(item.dataPageName, '', item.dataViewParameters)))
+      .then(res => {
+        const temp = res.map((r, index) => ({
+          ...dataPageSources[index],
+          count: r[dataPageSources[index].tabCountProp]
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else if (calculatedFieldsWithoutValue.length) {
+    PCore.getViewRuleApi()
+      // @ts-ignore
+      .getCalculatedFields(
+        pConn.getCaseInfo().getKey(),
+        pConn.getCurrentView(),
+        calculatedFieldsWithoutValue.map(({ propertyName, context }) => ({
+          name: propertyName,
+          context
+        }))
+      )
+      .then(res => {
+        const values = (res?.data as any)?.caseInfo?.content || {};
+        const temp = calculatedFields.map(field => ({
+          ...field,
+          count: values[field.propertyName?.substring(1)] || field.count
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else {
+    countMetadata = calculatedFields.map(field => ({
+      ...field,
+      count: field.count
+    }));
+    tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+  }
+
+  return tabData;
+}

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

@@ -0,0 +1,92 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect;
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect, dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect.getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -28,10 +28,9 @@ interface DefaultFormProps {
   selector: 'app-default-form',
   templateUrl: './default-form.component.html',
   styleUrls: ['./default-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent extends FormTemplateBase implements OnInit {
+export class DefaultFormComponent extends FormTemplateBase implements OnInit, OnChanges {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -60,6 +59,14 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit {
     this.updateSelf();
   }
 
+  ngOnChanges(changes) {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && !PCore.isDeepEqual(pConn$.previousValue.getConfigProps(), pConn$.currentValue.getConfigProps())) {
+      this.updateSelf();
+    }
+  }
+
   updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsComponent extends DetailsTemplateBase {

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

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

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsOneColumnComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-sub-tabs/details-sub-tabs.component.ts

@@ -9,7 +9,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-sub-tabs',
   templateUrl: './details-sub-tabs.component.html',
   styleUrls: ['./details-sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsSubTabsComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsThreeColumnComponent extends DetailsTemplateBase {

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

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsTwoColumnComponent extends DetailsTemplateBase {

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

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

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

@@ -17,7 +17,6 @@ interface DynamicTabsProps {
   selector: 'app-dynamic-tabs',
   templateUrl: './dynamic-tabs.component.html',
   styleUrls: ['./dynamic-tabs.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DynamicTabsComponent implements OnInit, OnDestroy {

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-list/field-group-list.component.scss

@@ -1,5 +1,4 @@
 .psdk-details-fields-label {
-  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

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

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-field-group-list',
   templateUrl: './field-group-list.component.html',
   styleUrls: ['./field-group-list.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupListComponent {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -29,10 +29,9 @@ interface FieldGroupTemplateProps {
   selector: 'app-field-group-template',
   templateUrl: './field-group-template.component.html',
   styleUrls: ['./field-group-template.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
   @Input() configProps$: FieldGroupTemplateProps;
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
@@ -46,7 +45,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   heading: any;
   children: any;
   menuIconOverride$: any;
-  referenceListLength: number;
+  referenceListLength = signal<number | null>(null);
   fieldHeader: any;
 
   allowAdd = true;
@@ -59,10 +58,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   ) {}
 
   ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.updateSelf();
-
     this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
 
     const { allowActions, allowTableEdit, referenceList } = this.configProps$;
@@ -87,16 +82,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
-  onStateChange() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
   ngOnChanges(changes) {
     if (changes && changes.configProps$) {
       const props = changes.configProps$;
@@ -108,16 +93,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         }
 
         this.updateSelf();
+
+        setTimeout(() => {
+          this.angularPConnect.shouldComponentUpdate(this);
+        }, 100);
       }
     }
   }
 
-  ngAfterViewInit() {
-    const resolvedList = getReferenceList(this.pConn$);
-    // @ts-ignore - Expected 3 arguments, but got 1
-    this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
-  }
-
   updateSelf() {
     const inheritedProps: any = this.pConn$.getInheritedProps();
 
@@ -142,7 +125,10 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
 
-    if (this.referenceListLength != referenceList?.length) {
+    if (this.referenceListLength() != referenceList?.length) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+
       this.children = referenceList?.map((item, index) => {
         return {
           id: index,
@@ -152,7 +138,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         };
       });
     }
-    this.referenceListLength = referenceList?.length || 0;
+    this.referenceListLength.set(referenceList?.length || 0);
   }
 
   getStaticHeader = (heading, index) => {
@@ -160,14 +146,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   getDynamicHeader = (item, index) => {
-    if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+    if (this.heading && item[this.heading.substring(1)]) {
       return item[this.heading.substring(1)];
     }
     return `Row ${index + 1}`;
   };
 
   addFieldGroupItem() {
-    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength);
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength() as number);
   }
 
   deleteFieldGroupItem(index) {

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

@@ -5,7 +5,6 @@ import { Component, Input } from '@angular/core';
   selector: 'app-field-value-list',
   templateUrl: './field-value-list.component.html',
   styleUrls: ['./field-value-list.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class FieldValueListComponent {

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

@@ -13,7 +13,6 @@ interface InlineDashboardProps {
   selector: 'app-inline-dashboard',
   templateUrl: './inline-dashboard.component.html',
   styleUrls: ['./inline-dashboard.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardComponent {