Data binding is a really important feature of UI5. User could also filter the data in data binding easily. Maybe you have already tried some
FilterOperators. But actually it can do more than that. Here I will conclude it into three types. Assume that we have a data model with 6 products. Now I would like to filter them in three ways:
- Filter out the products, whose ID is smaller than 4.
- Filter out the products, whose ID is odd.
- Filter out the products, whose name is shorter than the length that user just inputted.
You could check the demo
here.
Filter with FilterOperator
This is the most common use cases of filter in data binding. UI5 has provided many useful filter operators like equal, less than, between. These operators could be easily applied in XML view.
items="{path: '/', filters: [{path: 'id', operator: 'LT', value1: '4'}]}"
Filter with Custom Function
Sometimes we have some requirement, that the buildin FilterOperation could not cover. In this case we have to apply some custom functions. UI5's data binding has provided the possibility. In the controller we could define a Filter, which has a custom function as its "test" operator. This custom function should return a boolean value to indicate if an item meet the filter condition or not.
In our demo we have following Filter:
var oddIdBinding = this.getView().byId('oddIdList').getBinding('items');
var oddIdFilter = new sap.ui.model.Filter({
path: 'id',
test: function(value) {
return value % 2;
}
});
oddIdBinding.filter(oddIdFilter);
Filter with Custom Function, Which Has a Parameter
With custom function we could deal with most of the cases. But there are still some cases that user want to have a dynamic filter. For example, user could input some value, then the data binding should be filter with the input value. In our demo user could input a number, and the data binding will filter out the items, whose name's length is shorter than the number. In this case our custom filter function has a parameter.
Now we should apply the FilterOperator "EQ" (Equal), and have a custom Comparator. Different from the test custom function, the Comparator returns 0, 1 or -1 as the result, which means equal, larger than or less than. So if an item meet our filter condition, we should return a 0. So in the "change" event handler of the input box we have following method:
onLengthChange: function(oEvent) {
var nameLengthBinding = this.getView().byId('nameLengthList').getBinding('items');
var nameLengthFilter = new sap.ui.model.Filter({
path: 'name',
value1: parseInt(oEvent.getParameter('value')),
comparator: function(value, input) {
return value.length < input ? 0 : -1;
},
operator: sap.ui.model.FilterOperator.EQ
});
nameLengthBinding.filter(nameLengthFilter);
}
With all these three approaches you could deal with all kinds of filters.
