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=CompanyId 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.

/wp-content/uploads/2014/11/chrome_583888.jpg

Great!!!

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

    1. Michael Appleby

      Please create a new Discussion marked as a Question.  Comments to a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (1) 

Leave a Reply