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
data Data No Data to populate the filter. 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