Filtering Data from an Odata Service in Table in SAPUI5

[ranjit_rao]

In my previous blogs I have shown how to bind data to a table via Odata Model. Now, Here I would show how to filter the data fetch from an odata service.

The  oData service we would use here is:

https://companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/

If we have to filter an odata service using our service url we have to ‘$filter’ and apply it with the desired equation. For example ,if we have to fetch data for the employees who fall under the CompanyId SAP, then our url should be something like this:

Filtering
https://companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/Employees?$filter=C... eq 'SAP'

Now, we will see how to implement this filter in an SAPUI5 project.

Generally, we bind Items to a Table somewhat like this:

Binding
oTable.bindItems("/Employees", template);

Lets go through this bindItems() method. This is a method which is extended from sap.m.ListBase.

bindItems(sPath, oTemplate,oSorter, aFilters): sap.m.ListBase

sPath : path to a list in the model

oTemplate : the control template for this aggregation.

oSorter : the initial sort order(optional)

aFilters : the predefined filters for this aggregation(optional).

aFilters is the parameter here which we will be using to set the filter for the Table as shown.

aFilter
var oFilters = [ new sap.ui.model.Filter("<Column for filter>","<Operator>", "<Filter Value>") ]; oTable.bindItems("/Employees", template, null, oFilters);

If our criteria is to fetch data  for Employees with CompanyID SAP, then our code will be:

CompanyID=SAP
var oFilters = [ new sap.ui.model.Filter("CompanyId","EQ", "SAP") ]; oTable.bindItems("/Employees", template, null, oFilters);

Now, Lets create a small application to implement this:

Open Eclipse, Create a New SAPUI5<mobile> project with a View named MainView<javascript view> .

Paste the following code in the “createContent: function(oController)” of the view.js page:

View.js

var oPage = new sap.m.Page({             title: "Company Details",              });              var oItemTemplate = new sap.ui.core.Item({                     key: "{key}",                     text: "{text}"              });                 var combobox = new sap.m.ComboBox("cmb1",{                     items: [ {                            "key" : "*",                            "text" : "All Data"                     }, {                              "key" : "SAP",                            "text" : "SAP"                     }, {                            "key" : "ITelO",                            "text" : "ITelO"                     } ],                  template: oItemTemplate,                     selectionChange: oController.Selection              });              var oLabel= new sap.m.Label("lbl",{                     text: "Select a Value"              });              var oTable = new sap.m.Table({                      id : "Countries",                     mode: sap.m.ListMode.None,                     columns: [                     new sap.m.Column({                            width: "1em",                            header: new sap.m.Label({                                  text: "ID"                            })                     }),new sap.m.Column({                            width: "1em",                            header: new sap.m.Label({                                  text: "Company Id"                            })                     }),new sap.m.Column({                            width: "1em",                            header: new sap.m.Label({                                  text: "First Name"                            })                     }),new sap.m.Column({                            width: "1em",                            header: new sap.m.Label({                                  text: "Last Name"                            })                     })                     ]              });              var template = new sap.m.ColumnListItem({                      id : "first_template",                     type: "Navigation",                     visible: true,                     selected: true,                     cells: [                                 new sap.m.Label({                            text: "{Id}"                     }),                    new sap.m.Label({                            text: "{CompanyId}"                     }),                    new sap.m.Label({                            text: "{FirstName}"                     }),                    new sap.m.Label({                            text: "{LastName}"                     })                     ]              });              var oFilters = null;              oTable.bindItems("/Employees", template, null, oFilters);                oPage.addContent(oLabel);              oPage.addContent(combobox);             oPage.addContent(oTable);              return oPage;

Paste the following code in the “onInit : function()” method of the controller.js page

“onInit : function()” method of the controller.js
var oModel = new sap.ui.model.odata.ODataModel("proxy/https/companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/", false); sap.ui.getCore().setModel(oModel);

Paste the following code in the below the onInit() method of the controller.js page

Selection: function(evt)

Selection : function(evt) {                                         var oFilters=null;                                         var oSelectedKey = sap.ui.getCore().byId("cmb1").getSelectedItem().getKey();                                         if(!(oSelectedKey=="*"))                                         var oFilters = [ new sap.ui.model.Filter("CompanyId","EQ", oSelectedItem) ];           sap.ui.getCore().byId("Countries").bindItems("/Employees",sap.ui.getCore().byId("first_template"), null, oFilters);             }

Now save and run the application.

Great!!!