Skip to Content
Technical Articles
Author's profile photo Prasita Prabhakaran

SAP Fiori Elements Overview Pages – Create Custom Filter using Web IDE Plugin

Custom extensions have been an integral part of Fiori Elements Overview pages starting SAPUI5 version 1.48, with the SAP Web IDE version 180927 or higher the extensions can also be created using the Overview Page plugin.

Let us take a look a the details. As a prerequisite import this project into your SAP Web IDE full stack.

In this blog we will look into the details of adding a Custom Filter. Custom filters could be added in various scenarios Eg: where the filter value is not part of the GlobalFilterEntityType or its navigation entities, or the corresponding UI element used is not part of the supported list from Smart Filter Bar.

  • Step 1: Right click on the project and select New–>Extension
  • Select the Overview Page Extension and click Next
  • Select the Custom Filter and click Next. Notice the part highlighted in the yellow box in the screenshot below. It shows the files that are generated when you click finish on this wizard. 
  • Click Finish on the Next Step
  • Notice the following section in the manifest where the new added fragment and controller files are added to the extensions object.
  • CustomFilter.fragment.xml and the custom.controller.js, created with the ext folder in webapp of the project are the files that we are interested in
  • Let us have a look at the files in detail. customFilter.fragment.xml has a sample code which we can make use of for this sample. Uncomment the section below <!– Example – Sales Order ID Filter –>, as we have SalesOrderID in the metadata used in this sample. With the property visibleInAdvancedArea set to true, you will already see it in the filter bar when you run the app with mockdata, as shown below
    <smartfilterbar:ControlConfiguration groupId="GlobalFilters" key="SalesOrderID"
                                             label="Sales Order ID (Extension)"
                <Input id="SalesOrderID" type="Text"/>

  • Next we will look at the parts in the custom.controller.js that need to be adapted further for this new fitler to work. getCustomFilters() is the function that needs our attention.Define getCustomFilters() to return a filter object. Here too we have a sample code that needs further adjustment as follows:
    		getCustomFilters: function () {
    		    var oValue2 = this.oView.byId("SalesOrderID").getValue();
    		    var aFilters = [], oFilter2;
    		    if (oValue2) {
    		        oFilter2 = new Filter({
    		            path: "SalesOrderID",
    		            operator: "EQ",
    		            value1: oValue2
    		    if (aFilters && aFilters.length > 0) {
    		        return (new Filter(aFilters, true));
  • With this our custom filter is ready to be used. You can enter the value “0500000001” in the Sales Order ID (Extension) field and see filtered data in the cards as follows:
  • But that’s not enough, since this is a custom filter the app developers need to take care of saving the app state while navigating away from the OVP and to restore on coming back.Define getCustomAppStateDataExtension(oCustomData) to store the application state.
    		getCustomAppStateDataExtension: function (oCustomData) {
                var oCustomField2 = this.oView.byId("SalesOrderID");
                if (oCustomField2) {
                    oCustomData.SalesOrderID = oCustomField2.getValue();
                return oCustomData;
  • Define restoreCustomAppStateDataExtension(oCustomData) to restore the application state.
    		restoreCustomAppStateDataExtension: function (oCustomData) {
    			var oCustomField2 = this.oView.byId("SalesOrderID");
                if (oCustomData) {
                    if (oCustomData.SalesOrderID) {

With that you are all set to use the custom filter in your application.

You will also notice that there are few other functions in the cusom.controller.js, let us now see what those are for?

If you right click on the project and select New–>Extensions now you will see that only 2 options are allowed as shown below.

The reason being any further filters that are to be added will be done via the same fragment and the getCustomFilters already generated. Also for other extensions like “Custom Navigation Parameters”  “Custom Navigation Target”, “Modify startup extension”, the same custom.controller.js will be used. This will be discussed in detail in “Other Custom Extensions” blog.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Pawan Kalyan K
      Pawan Kalyan K

      Thanks for nice Blog... Very Useful...

      Author's profile photo Ranjithkumar Ayyavu
      Ranjithkumar Ayyavu

      Hi Prasita,

      I have followed the above block to add a custom filter in my app. but i'm not getting the smartFilters text boxes in the SmartFilter sections. Could please help to fix it.


      	"extends": {
      			"extensions": {
      				"sap.ui.controllerExtensions": {
      					"": {
      						"controllerName": "zzz.ovpdemodw.ext.custom"
      				"sap.ui.viewExtensions": {
      					"": {
      						"SmartFilterBarControlConfigurationExtension|GlobalFilters": {
      							"className": "sap.ui.core.Fragment",
      							"fragmentName": "zzz.ovpdemodw.ext.customFilter",
      							"type": "XML"
      	"sap.ovp": {
      		"globalFilterModel": "ovpdemo",
      		"globalFilterEntityType": "GlobalFilters",
      		"containerLayout": "resizable",
      		"enableLiveFilter": true,
      		"considerAnalyticalParameters": false,
      		"cards": {}}
      Fragment.xml : 
      <core:FragmentDefinition xmlns="sap.m" xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" xmlns:core="sap.ui.core">
      	<!-- Example - Product ID Filter -->
      	<!--<smartfilterbar:ControlConfiguration groupId="GlobalFilters" key="ProductID"
                                               label="Product ID (Extension)"
                  <Input id="ProductID" type="Text"/>
      	<!-- Example - Sales Order ID Filter -->
      	<smartfilterbar:ControlConfiguration groupId="GlobalFilters" key="SalesOrderID"
                                               label="Sales Order ID (Extension)"
                  <Input id="SalesOrderID" type="Text"/>
      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Are these the only filter fields you would expect to be added in the Smart filter bar? Do you also have other fields added to it using the UI.SelectionFields annotations?

      Author's profile photo Ranjithkumar Ayyavu
      Ranjithkumar Ayyavu

      Yes. I'm expecting only the custom filter fields. i haven't add any other filter fields using UI.SelectionFields Annotations.

      Author's profile photo Agustín Renatto Rodas Linares
      Agustín Renatto Rodas Linares

      I have the same problem, the filters are blank.

      Author's profile photo Abhishek Nayak
      Abhishek Nayak

      Hello Prasita,


      I have created OVP application using CDS , now I have added parameter to CDS , that parameter needs to be passed in WHERE clause. Is it possible to some how map this custom filter parameter with underlying CDS parameter ??

      Also I tried replicating the things which are mentioned in below documentation ,but I am encountering some issues.

      Can you please once check below thread once, I have mentioned it in details.


      Author's profile photo Vishnu Sindhe
      Vishnu Sindhe

      Hi Prasita Prabhakaran,

      i am using Custom MultiInput in my app, but while select/deselect token $batch is not firing can u please help on this

      <smartfilterbar:ControlConfiguration key="distributor" index="6" label="Distributor" groupId="_BASIC" visibleInAdvancedArea="true">
      <MultiInput id="inputCustomerF4" maxLength="10" valueHelpRequest="CustomerF4" showTableSuggestionValueHelp="true" showSuggestion="true"
      filterSuggests="false" suggest="handleCustomerSuggest" suggestionItemSelected="suggestionItemSelectedCustomerF4" tokenUpdate="ontokenChange"
      suggestionItems="{Customers>/}" maxSuggestionWidth="25%" change="onChangeCustomer">
      <core:ListItem text="{Customers>Name}" additionalText=" {Customers>CustomerNo}"/>

      above is xml code ontokenChange $batch was not triggering, can u please give me suggestions