Filters

Experimental feature since version 1.80. The API may change.

Overview

The card developer can define filters in the manifest. These filters appear as a dropdown under the header. The value of each filter can be used inside a data request definition by using the {filters>/myFilter/value} placeholder. When the end user selects different value from the dropdown - a new data request will be made with the updated value.

Filter properties:

Property Type Required Default Description Schema Version Since
value any Yes The value of the filter. 1.24.0 1.80
items array No The items which will appear in the dropdown. See 'Filter item properties' below for list of available properties per item. Cannot be used together with 'item'. 1.24.0 1.80
item object No Binding info object used to bind data to items of a filter. See 'Filter item binding info properties' below for list of available properties. Cannot be used together with 'items'. 1.27.0 1.83
label string No A label for the filter. This property is used only in UI adaptation during designtime. 1.24.0 1.80
description string No More detailed description for this filter. This property is used only in UI adaptation during designtime. 1.24.0 1.80
type string No string The type of the value for the filter. Possible values: 'string' or 'integer'. This property is used only in UI adaptation during designtime. 1.24.0 1.80
data object No Data section for fetching data to populate the filter. 1.27.0 1.83

Filter item properties:

Property Type Required Default Description Schema Version Since
title string Yes The title of the item which appear 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

Filter item binding info properties:

Property Type Required Default Description Schema Version Since
path string No / The context path. 1.27.0 1.83
template object Yes Used for data binding to the filter options. See 'Filter item properties' above for list of available properties to be bound. 1.27.0 1.83

Examples

A filter for product category is defined and later used inside a data request.

{
	"sap.card": {
		"configuration": {
			"filters": {
				"productCategory": {
					"value": "Notebooks",
					"type": "string",
					"label": "Category",
					"description": "Filter the products by 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