UI Development Toolkit for HTML5 Developer

Center: Custom sorter and filter in SAPUI5

Table
Posted by Angel Puertas Jan 14, 2014
Hi!
I've been working with sap.ui.table.Table to adding some sorters and filters. The main purpose of this blog is
overwrite default sorting by adding a custom menu to table column header. This code fragment will create a
column with default sorting:
//Define the columns and the control templates to be used
oTable.addColumn(new sap.ui.table.Column({
SAPUI5 table sort column algorithm depends on model type. number = number sorting, text = text sorting, etc.

label: new s

Sometimes we use datasources (external or public services, etc) which contain bad typed attributes like
numeric values typed as string. It is possible override default table column header menu to add a custom
sorter.
This is an example of wrong sorting:

Generated by Jive on 2015-02-10+01:00

1

UI Development Toolkit for HTML5 Developer Center: Custom sorter and filter in SAPUI5 Table

Step 1. Create function addColumnSorterAndFilter

This function will add a custom menu with sorting asc, desc and filtering functionality.
/** * Adds a custom sort menu for a given table * * @param oColumn Target table column to add custom menu * @param

Step 2. Create your custom comparator

/** * Integer comparator */ function compareIntegers(value1, value2) { if ((value1 == null || value1 == undefined || value1 ==
Step 3. Apply new menu to column

var oColumn = new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "years"}), template: new sap.ui.commons

Result
Any suggestions are welcome!
Kind regards
8913 Views Tags: ux, ui, table, odata, sorting, sapui5, userinterface

Kai Artur Lucas in response to M Follower on page 3

Nov 13, 2014 2:15 PM

Generated by Jive on 2015-02-10+01:00

2

UI Development Toolkit for HTML5 Developer Center: Custom sorter and filter in SAPUI5 Table

Hi Follower,
i guess there's no way to use the filter without an binding. If you filter the model, you would probaply lose your
data, i don't know if that make scence.
Furthermore you should add an filter to the odata request (if you use one) and get only the needed data.
For manual actions on the model you could iterate through the json data manually and sort or filter the model.
//Here's an example model:
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({results:[{key:1},{key:2},{key:3},{key:4},{key:5}]});
//iterate through and do what you would, perhaps copy matching values to another model
$.each(oModel.getProperty("/results"),function( index, entry){
if(entry.key > 3){
alert("greater 3 is " + entry.key);
}});

For simple filtering an array you also can use somthing like:
var aResults= oModel.getProperty("/results");
aResults.filter(function (x) {
return x.key > 3;
});
and put the result back to the model...
also see jquery - Javascript: How to filter object array based on attributes? - Stack Overflow
Best wishes
Kai
M Follower
Nov 13, 2014 1:32 PM
Is there any way to add filter on JSONModel before binding it to a table?
Miguel Mateos
Oct 10, 2014 9:43 AM
Great post!!!

Generated by Jive on 2015-02-10+01:00

3

UI Development Toolkit for HTML5 Developer Center: Custom sorter and filter in SAPUI5 Table

Only a little bug

For MenuTextFieldItem you must use 'label' property because 'text' is undefined.

Thanks and best regards

Ivan Slavov
May 28, 2014 3:03 PM
Hi Kai,
Great example!
Regards,
Ivan Slavov
Puneet Jagdev
Mar 21, 2014 6:51 AM
Hi Kai,
Thanks a Lot for the information. It was a great help!
Thanks and Regards
Puneet Jagdev
Kai Artur Lucas in response to Angel Puertas on page 5
Jan 16, 2014 12:06 PM
Hi Angel,
thank you very much, with an json model this works very well on client site.
Furthermore i put all models in a model.js file, that's included in the index.html to make the models available
everywhere.
model.js:
//global variables
var allStockItemModel = new sap.ui.model.json.JSONModel();
var singleStockItemModel = new sap.ui.model.json.JSONModel();
var oModel;

//var sServiceUrl = "http:HOST:PORT/GW-SERVICE URL"; //for productive

var sServiceUrl = "proxy/GW-SERVICE-URL"; //for local test
var user = "user";
var pw = "pw";
gw_param = "a parameter"

Generated by Jive on 2015-02-10+01:00

4

UI Development Toolkit for HTML5 Developer Center: Custom sorter and filter in SAPUI5 Table

jQuery.sap.require("sap.ui.commons.MessageBox");
of messagebox

//do not delete - is needed for correct functionality

//methods
function initModel(){
oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false, user, pw);
sap.ui.getCore().setModel(oModel);
}
function getAllStockItems(){
var param = ["$filter=param1 eq '"+gw_param+"'"];
oModel.read("/ENTITYNAME", null, param, true,
function (oData, response){
allStockItemModel.setData(oData);
//document.write(allStockItemModel.getJSON()); //for test
},
function (oError){
alert("Error while loading allStockItemModel");
});
}

Thank you very much and best wishes

Kai
Angel Puertas in response to Kai Artur Lucas on page 6
Jan 15, 2014 2:23 PM
Hi Kai,
I think there's an option. You could avoid this creating a JSONModel after your read odata call.
For example:
yourModel.read(
yourModelUrlQuery,
'',
{},
true,
function (data, response)
{

Generated by Jive on 2015-02-10+01:00

5

UI Development Toolkit for HTML5 Developer Center: Custom sorter and filter in SAPUI5 Table

if (data != undefined) {
if(data.results.length > 0){
var modelJSON = new sap.ui.model.json.JSONModel();
modelJSON.setData({
businessData:data.results
});
//bind this JSON Model to your table
}
}
);
If you bind JSON Model to your table you'll enable client sorting & filtering.
Kind regards
Kai Artur Lucas
Jan 15, 2014 2:04 PM
Hi Angel,
thank you for your solution, i'm new to sapui5 and it helps understanding sorters and filters. With my odata
model the sorter causes a modified odata request to the gateway and uses the $filter oder orderby options of
the gateway. In my case the gateway service hasn't implemented filter or order functionalities, so the order in
the table won't change. Of course i tried the gateway service with the rest client, too.
I have all required odata already in the table. So my question is: is there a way to sort and filter the odatamodel
localy in the browser. I can imagine that it's possible to modify the odata model with javascipt.
Thank you
Kai

Generated by Jive on 2015-02-10+01:00

6