Skip to Content
Technical Articles

Create Custom Filter using custom code in fiori element

In this blog Post we will look into the details of adding a Custom Filter. Custom filters could be added in various scenarios.this code is for Custom Filter using custom code in fiori element.

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 into your SAP Web IDE full stack.

 

Picture show the view of custom filter bar :

 

Our goal is to create custom filter bar by using custom code in following scenario I write the code for static by using json model and dynamic by using odata model .

  • we use following file for that modified code in all this files :
  1. ListReport.js
  2. customfilter.fragment.xml
  3. manifest.json

 

  • In ListReport.js File We Write the code :
sap.ui.define(["sap/ui/model/json/JSONModel","/lib/ExtensionControllerUtils"], function (JSONModel, ExtensionControllerUtils) {onBeforeRebindTableExtension: function (oEvent) {var aAllFilters = [];var aFilterProps = [];aFilterProps["Value"] = "Value";aFilterProps["Value"] = "Value";aFilterProps["Value"] = "Value";aFilterProps["Value"] = "Value";aFilterProps["Value"] = "Value";aFilterProps["Value"] = "Value";ExtensionControllerUtils.processGlobalSearchMobile(this, oEvent, "globalSearch", aAllFilters, aFilterProps);ExtensionControllerUtils.processCustomField(this, "listProjects", "Value 1", aAllFilters);ExtensionControllerUtils.processCustomField(this, "listProjects1", "Value 2", aAllFilters);ExtensionControllerUtils.processCustomField(this, "listProjects2", "Value 3", aAllFilters);ExtensionControllerUtils.appendStandardFilters(aAllFilters, oEvent);ExtensionControllerUtils.bindFilters(aAllFilters, oEvent);var status = [{StatusName: "Value"}, {StatusName: "Value"}, {StatusName: "Value"{StatusName: "Value"}, {StatusName: "Value"}];var jsonmodel = new sap.ui.model.json.JSONModel(status);this.getView().setModel(jsonmodel, "jsonmodel");///////// static data /////////ExtensionControllerUtils.bindValueList(this,"listProjects","/value","Value", {iLength: 1000});///////// static data end ////////////////// dynamic data /////////ExtensionControllerUtils.bindValueList(this,"listProjects2","jsonmodel>/","jsonmodel>StatusName", {iLength: 1000});///////// dynamic data end/////////},}handleSelectionFinish: function (oEvent) {this.extensionAPI.rebindTable();},handleSearch: function (oEvent) {this.extensionAPI.rebindTable();},getCustomAppStateDataExtension: function (oCustomData) {var oSearchField = this.byId("globalSearch");if (oSearchField)oCustomData.globalSearch = oSearchField.getValue();ExtensionControllerUtils.storeCustomField(this, "globalSearch", oCustomData);ExtensionControllerUtils.storeCustomField(this, "listProjects", oCustomData);ExtensionControllerUtils.storeCustomField(this, "listProjects1", oCustomData);ExtensionControllerUtils.storeCustomField(this, "listProjects2", oCustomData);},restoreCustomAppStateDataExtension: function (oCustomData) {var oSearchField;if (oCustomData.globalSearch !== undefined) {oSearchField = this.byId("globalSearch");if (oSearchField)oSearchField.setValue(oCustomData.globalSearch);}ExtensionControllerUtils.restoreCustomField(this, "globalSearch", oCustomData);ExtensionControllerUtils.restoreCustomField(this, "listProjects", oCustomData);ExtensionControllerUtils.restoreCustomField(this, "listProjects1", oCustomData);ExtensionControllerUtils.restoreCustomField(this, "listProjects2", oCustomData);}
  • In customfilter.fragment.xml File We Write the code :

 

<core:FragmentDefinition xmlns="sap.m" xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" xmlns:core="sap.ui.core"><smartfilterbar:ControlConfiguration key="globalSearch" index="1" label="{i18n>Search}" groupId="_BASIC"><smartfilterbar:customControl><SearchField id="globalSearch" search="handleSearch"/></smartfilterbar:customControl></smartfilterbar:ControlConfiguration><smartfilterbar:ControlConfiguration key="listProjects" index="2" label="{i18n>Travel Type}" groupId="_BASIC" ><smartfilterbar:customControl><MultiComboBoxid="listProjects"selectionFinish="handleSelectionFinish"></MultiComboBox></smartfilterbar:customControl></smartfilterbar:ControlConfiguration><smartfilterbar:ControlConfiguration key="listProjects1" index="3" label="{i18n>Destination Type }" groupId="_BASIC"><smartfilterbar:customControl><MultiComboBoxid="listProjects1"selectionFinish="handleSelectionFinish"></MultiComboBox></smartfilterbar:customControl></smartfilterbar:ControlConfiguration><smartfilterbar:ControlConfiguration key="listProjects2" index="4" label="{i18n>Request Status}" groupId="_BASIC"><smartfilterbar:customControl><MultiComboBoxid="listProjects2"selectionFinish="handleSelectionFinish"></MultiComboBox></smartfilterbar:customControl></smartfilterbar:ControlConfiguration></core:FragmentDefinition>

 

  • In manifest.json File Write the Code :
  • Notice the following section in the manifest where the new added fragment and controller files are added to the extensions object.
"extends": {"extensions": {"sap.ui.viewExtensions": {"sap.suite.ui.generic.template.ListReport.view.ListReport": {"SmartFilterBarControlConfigurationExtension|EntityName": {"className": "sap.ui.core.Fragment","fragmentName": ".ext.fragment.Customfilter","type": "XML"}}},}}

Hope it’s useful!!

Thank you 🙂

Be the first to leave a comment
You must be Logged on to comment or reply to a post.