How to Filter with OR and AND Conditions in SAP UI5?

UI5
funnel

See for how to filter with two or more values in SAP UI5 in an XML view or a controller. If you filter with for multiple, then those filters are combined either with an AND or an OR condition. But how to set an AND or OR condition for multiple filters in SAP UI5?

For example, a list contains two items. Item 1 has as value 1 = foo1 and as value 2 = bar1. Item 2 has as value 1 = foo2 and as value 2 = bar2. There is a filter with the condition CONTAINS for value 1, and a filter with the condition CONTAINS as well for value 2 of the items.

With an OR condition between the filters and a query ‘f’, the result would be item 1 and item 2. Because ‘f’ is in ‘foo1’ which is the value 1 of item 1. And because of the OR condition is the value 2 of item 1 not necessary to be a match with the query ‘f’.

Same goes for item 2: ‘f’ is in ‘foo2’ which is the value 1 of item 2 – value 1 of item 2 is sufficient to show the item 2 because the value 2 is not necessary due to the OR condition between the filters for value 1 and value 2.

With an AND condition between the filters and the same query ‘f’, the result would be empty. Even though ‘f’ is in ‘foo1’ which is the value 1 of item 1. But ‘f’ is not in value 2 of item 1. And because of the AND condition between the filters is value 2 necessary to be a match as well to show item 1. Same goes for item 2.

To toggle between the OR and AND condition in a contoller is pretty easy. For example:

// in your controller

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator"
], function(Controller, Filter, FilterOperator) {
  "use strict";

  return Controller.extend("my.app.controller.View1", function() {
  
    onSearch: function (oEvent) {
    
      var sQuery = oEvent.getSource().getValue();  
    
      // filter container
      var oFilter = new sap.ui.model.Filter({
    
        filters: [

          // filter for value 1
          new sap.ui.model.Filter("value1", sap.ui.model.FilterOperator.Contains, sQuery),
          
          // filter for value 2
          new sap.ui.model.Filter("value2", sap.ui.model.FilterOperator.Contains, sQuery)

        ],
    
        // set the OR or AND condition between the filters
        // true for AND, and false for OR
        // false by default
        and: true
    
      });
      
      var oBinding = this.byId("list-id").getBinding("items");     
      
      // apply filters
      oBinding.filter(oFilter, sap.ui.model.FilterType.Application);
   
    }

  });

});

The default value is false. Hence, the filters are combined with an OR condition in default if the and property of the filter container is not set.

The AND or OR condition can be set in an XML view as well. See here for how to set the AND or OR condition for multiple filters in an XML view.

Here is an example of how to filter with OR or AND conditions in an SAP UI5 mini application.

No Comments

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu