SAPUI5: How to Filter Data by Two or More Values?

This is about how to filter by multiple value via a controller in SAPUI5.

Static filters need to be done in an SAPUI5 XML, dynamic filters in an SAPUI5 controller.

The SAPUI5 XML view version is linked in the article.

Let’s dive right in!

Filter by Multiple Values in SAPUI5

For example, you have an SAPUI5 XML view and in this view a list with a search bar:

You want to filter the data of the list by multiple values—to be exact two values: the title (value1) and description (value2) of an item.

To be clear, that means, when you enter a search query into the search bar and press search, then the list is supposed to show only those items which have the search value either in the title or the description. The unfiltered meaning of filtering.

By the way, this is about how to set a filter (or multiple) in an SAPUI5 controller—the SAPUI5 XML view version is here: how to use filters when binding items in an SAPUI5 XML view?

Now let’s continue with an example:

How to Set One Filter in a Controller in SAPUI5?

First, an example of a search bar which can only filter one value of a list’s items.

To start, the SAPUI5 XML view with the search bar, the list, and the list items:

// 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>

...

Further on, the controller of the XML view: the controller sets only one filter in this first example because it’s supposed to filter only for one value in this first example (the point of this first example is, that you see how it’s done with one filter so you get an easy start—makes sense, doesn’t it?)

So let’s filter for the value1 of the list items—the title.

Here is the controller:

// in your controller
...

onSearch: function (oEvent) {

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

  var oFilter = new Filter(

    "value1", 
    FilterOperator.Contains, 
    sQuery

  );

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

  oBinding.filter([

    oFilter 

  ]);

}

...

How to Set Two (or Multiple) Filters in a Controller in SAPUI5?

Can’t get enough? Good. Then let’s filter the list for two values:

To filter the list for two values it is necessary to add a second filter to the list binding (surprise). However, you need to wrap the very first (the one from the the first example above) and the newly added second filter into another filter (third filter, but actually not a filter but rather container for the two actual filters) to make this work.

The very first and the now added second filter are combined with a condition: AND or OR. So this mean either both filter must true (AND) or only one filter must be true (OR).

For example, the list has only one list item. The title is foo and the description says bar of this list item. You search for foo in the search bar of the list. When the filters for the title and description are connected with an AND condition, then the search result is empty—both value1 and value2 would have been to be foo to make the item to show up in the search result.

But when the filters for the title and description are connected with an OR condition, then the item shows up in the search result—only one value needs to match the search query, that is enough. The title (foo) matches the search query (foo). So all good—the item is in the search result.

In SAPUI5, filters are combined with an OR condition by default. #or interlink

Now, back to, how to filter this list by multiple values—value1, value2 (in this case two filters, still multiple). If you want to filter for more than two filters, just add more filter to the filter wrapper container (the “third” filter mentioned above).

Here is the code:

// 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);
 
}

...

Voila.