SAPUI5: How to Filter With OR and AND Conditions?

This is about filtering with OR or AND in SAPUI5.

You can set the condition in a controller or XML view.

This is the controller version, the XML view version is linked in the article.

So without further ado, let’s do this!

To Or, or not to OR, That Is the Question

If you filter multiple values of an object, the filters are combined with OR or AND conditions.

How to set an OR or AND condition for multiple filters in SAPUI5? The default condition for multiple connected filters is OR.

Here’s how you set the filter condition:

For example, a list with a search bar has these two items:

• Item1
• Item2

Item1 has two values:

• Value1 (title)
• Value2 (description)

Value1’s value is foo1. Value2’s value is bar1.

Item2 has two values:

• Value1 (title)
• Value2 (description)

Value1’s value is foo2. Value2’s value is bar2:

// in your model data

[
  {
    "id": "list-item-1",
    "value1": "foo1",
    "value2": "bar1"
  },
  {
    "id": "list-item-2",
    "value1": "foo2",
    "value2": "bar2"
  }
]

// in your XML view
...

<Toolbar>

  <SearchField
    liveChange="onSearch"
    width="100%">
  </SearchField>
 
</Toolbar>
  
<List
  id="list-id"
  items="{/}">
  <items>
 
    <StandardListItem
      title="{value1}"
      description="{value2}">
    </StandardListItem>
 
  </items>
</List>

...

Each value (title, description) has its own filter:

• Value1 (title) has a filter with the filter property CONTAINS
• Value2 (description) has a filter with the filter property CONTAINS

// in your controller
... 

onSearch: function (oEvent) {

  var sQuery = oEvent.getSource().getValue();  

  var oFilter = new Filter({

    filters: [

      new Filter("value1", FilterOperator.Contains, sQuery),
      new Filter("value2", FilterOperator.Contains, sQuery)

    ]

  });
       
  var oBinding = this.byId("list-id").getBinding("items");

  oBinding.filter(oFilter, FilterType.Application);
 
}

...

Now you type f into the search bar and hit enter:

The OR Condition

With an OR condition between the filters and a search query f, the result would be list item 1 and item 2. Because f is in foo1, which is the value of value1 (title) of item 1. And because of the OR condition, value2 of item 1 doesn’t have to be a match for the search query f—the list displays item 1 as a search result.

Same goes for item 2: the search query f is in foo2 which is the value1 (title) of item 2—value1 of item 2 is sufficient to show the item 2 because the value2 (description) is not necessarily based on the OR condition between the filters for value1 and value2.

The AND condition

With AND between the filters and the same query f, the search result would be empty—no items in the list:

Even though f is in foo1 which is the value1 (title) of item 1. BUT f isn’t in value2 of item 1. And because of the AND condition between the filters, value2 also has to be part of the set to show item 1. The same applies to item 2.

How to Set the OR or AND Filter Condition in SAPUI5

To toggle between the AND and OR condition in a filter, you just have to add the and property to the filter wrapper. The and property takes either false or true. True means the filter wrapper has an AND condition, and false means it has an OR condition.

For example:

// in your controller
... 

onSearch: function (oEvent) {

  var sQuery = oEvent.getSource().getValue();  

  var oFilter = new Filter({

    filters: [

      new Filter("value1", FilterOperator.Contains, sQuery),
      new Filter("value2", FilterOperator.Contains, sQuery)

    ]
,

    and: true

  });
       
  var oBinding = this.byId("list-id").getBinding("items");

  oBinding.filter(oFilter, FilterType.Application);
 
}

...

The default value of the and property is false. Therefore, the filters are combined with an OR condition by default if the and property of the filter container isn’t set.

The AND or OR condition can also be set in an XML view—see here for how to set the AND or OR condition for multiple filters in an XML view.