Combo Box Filter

The combo box filter provides a menu of options.

Properties

Property Type Default Value Required Description Schema Version Since
value any No The initial free-text value of the filter. If you want to select an option from the list use the selectedKey instead. 1.61.0 1.121
selectedKey string No The initial selected key of the combo box. Use this instead of value to explicitly define that one of the options is selected. 1.61.0 1.121
selectedIndex int -1 No The initial selected index of the combo box. Use this if the keys of the items are not known upfront."
Index value for no selection is "-1".
Note: If both "selectedKey" and "selectedIndex" are provided, "selectedIndex" will be ignored. 		1.66.0 1.129
placeholder string No Text shown when the filter value is empty. 1.61.0 1.121
items ComboBoxFilterItem[] No The items that will appear in the dropdown. 1.61.0 1.121
item ComboBoxFilterItemBindingInfo No Binding info object used to bind data to items of a filter. Cannot be used together with 'items'. 1.61.0 1.121
data Data No Data to populate the filter. 1.61.0 1.121
group Group No Defines whether and how items are grouped. 1.69.0 1.132
ComboBoxFilterItemBindingInfo Properties
Property Type Default Value Required Description Schema Version Since
path string / No The context path. 1.42.0 1.121
template ComboBoxFilterItem Yes Binding template for items. 1.42.0 1.121
ComboBoxFilterItem Properties
Property Type Default Value Required Description Schema Version Since
title string Yes The title of the item that appears in the dropdown. 1.42.0 1.121
key string Yes The key of the item. This key corresponds to the value of the filter. 1.42.0 1.121
additionalText string No The secondary text for the ComboBox filter item. 1.42.0 1.121
Group Properties
Property Type Default Value Required Description Schema Version Since
title string Yes Title of the group 1.69.0 1.132
order Order Yes The sorting order of the group. 1.69.0 1.132
Group order Properties
Property Type Default Value Required Description Schema Version Since
path string Yes The binding path used for sorting 1.69.0 1.132
dir string "ASC" No The direction of the sorting order - "ASC" or "DESC". 1.69.0 1.132

Filters Model

The following values are available for filter of type "ComboBox":

Path Description
{filters>/keyOfTheFilter/value} The current value of the filter. If the user enters free text it will be this text. If the user selects one of the options, this will be the title of the option. For selected key use {filters>/keyOfTheFilter/selectedItem/key}.
{filters>/keyOfTheFilter/selectedItem/title} The title of the selected item.
{filters>/keyOfTheFilter/selectedItem/key} The key of the selected item.
{filters>/keyOfTheFilter/selectedItem/additionalText} The secondary value of the selected item.

Examples

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

{
	"sap.app": {
		"id": "card.explorer.filters.combobox.multiple",
		"type": "card",
		"title": "Sample of a Card with filters"
	},
	"sap.card": {
		"configuration": {
			"filters": {
				"country": {
					"selectedKey": "FR",
					"type": "ComboBox",
					"label": "Country",
					"item": {
						"path": "/",
						"template": {
							"key": "{key}",
							"title": "{text}",
							"additionalText": "{key}"
						}
					},
					"data": {
						"json": [
							{
								"text": "Austria",
								"key": "AT"
							},
							{
								"text": "Belgium",
								"key": "BE"
							},
							{
								"text": "France",
								"key": "FR"
							},
							{
								"text": "Germany",
								"key": "DE"
							},
							{
								"text": "United Kingdom",
								"key": "GB"
							}
						]
					}
				}
			},
			"destinations": {
				"Northwind_V4": {
					"name": "Northwind_V4",
					"label": "Northwind V4 Service URL",
					"defaultUrl": "https://services.odata.org/V4/Northwind/Northwind.svc"
				}
			},
			"parameters": {
				"maxOrdersShown": {
					"value": 6,
					"type": "integer",
					"label": "Number of orders",
					"description": "How many orders to show in the list."
				}
			}
		},
		"data": {
			"request": {
				"url": "{{destinations.Northwind_V4}}/Orders",
				"parameters": {
					"$top": "{parameters>/maxOrdersShown/value}",
					"$filter": "ShipCountry eq '{filters>/country/value}'"
				}
			},
			"path": "/value"
		},
		"type": "List",
		"header": {
			"title": "Orders from {filters>/country/value}",
			"subTitle" : "{filters>/country/selectedItem/title} {filters>/country/selectedItem/key}",
			"icon": {
				"src": "sap-icon://product"
			}
		},
		"content": {
			...
		}
	}
}
Try it Out