Skip to Content
0
Dec 22, 2022 at 05:53 AM

P13n Dialog Sort Panel version 1.71

102 Views

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.

Attachments