Technical Articles
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.
Thanks for nice Blog... Very Useful...
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.
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?
Yes. I'm expecting only the custom filter fields. i haven't add any other filter fields using UI.SelectionFields Annotations.
I have the same problem, the filters are blank.
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.
https://sapui5.hana.ondemand.com/#/topic/b40e5ae5cdd647c490bd03b9d5f98d56
Can you please once check below thread once, I have mentioned it in details.
https://answers.sap.com/questions/12891198/ovp-application-using-cds-view-with-parameters.html
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">
<smartfilterbar:customControl>
<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">
<suggestionItems>
<core:ListItem text="{Customers>Name}" additionalText=" {Customers>CustomerNo}"/>
</suggestionItems>
</MultiInput>
</smartfilterbar:customControl>
</smartfilterbar:ControlConfiguration>
above is xml code ontokenChange $batch was not triggering, can u please give me suggestions