Show TOC

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

The following example shows the development steps 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 in 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 example:
    Sample Code
    <core:FragmentDefinition
    		xmlns="sap.m"
    		xmlns:smartfilterbar="sap.ui.comp.smartfilterbar"
    		xmlns:core="sap.ui.core">
    	<!-- Price Filter-->
    	<smartfilterbar:ControlConfiguration key="CustomPriceFilter" index="3" 
    	label="{i18n|sap.suite.ui.generic.template.ListReport|SEPMRA_C_PD_Product>xfld.Price}"
    							visibleInAdvancedArea="true" groupId="_BASIC">
    		<smartfilterbar:customControl>
    			<ComboBox id="CustomPriceFilter-combobox">
    				<core:Item id="CustomPriceFilterItem0" key="0" 
    						text="{i18n|sap.suite.ui.generic.template.ListReport|SEPMRA_C_PD_Product>xtit.Price_0-100}"/>
    				<core:Item id="CustomPriceFilterItem3" key="1" 
    						text="{i18n|sap.suite.ui.generic.template.ListReport|SEPMRA_C_PD_Product>xtit.Price_GE100}"/>
    			</ComboBox>
    		</smartfilterbar:customControl>
    	</smartfilterbar:ControlConfiguration> 
    </core:FragmentDefinition>	
  6. To generate the additional filter logic, implement the logic in the controller as shown in the example below.

    Note that if a user changes a filter field in the filter bar, the table shows an overlay to indicate that the filter bar state differs from the currently displayed data. If the control used in your app does not fire a change event, you have to set this up using .fireChange() so that the filter bar will recognize the change and display the overlay.

    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"));
    						break;
    					case "1":
    						oBindingParams.filters.push(new sap.ui.model.Filter("Price", "GT", "100"));
    						break;
    					default:
    						break;
    				}
    			}
    		}
    	}
    });
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
xfld.Price=Price
#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"
				}	         
			}
		}
	}
},
Results

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