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:
- Value 1: A filter for the titles of the list items—show those items whose titles exactly match (EQ) the value foo.
- 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.