Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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! :wink:

1 Comment