Implement P13N in TreeTable - Merge error detected while processing the JS control tree

[lukasmetzger]

Hello everyone

I am currently trying to implement the Personalization Engine in a Tree Table. The engine is implemented as follows:

View:

<TreeTable
        id="treeTable"
        selectionMode="None"
        enableColumnReordering="true"
        enableBusyIndicator="true"
        rows="{path:'treeModel>/treeStructure', parameters: {arrayNames:['parent', 'child']}}"
        threshold="500"
        toggleOpenState="handleChildStateChange"
        sap.ui.fl:flexibility="sap/m/flexibility/EngineFlex"
    >   
        <rowMode>
            <rowmode:Auto rowContentHeight="100"></rowmode:Auto>
        </rowMode>
        <extension>
            <m:OverflowToolbar style="Clear" class="sapMTBHeader-CTX">
                <vm:VariantManagement id="p13nVm" for="treeTable"/>
                <m:ToolbarSpacer/>
                <m:Button icon="sap-icon://action-settings" press="openPersoDialog" tooltip="Settings"/>
            </m:OverflowToolbar>
        </extension>
         <dependents>
                <columnmenu:Menu id="menu">
                    <columnmenu:items>
                        <columnmenu:ActionItem icon="sap-icon://sort" label="Sort" press="onColumnHeaderItemPress"/>
                        <columnmenu:ActionItem icon="sap-icon://table-column" label="Columns" press="onColumnHeaderItemPress"/>
                    </columnmenu:items>
                </columnmenu:Menu>
            </dependents>
            <noData>
                <m:IllustratedMessage illustrationType="sapIllus-EmptyList" enableVerticalResponsiveness="true"/>
            </noData>
        <columns>
            <Column width="250px" id="material_col" sortProperty="Material" headerMenu="menu">
                <m:Label text="Materialnummer" />
                <template>
                    <m:ObjectIdentifier
                        title="{treeModel>Material}"
                        text="{treeModel>Materialname}"
                    />
                </template>
            </Column>

            <Column id="plant_col" sortProperty="Plant" headerMenu="menu">
                <m:Label text="Werk" />
                <template>
                    <m:Text
                        text="{treeModel>Plant}"
                        wrapping="false"
                    />
                </template>
            </Column>            
        </columns>
    </TreeTable>

Controller:

onInit: function () {
               //Additional code [...]

                this._registerForP13n();
            },

_registerForP13n: function () {
                const oTable = this.byId("treeTable");
    
                this.oMetadataHelper = new MetadataHelper([{
                key: "material_col",
                label: "Material",
                path: "Material"
            },
            {
                key: "plant_col",
                label: "Plant",
                path: "Plant"
            }]);
    
                Engine.getInstance().register(oTable, {
                    helper: this.oMetadataHelper,
                    controller: {
                        Columns: new SelectionController({
                            targetAggregation: "columns",
                            control: oTable
                        }),
                        Sorter: new SortController({
                            control: oTable
                        }),
                        Groups: new GroupController({
                            control: oTable
                        }),
                        ColumnWidth: new ColumnWidthController({
                            control: oTable
                        }),
                        Filter: new FilterController({
                            control: oTable
                        })
                    }
                });

 Engine.getInstance().attachStateChange(this.handleStateChange.bind(this));
            },

onColumnHeaderItemPress: function(oEvt) {
                const oTable = this.byId("treeTable");
                //const sPanel = oEvt.getSource().getIcon().indexOf("sort") >= 0 ? "Sorter" : "Columns";
                const oColumnHeaderItem = oEvt.getSource();

                let sPanel = "Columns";
                if (oColumnHeaderItem.getIcon().indexOf("group") >= 0) {
                    sPanel = "Groups";
                } else if (oColumnHeaderItem.getIcon().indexOf("sort") >= 0) {
                    sPanel = "Sorter";
                } else if (oColumnHeaderItem.getIcon().indexOf("filter") >= 0) {
                    sPanel = "Filter";
                }
			
                Engine.getInstance().show(oTable, [sPanel], {
                    contentHeight: "35rem",
                    contentWidth: "32rem",
                    source: oTable
                });
            },

handleStateChange: function(oEvt) {

                const oTable = this.byId("treeTable");
                const oState = oEvt.getParameter("state");
    
                if (!oState) {
                    return;
                }

                //Update the columns per selection in the state
                this.updateColumns(oState);
    
                //Create Filters & Sorters
                const aGroups = this.createGroups(oState);
                const aSorter = this.createSorters(oState, aGroups);
    
                oTable.getBinding("rows").sort(aSorter);
            },

createSorters: function(oState, aExistingSorter) {
                const aSorter = aExistingSorter || [];
                oState.Sorter.forEach(function(oSorter) {
                    const oExistingSorter = aSorter.find(function(oSort) {
                        return oSort.sPath === this.oMetadataHelper.getProperty(oSorter.key).path;
                    }.bind(this));
    
                    if (oExistingSorter) {
                        oExistingSorter.bDescending = !!oSorter.descending;
                    } else {
                        aSorter.push(new Sorter(this.oMetadataHelper.getProperty(oSorter.key).path, oSorter.descending));
                    }
                }.bind(this));
    
                oState.Sorter.forEach(function(oSorter) {
                    const oCol = this.byId(oSorter.key);
                    if (oSorter.sorted !== false) {
                        oCol.setSortOrder(oSorter.descending ? sap.ui.core.SortOrder.Descending : sap.ui.core.SortOrder.Ascending);
                    }
                }.bind(this));
    
                return aSorter;
            },
    
            updateColumns: function(oState) {
                const oTable = this.byId("treeTable");

                oTable.getColumns().forEach( (oColumn, iIndex) => {
                    oColumn.setVisible(false);
                    oColumn.setWidth(oState.ColumnWidth[this._getKey(oColumn)]);
                    oColumn.setSortOrder(sap.ui.core.SortOrder.None);
                    oColumn.data("grouped", false);
                });
    
                oState.Columns.forEach( (oProp, iIndex) => {
                    const oCol = this.byId(oProp.key);
                    oCol.setVisible(true);
    
                    oTable.removeColumn(oCol);
                    oTable.insertColumn(oCol, iIndex);
                });
            },

_getKey: function(oControl) {
                return this.getView().getLocalId(oControl.getId());
            },

Now, when I hit "sort", I get the following error:

Change 'id_1716991013144_83_addSort' could not be applied. Merge error detected while processing the JS control tree. - TypeError: Cannot read properties of undefined (reading 'find')

I am not sure where I went wrong. Maybe one of you has an idea?

Thanks in advance,

Lukas