To Realize Real Time Search In UI5 Table By Filters

Test Data Structure:

{"Materials":[
                                     {
                                      "MaterialID":"4231090440",
                                      "MaterialDescription":"BRAKE CHAMBER TYPE 27 BC",
                                      "ProductCategoryDescription":"Drum Brake",
                                      "CreatedBy":"Eddie Smoke",
                                      "DateTime":"07/16/2014 5:56AM EST",
                                      "MaterialIDhref":"#MaterialIDhref",
                                      "MaterialDescriptionhref":"#MaterialDescriptionhref",
                                      "CreatedByhref":"#CreatedByhref"
                                      },
                                      {
                                      "MaterialID":"4231060140",
                                      "MaterialDescription":"BRAKE CHAMBER TYPE 24 44",
                                      "ProductCategoryDescription":"Drum Brake",
                                      "CreatedBy":"Eddie Smoke",
                                      "DateTime":"07/16/2014 5:57AM EST",
                                      "MaterialIDhref":"#MaterialIDhref",
                                      "MaterialDescriptionhref":"#MaterialDescriptionhref",
                                      "CreatedByhref":"#CreatedByhref"
                                      }
                         ]
}

Step1: Create A Table

var oTable = new sap.ui.table.Table("oTable",{
            selectionMode: sap.ui.table.SelectionMode.Single,
            visibleRowCount : 6,
            firstVisibleRow : 0,
            title:"oTable",
            toolbar: new sap.ui.commons.Toolbar({items: [
                                                         new sap.ui.commons.Label({text : "Find"}),
                                                         new sap.ui.commons.TextField("SearchText",{liveChange: oController.Change}),
                                                         new sap.ui.commons.Button({text: "Go", press: oController.Search})
                                                ]}),
           columns:[
                    new sap.ui.table.Column({label: "Material ID", template:new sap.ui.commons.Link().bindProperty("text", "MaterialID").bindProperty("href", "MaterialIDhref"), filterProperty:"MaterialID" }),
                    new sap.ui.table.Column({label: "Material Description", template:new sap.ui.commons.Link().bindProperty("text", "MaterialDescription").bindProperty("href", "MaterialDescriptionhref"), filterProperty:"MaterialDescription" }),
                    new sap.ui.table.Column({label: "Product Category Description", template:"ProductCategoryDescription", filterProperty:"ProductCategoryDescription" }),
                    new sap.ui.table.Column({label: "Created By", template:new sap.ui.commons.Link().bindProperty("text", "CreatedBy").bindProperty("href", "CreatedByhref"),filterProperty:"CreatedBy"  }),
                    new sap.ui.table.Column({label: "Date/Time", template:"DateTime", filterProperty:"DateTime" })
                    ]
        });

Key:

1: bind a filterProperty for every column  you want to check as line 12 – 16

2. attach the event liveChange of  sap.ui.commons.TextField by a recall function by yourself( in this I named my function Change) as line 8

Step2:Realize The Recall Function

Change: function(oEvent){
       
       
        var oTable = sap.ui.getCore().byId("oTable");
      
        var searchText = oEvent.getParameters().liveValue;
       
        var filters=[];
       
        if(searchText.trim()!=''){
           
            var filter1 = new sap.ui.model.Filter({path:"MaterialID",operator:sap.ui.model.FilterOperator.Contains,value1:searchText});
            var filter2 = new sap.ui.model.Filter({path:"MaterialDescription",operator:sap.ui.model.FilterOperator.Contains,value1:searchText});
            var filter3 = new sap.ui.model.Filter({path:"ProductCategoryDescription",operator:sap.ui.model.FilterOperator.Contains,value1:searchText});
            var filter4 = new sap.ui.model.Filter({path:"CreatedBy",operator:sap.ui.model.FilterOperator.Contains,value1:searchText});
            filters = [filter1,filter2,filter3,filter4];
            var finalFilter = new sap.ui.model.Filter({filters:filters, and:false});
            oTable.getBinding("rows").filter(finalFilter, sap.ui.model.FilterType.Application);
        }else{
            oTable.getBinding("rows").filter([], sap.ui.model.FilterType.Application);
            }
       
       
    }

Key:

1. get the live value of text filed real-time(as line 6)

2. logical check of now value in text filed(as line 10)

3. create several “and:false” filters and combine them into a final filter to realize checking several columns at the same time( In default if you combine several filters, their communications are AND, after setting the “and:false”, it become OR)

To realize real-time search in a normal UI5 table is a problem in my work, and I haven’t found any articles about this, so I post this post.

I hope it can help you!

Thanks for watching! 😉