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