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!