Show TOC

Adding Filterable Field to the Smart Filter BarLocate this document in the navigation structure

The following example shows the development steps necessary to add an additional filter to the smart filter bar of the list report.

In this example, we assume that you want to add a field called Price with two filter options to the smart filter bar of the Manage Products app's list report. You have to complete the following steps:

  1. Create a controller for a new facet on the list report
  2. Add field name and filter option texts to the i18n file
  3. Define a view and a controller extension in the manifest.json file
Step 1: Create controller for a new facet on the list report

In the SAP Web IDE, open the folder structure of the Manage Products project and then proceed as follows:

  1. In the webapp folder, create a new subfolder called ext.
  2. In the folder ext, create a new subfolder called fragment.
  3. In the fragment folder, create file Custom.Filter.fragment.xml.
  4. In the controller folder, create file Custom.Filter.controller.js.
  5. Define the fragment by adding ControlConfiguration to the smart filter bar. The options for the ComboBox are shown in the following snippet:
    Sample Code
    	<!-- Price Filter-->
    	<smartfilterbar:ControlConfiguration key="CustomPriceFilter" index="3" 
    							visibleInAdvancedArea="true" groupId="_BASIC">
    			<ComboBox id="CustomPriceFilter-combobox">
    				<core:Item id="CustomPriceFilterItem0" key="0" 
    				<core:Item id="CustomPriceFilterItem3" key="1" 
  6. To generate the additional filter logic, implement the logic in the controller as shown in the following snippet.
    Sample Code
    sap.ui.controller("ManageProducts.ext.controller.CustomFilter", {
    		onBeforeRebindTableExtension: function(oEvent) {
    		var oBindingParams = oEvent.getParameter("bindingParams");
    		oBindingParams.parameters = oBindingParams.parameters || {};
    		var oSmartTable = oEvent.getSource();
    		var oSmartFilterBar = this.byId(oSmartTable.getSmartFilterId());
    		var vCategory;
    		if (oSmartFilterBar instanceof sap.ui.comp.smartfilterbar.SmartFilterBar) {
    			//Custom price filter
    			var oCustomControl = oSmartFilterBar.getControlByKey("CustomPriceFilter");
    			if (oCustomControl instanceof sap.m.ComboBox) {
    				vCategory = oCustomControl.getSelectedKey();
    				switch (vCategory) {
    					case "0":
    						oBindingParams.filters.push(new sap.ui.model.Filter("Price", "LE", "100"));
    					case "1":
    						oBindingParams.filters.push(new sap.ui.model.Filter("Price", "GT", "100"));
Step 2: Add field name and filter option texts to the i18n file

To make the field name and the filter options translatable, add the texts to the i18n file as follows:

Sample Code
#XFLD: Custom filter breakout label
#XTIT: Price range 0-100
xtit.Price_0-100=Price between 0-100
#XTIT: Price range Over 100
xtit.Price_GE100=Price: Over 100		
Step 3: Define a view and a controller extension in the manifest.json file

To integrate the logic as an extension, define a view and controller extension to load the files you created in Step 1 (Custom.Filter.fragment.xml and Custom.Filter.controller.js).

The logic is added to the ListReport section of the Manage Products app.

Sample Code
"extends": {
	"extensions": {
		"sap.ui.controllerExtensions": {
			"sap.suite.ui.generic.template.ListReport.view.ListReport": {
				"controllerName": "ManageProducts.ext.controller.CustomFilter"
		"sap.ui.viewExtensions": {
			"sap.suite.ui.generic.template.ListReport.view.ListReport": {
				"SmartFilterBarControlConfigurationExtension|SEPMRA_C_PD_Product": {
					"className": "sap.ui.core.Fragment",
					"fragmentName": "ManageProducts.ext.fragment.CustomFilter",
					"type": "XML"

The list report of the Manage Products app displays the new field Price with filter options.

Figure 1: List Report: Field And Filter Added