Skip to Content
Author's profile photo Pinaki Patra

SAP UI5 List Sorting with Header

Hi, gone through the post Custom Sorting and Grouping
for sorting an grouping

Similar way i have designed a List sorter using the formatter , but it will sort automatically and also create a header based on the property(of the xsodata) specified.

1.First we create a list.

var oDummyList= new sap.m.List({

            id : “idDummyList”,

            mode : sap.m.ListMode.SingleSelectMaster,



2.Create a local json model to save the sort property

var sort = new sap.ui.model.json.JSONModel();

        sap.ui.getCore().setModel(sort, “sort”);

3.We create a template .In the template we create a formatter function which will add the header for each sorted group
  Note : – the oData should be sorted (in the oData using ?$orderby=sort_propertyor in the db level)

var oListTemplate=new sap.m.StandardListItem({

            id: “idListTemplate”,

            title: “{NMAE}”,

            description: “{Description}”,


                path:”CATEGORY”,//the property based on which it needs to be sorted

                //List Grouping

                formatter: function(fValue) {

                    if (fValue) {

                        if(sap.ui.getCore().getModel(“sort”).getData().sortBy !== fValue){


                            sap.ui.getCore().getModel(“sort”).getData().sortBy = fValue ;

                            this.getParent().insertItem(new sap.m.GroupHeaderListItem({title : fValue}),this.getParent().indexOfItem(this));//Insert a list header



                        return null;


                    return fValue;





4.Then Bind the model and set template


              oDummyList.bindItems(“/CONTEXT?$orderby=CATEGORY”, oListTemplate, null, null);

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.