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! 😉
This is exactly what I was looking for..
Found many post where array of filters is created for multi-column filter. But their results are "AND" and not exactly what is required in real time of course 😉
Thanks 🙂