How to Use a Sorter in an XML View or Controller in SAP UI5?

UI5
Alphabet made of wooden letters layed out as a spiral.

Sorter sorts and groups items of an SAP UI5 control. For example, a sorter can sort a list’s items ascending or descending respective an item’s value. And a sorter can group a list’s items to a value of the items.

A sorter sorts and groups items in a list in SAP UI5.
A list’s items are grouped and sorted descending by a sorter which is set to the list’s binding – the products are grouped by the products supplier names and sorted ascending in each group.

A sorter can be set to a control’s binding in

  1. an XML view – a static sorter
  2. a controller – a dynamic sorter

Set Sorter in an XML View

Use an XML view to set an initial sorter for a control such as a list:

<!-- in your XML view -->
 
...
 
<List
  id="list-id"
  items="{
 
    path: '/Products', 
     
    sorter: [
 
      {
        path: 'SupplierName', 
        descending: 'false', 
        group: 'true'
      }

    ]
   
  }">
  <items>
     
    <StandardListItem
      title="{ProductName}"
      description="{ProductId}"/>
   
  </items>
</List>
 
...

Set Sorter in a Controller

Use the controller of a view to manually add a sorter to a control:

// in your controller
 
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/Sorter"
], function(Controller, Sorter) {
  "use strict";
 
  return Controller.extend("my.app.controller.View1", function() {

   ...   

    onSetSorter: function() {

      var oSorter = new Sorter({
        path: 'Supplier', 
        descending: false, 
        group: 'true'
      });  

      var oList = this.byId("list-id");

      oList.getBinding("items").sort(oSorter);

    },

    ...   
 
  });
 
});
No Comments

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu