How to Filter Data By Two or More Values in SAP UI5?

UI5

For example, there is a list and a search for the list. The aim is to filter the data of the list by multiple values. That means, it is not only supposed to be possible to filter the title values of the list items but also the description values.

Therefore, it should be possible to search the list for the title and the description of an item.

First, an example of a list which can only search for one value of its items. That is the list within an XML View:

// in an XML view

<mvc:View
  controllerName="controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page>
    <content>

      <Toolbar>

        <SearchField
          liveChange="onSearch"
          width="100%">
        </SearchField>

      </Toolbar>
 
      <List
        id="list-id"
        items="{/}">
          <items>

            <StandardListItem
              title="{value1}"
              description="{value2}">
            </StandardListItem>

          </items>
      </List>

    </content>

  </Page>
</mvc:View>

The XML view’s controller sets only one filter for the title value for the items of the list – value1. And because it is only set a filter for value1, it is only possible to search for the title values of the list items.

You can bind filters and multiple filter in an XML view as well.

// in the 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();
      
      // only one filter
      var oFilter = new Filter(
        "value1", 
        FilterOperator.Contains, 
        sQuery
      );

      var oBinding = this.byId("list-id").getBinding("items");
      
      // apply filter
      oBinding.filter([
      
        oFilter 
    
      ]);

    }

  });

});

To filter and search in the list for two values, it is necessary to add a second filter. And to add the first and the second filter to a new filter. This filter acts as a container for the two filters.

The filters are combined with an OR condition by default. Here is explained how to change the filter condition.

With the second filter added it is then possible to search for the description of an item too – value2:

// in the controller

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

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

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

        ]

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

      // apply filters
      oBinding.filter(oFilter, FilterType.Application);

    }

  });

});

Here is an example of how to filter multiple values of a list in an SAP UI5 mini application.

No Comments

FREE SAP Modules Overview! (Complete)

Plus, receive all future infographics and SAP tips & insights that are only shared with the private newsletter subscribers. 

Latest Poll
Essential Ressources

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