Select Filter
The Select filter provides a menu of options.
Properties
Property |
Type |
Default Value |
Required |
Description |
Schema Version |
Since |
value |
any |
|
Yes |
The initial value of the filter. |
1.24.0 |
1.80 |
items |
SelectFilterItem[] |
|
No |
The items which will appear in the dropdown. Cannot be used together with 'item'. |
1.24.0 |
1.80 |
item |
SelectFilterItemBindingInfo |
|
No |
Binding info object used to bind data to items of a filter. Cannot be used together with 'items'. |
1.27.0 |
1.83 |
SelectFilterItemBindingInfo Properties
Property |
Type |
Default Value |
Required |
Description |
Schema Version |
Since |
path |
string |
/ |
No |
The context path. |
1.27.0 |
1.83 |
template |
SelectFilterItem |
|
Yes |
Binding template for items. |
1.27.0 |
1.83 |
SelectFilterItem Properties
Property |
Type |
Default Value |
Required |
Description |
Schema Version |
Since |
title |
string |
|
Yes |
The title of the item which appears in the dropdown. |
1.24.0 |
1.80 |
key |
string |
|
Yes |
The key of the item. This key corresponds to the value of the filter. |
1.24.0 |
1.80 |
Filters Model
The following values are available for filter of type "Select":
Path |
Description |
{filters>/keyOfTheFilter/value} |
The current value of the filter. |
{filters>/keyOfTheFilter/selectedItem/title} |
The title of the selected item. |
{filters>/keyOfTheFilter/selectedItem/key} |
The key of the selected item. |
Examples
A filter for product category is defined and later used inside a data request.
{
"sap.card": {
"configuration": {
"filters": {
"productCategory": {
"value": "Notebooks",
"type": "Select",
"label": "Category",
"item": {
"path": "/items",
"template": {
"key": "{key}",
"title": "{title}"
}
},
"data": {
"json": {
"items": [
{
"title": "All",
"key": "all"
},
{
"title": "Flat Screen Monitors",
"key": "Flat Screen Monitors"
},
{
"title": "Notebooks",
"key": "Notebooks"
}
]
}
}
}
}
},
"data": {
"request": {
"url": "/SEPMRA_PROD_MAN/SEPMRA_C_PD_Product",
"parameters": {
"$filter": "{= ${filters>/productCategory/value} !== 'all' ? 'ProductCategory eq ' + ${filters>/productCategory/value} + ' and ' : ''}AverageRatingValue gt 3",
"$orderby": "AverageRatingValue desc",
"$inlinecount": "allpages"
}
}
},
"header": {
"title": "Products by category",
"subTitle": "Category {filters>/productCategory/selectedItem/title}"
},
"content": {
...
}
}
}
Try it Out