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)"
                                           visibleInAdvancedArea="true">
          <smartfilterbar:customControl>
              <Input id="SalesOrderID" type="Text"/>
          </smartfilterbar:customControl>
  </smartfilterbar:ControlConfiguration>

  

• 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
  		        });
  		        aFilters.push(oFilter2);
  		    }
  
  		    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");
              oCustomField2.setValue();
  
              if (oCustomData) {
  
                  if (oCustomData.SalesOrderID) {
                      oCustomField2.setValue(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.