Sapui5 - Group List Items Without Sorting Ascending Or Descending

I am using a sap.m.List control in my application that is supposed to show a sequential list. There is a grouping property in each list data that I can use to group similar items t

Solution 1:

3rd parameter of the Sorter can be a function which gets the context as a parameter.

API : https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.Sorter.html

Sample : http://jsbin.com/votesatezu/1/edit?html,js,output

Solution 2:

I got a way to resolve my problem. It's similar to the answer provided here but doesn't require to create a Sorter instance in the controller (so saves you from additional coding).

XML view:

<Listitems="{
                path: '/Steps',
                sorter: {
                    path: 'CategoryId',
                    group: '.grouper'
                },
                groupHeaderFactory: '.getGroupHeader'
            }"headerText="Here's what you do"><StandardListItemtitle="{Desc}" /></List>

Instead of passing a boolean, I call a grouper method in the group property to build a custom object for groupHeaderFactory.

Controller:

onInit: function() {
    var oModel = new sap.ui.model.json.JSONModel({
      "Steps": [
        {
          "Desc": "Open google search",
          "Category": "Google",
          "CategoryId": 1
        },
        {
          "Desc": "Search for Apple Inc.",
          "Category": "Google",
          "CategoryId": 1
        },
        {
          "Desc": "Open Apple website",
          "Category": "Apple",
          "CategoryId": 2
        },
        {
          "Desc": "Search for iPhone",
          "Category": "Apple",
          "CategoryId": 2
        },
        {
          "Desc": "Browse all iPhone models",
          "Category": "Phone",
          "CategoryId": 3
        },
        {
          "Desc": "Choose the one you like",
          "Category": "Phone",
          "CategoryId": 3
        }
      ]
    });
    this.getView().setModel(oModel);
}

grouper():

The oGroup object provides the complete model along with the binding path for each row. The binding path is stored in a property called sPath. I can get the array index from the sPath and then use it to get the corresponding Category name.

grouper: function(oGroup) {
    return {
        key: oGroup.oModel.oData.Steps[oGroup.sPath.split("/")[2]].Category
    };
}

Now when the groupHeaderFactory is called it has the Category name instead of the CategoryId.

getGroupHeader():

getGroupHeader: function(oGroup){
    returnnew sap.m.GroupHeaderListItem( {
        title: oGroup.key,
        upperCase: true
    });

}

Note: Make sure you have data-sap-ui-compatVersion="edge" in your index.html if you want to try out this example.

Yippee!

Solution 3:

You are adding some implicit meta data to your json file which is a custom sort on the category.

The sapui5 list item cannot guess that you have created such a constraint on your data :) I would advice you to simply enrich your model to:

{"Steps":[{"Desc":"Open google search","Category":"Google","CategoryId":1},{"Desc":"Search for Apple Inc.","Category":"Google","CategoryId":1},{"Desc":"Open Apple website","Category":"Apple","CategoryId":2},{"Desc":"Search for iPhone","Category":"Apple","CategoryId":2},{"Desc":"Browse all iPhone models","Category":"Phone","CategoryId":3},{"Desc":"Choose the one you like","Category":"Phone","CategoryId":3}]}

Then group on categoryId instead of category.