Hi Experts,
I was trying to implement the P13n Sort panel in my application. We have a clear example for Column Panel available in SAP SDK for version 1.71 . But when it comes to Sort panel, we don't have any example of how to implement it.
I have tried to set it up in my application with the available info and succeeded till some point. But i am unable to implement the events of Sort Panel like addSortItem removeSortItem deleteSortItem and unable to get the exact functionality. Whereas in the latest version of sap ui5, we have a clear example of how the sort panel works.
But since we are using the 1.71 version in our system, if there is some working example it would help a lot.
sort-panel-p13n.pngsort-panel-p13n-view.png
View code for settings button:
<Button id="idViewSettings" icon="sap-icon://action-settings" press="onpressViewSettingPanel"/>
when user clicks on the above button, i am opening up the below fragment. Controller code is available below.
P13n Panel Fragment Code:
======================
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:p13n="sap.m.p13n" xmlns="sap.m">
<P13nDialog showReset="true" showResetEnabled="{path: '/ShowResetEnabled'}" ok="onAccOK" cancel="onAccCancel" reset="onAccReset"
class="sapUiSizeCompact">
<panels>
<P13nColumnsPanel changeColumnsItems="onChangeAccColumnsItems" items="{path: '/Items'}" columnsItems="{path: '/ColumnsItems'}">
<items>
<P13nItem columnKey="{columnKey}" text="{text}"/>
</items>
<columnsItems>
<P13nColumnsItem columnKey="{columnKey}" index="{index}" visible="{visible}"/>
</columnsItems>
</P13nColumnsPanel>
<P13nSortPanel addSortItem="onAddAccSortItem" removeSortItem="onRemoveAccSortItem" updateSortItem="onUpdateAccSortItem" items="{path: '/Items'}" sortItems="{path: '/SortItems'}">
<items>
<P13nItem columnKey="{columnKey}" text="{text}"/>
</items>
<sortItems>
<P13nSortItem columnKey="{columnKey}" operation="{descending}"/>
</sortItems>
</P13nSortPanel>
</panels>
</P13nDialog>
</core:FragmentDefinition>
Controller Code:
===========
oDataInitial:{
Items: [{
columnKey: "A",
text: "A",
template: "A"
}, {
columnKey: "B",
text: "B",
template: "B"
}, {
columnKey: "C",
text: "C",
template: "C"
}, {
columnKey: "D",
text: "D",
template: "D"
}],
ColumnsItems: [{
columnKey: "A",
template: "A",
visible: true,
index: 0
}, {
columnKey: "B",
template: "B",
visible: true,
index: 1
}, {
columnKey: "C",
template: "C",
visible: true,
index: 2
}, {
columnKey: "D",
template: "D",
visible: true
}],
SortItems: [{
columnKey: "A",
descending: false,
operation: "Ascending",
index: 0
}, {
columnKey: "B",
descending: false,
operation: "Ascending",
index: 1
}, {
columnKey: "C",
descending: false,
operation: "Ascending",
index: 2
}, {
columnKey: "D",
descending: false,
operation: "Ascending",
index: 3
}]
},
onInit: function () {
this.oJSONModel = new JSONModel(jQuery.extend(true, {}, this.oDataInitial));
this.oJSONModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
},
//triggers when clicked on settings button
onpressViewSettingPanel: function () {
var oPersonalizationDialog = sap.ui.xmlfragment("test.test1.TestProject.fragments.P13nPanelPopup", this);
this.oJSONModel.setProperty("/ShowResetEnabled", this._isChangedColumnsItems());
oPersonalizationDialog.setModel(this.oJSONModel);
this.getView().addDependent(oPersonalizationDialog);
this.oDataBeforeOpen = jQuery.extend(true, {}, this.oJSONModel.getData());
oPersonalizationDialog.open();
},
//function where we are doing 2-way binding for column and sort panels, column code taken from 1.71 version P13n Dialog example.
_isChangedColumnsItems: function () {
var fnGetArrayElementByKey = function (sKey, sValue, aArray) {
var aElements = aArray.filter(function (oElement) {
return oElement[sKey] !== undefined && oElement[sKey] === sValue;
});
return aElements.length ? aElements[0] : null;
};
var fnGetUnion = function (aDataBase, aData) {
if (!aData) {
return jQuery.extend(true, [], aDataBase);
}
var aUnion = jQuery.extend(true, [], aData);
aDataBase.forEach(function (oMItemBase) {
var oMItemUnion = fnGetArrayElementByKey("columnKey", oMItemBase.columnKey, aUnion);
if (!oMItemUnion) {
aUnion.push(oMItemBase);
return;
}
if (oMItemUnion.visible === undefined && oMItemBase.visible !== undefined) {
oMItemUnion.visible = oMItemBase.visible;
}
if (oMItemUnion.width === undefined && oMItemBase.width !== undefined) {
oMItemUnion.width = oMItemBase.width;
}
if (oMItemUnion.total === undefined && oMItemBase.total !== undefined) {
oMItemUnion.total = oMItemBase.total;
}
if (oMItemUnion.index === undefined && oMItemBase.index !== undefined) {
oMItemUnion.index = oMItemBase.index;
}
});
return aUnion;
};
var fnIsEqual = function (aDataBase, aData) {
if (!aData) {
return true;
}
if (aDataBase.length !== aData.length) {
return false;
}
//added code here for multiple sorting based on the user selection from sort panel
var fnSort = function (a, b) {
if (a.columnKey < b.columnKey) {
return -1;
} else if (a.columnKey > b.columnKey) {
return 1;
} else {
return 0;
}
};
aDataBase.sort(fnSort);
aData.sort(fnSort);
//end of code here for multiple sorting based on the user selection from sort panel
var aItemsNotEqual = aDataBase.filter(function (oDataBase, iIndex) {
return oDataBase.columnKey !== aData[iIndex].columnKey || oDataBase.visible !== aData[iIndex].visible || oDataBase.index !==
aData[iIndex].index || oDataBase.width !== aData[iIndex].width || oDataBase.total !== aData[iIndex].total;
});
return aItemsNotEqual.length === 0;
};
var aDataRuntime = fnGetUnion(this.oDataInitial.ColumnsItems, this.oJSONModel.getProperty("/ColumnsItems"));
return !fnIsEqual(aDataRuntime, this.oDataInitial.ColumnsItems);
},
//function when column panel values are checked/unchecked.
onChangeColumnsItems: function (oEvent) {
this.oJSONModel.setProperty("/ColumnsItems", oEvent.getParameter("items"));
this.oJSONModel.setProperty("/ShowResetEnabled", this._isChangedColumnsItems());
},
Please do let me know If anyone has implemented the Sort panels in their application and has a working solution in version 1.71.