How to change Descending order in custom sort compare function in SAPUI5?

Question

I want to sort a local TIME such as Time": "14:00:00", I get a UTC time from backend, so firstly, I need to convert it to local time in formatter.

fnCompare in sap.ui.model.Sorter works fine, but only in Ascending order, when I tried to change it to Descending, it failed silently. Is there any clue?

Demo in JSFiddle

Worklist.controller.js:

handleScheduleSortConfirm : function(oEvent) {
    var oTable = this.getView().byId("table"),
    oBinding = oTable.getBinding("items"),
    mParams = oEvent.getParameters(),
    sPath = mParams.sortItem.getKey(),
    convertToLocal = this.formatter.convertToLocal.bind(this),                            
    bDescending = mParams.sortDescending;

    if(sPath === "Time") {     
        var oSorter = new Sorter(sPath, bDescending); //bDescending not working here
        if(bDescending) {
            oSorter.fnCompare = function(a, b) {
                console.log("true"); // log works fine
                //even tried this, still not working
                oBinding.refresh(); 
                return convertToLocal(a) >  convertToLocal(b);
            };
        } else {
            oSorter.fnCompare = function(a, b) {
                console.log("false"); // log works fine
                return convertToLocal(a) <  convertToLocal(b);
            };  
        }

        oBinding.sort(oSorter);
        return;
    }
}

Worklist.view.xml:

//sap.m.Table
<Table id="table" items="{path: '/'}">
    <columns>
        <Column width="5%"></Column>
    </columns>

    <items>
        <ColumnListItem>
            <cells>
                <Text text="{
                    path: 'Time', 
                    formatter: '.formatter.convertToLocal'}
                "/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

And there is a Sort Dialog fragment

formatter.js:

convertToUTC : function(time) {
    if(time){
        const date = new Date("1970/1/1 " + time),
        offsetHour = ((new Date()).getTimezoneOffset()) / 60;

        date.setHours(date.getHours() + offsetHour);
        return this.formatter._formatTime(date); 
    }   
},

_formatTime : function(date) {
    const slice = this._sliceTime;
    return slice(date.getHours()) + ":" + slice(date.getMinutes()) + ":" + slice(date.getSeconds());
},

Answer 1

There are two issues with your sample:

1. you change the sort order twice: first, you provide the bDescending flag to the sorter that you create and second you chose a different implementation for the fnCompare function. Each change alone would reverse the sort order, but together they cancel each other
2. your compare function returns a boolean, but a compare function must return -1 (or any negative numeric value) for a < b, 0 for a === b and +1 (or any positive numeric value) for a > b (see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort, the UI5 sorter uses the same contract )

When you rewrite your handleSort method to

handleSort : function(bDescending) {
    const oTable = this.getView().byId("myTable"),
        oBinding = oTable.getBinding("items"),
        // always use same custom compare function, just toggle bDescending 
        // alternatively, you could always use the same value for bDescending 
        // and toggle the compare function instead
        oSorter = new sap.ui.model.Sorter('Time', bDescending);
        oSorter.fnCompare = function(a,b) {
            return a === b ? 0 : (a < b ? -1 : 1);
        });       
    // update sort order of binding 
    oBinding.sort(oSorter);
 }

then the two buttons sort the table as expected.

Answer 2

I think you dont need a custom sorter for this operation. You can simply define "sap/ui/table/SortOrder" in your controller and use like this:

this.getView().byId("table").sort("Time", SortOrder.Descending);

Check this page