Adding Filterable Field to the Smart Filter Bar

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:

Create a controller for a new facet on the list report
Add field name and filter option texts to the i18n file
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:

In the webapp folder, create a new subfolder called ext.
In the folder ext, create a new subfolder called fragment.
In the fragment folder, create file Custom.Filter.fragment.xml.
In the controller folder, create file Custom.Filter.controller.js.

Define the fragment by adding ControlConfiguration to the smart filter bar. The options for the ComboBox are shown in the following snippet:

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>

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"));
						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.

Figure 1: List Report: Field And Filter Added