SAPUI5: How to Use Filters When Binding Items? (XML View)

🏷️

This is about filtering items via an XML view in SAPUI5.

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

The SAPUI5 controller version is linked in the article.

Let’s dive right in!

First, Static vs. Dynamic Filters in SAPUI5

In SAPUI5, you can set filters on a binding in:

  • SAPUI5 XML views
  • SAPUI5 Controllers

This is the SAPUI5 XML view version—how to use a filter or multiple filters in an SAPUI5 controller is explained here: how to filter data by two or more values in SAPUI5?

First, be aware of this:

When you set a filter in an XML view, it is static and NOT dynamic. This means the initial set filter stays the same from the start of the application when the user opens it to the end of the application when the user closes it.

Therefore, only set the filter in an XML view when it’s supposed to be static. Otherwise set the filter in a controller.

For the sake of clarity:

Say for instance you have a list that is supposed to be filtered permanently by the value foo—the list shows only the items that have foo in their tile, from the beginning to the end of the use of the application.

On the other hand, if your application has a list where item titles are supposed to be dynamically filtered by foo when a certain button is pressed, the list shows only those list items which have the value foo.

Another example for dynamic filtering—so when you need to use a controller instead of an XML view: you have an SAPUI5 control with a search bar. The search bar dynamically filters the control’s items based on the user’s search text.

Now that this is clear, let’s take a look at how to set static filters on SAPUI5 XML views:

How to Set One or Multiple Filters in an SAPUI5 XML View?

For example, the requirement is to set two static filters to a list’s items in an XML view:

  1. Value 1: A filter for the titles of the list items—show those items whose titles exactly match (EQ) the value foo.
  2. Value 2: A filter for the descriptions of the list items—show those items whose descriptions contain (Contains) the value bar.

Here’s how it looks:

<!-- in your XML view -->
...

<List
  id="list-id"
  items="{

    path: '/', 
    
    filters: [

      {
        path: 'value1', 
        operator: 'EQ', 
        value1: 'foo'
      },
      {
        path: 'value2', 
        operator: 'Contains', 
        value2: 'bar'
      }

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

...

Quite easy, isn’t it?

AND/OR: How to Change the Filter Condition in an SAPUI5 XML View?

By default, the filters are combined with OR conditions. See here for what a filter condition is and how to change one in a controller in SAPUI5.

In an XML View you can change the default OR condition too.

You can use the AND condition by adding the object property and with a true value to the respective filter:

<!-- in your XML view -->

...

<List
  id="list-id"
  items="{

    path: '/', 
    
    filters: [

      {
        path: 'value1', 
        operator: 'EQ', 
        value1: 'foo'
      },
      {
        path: 'value2', 
        operator: 'Contains', 
        value2: 'bar',
        and: 'true'

      }

    ]
  
  }">
  <items>

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

  </items>
</List>

...

Voila.

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Leave this field blank

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

📚 More Articles

Leave a Comment

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.
You need to agree with the terms to proceed

Menu

🚀 Upgrade Your Work Experience With Altwork (Welcome to the Future)

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window