Skip to Content
Technical Articles

Fiori Element Extensions/Breakouts and few Gimmicks- Part 1

Hi Folks,

I have been doing a bunch of development in and around Fiori Elements and  i felt like there a few documents (at least for me 🙂 ) in the community on how to customize , extend the Fiori App generated from List Report template. In real life Customers/User will never be happy with generated UX and there features.

I am trying to cover most of the scenarios in these Blog Series..So that people can have a one stop solution to start breaking things out.


Having said that, i dont want to reinvent the wheel explaining how to develop “Fiori Element-List Report”. We have lots of very good blogs available to refer and my personal choice would be


I Would like to cover following in this blog

  1. Few things i achieved using Custom Column,Filter and Action
  2. Enabling Export option via Controller and add Extra columns in Export
  3. Key Value on Value Help using Annotation
  4. Point to take care while adding a formatter file.


So Lets start one by one.


It easy via Web IDE Full stack or via Personal Edition(Make sure you have downloaded the 2018 Last quarter updates)


After completing the above wizard successfully who will end up making changes in manifest.json and apart from that few folders will be created.

"extends": {
			"extensions": {
				"sap.ui.controllerExtensions": {
					"sap.suite.ui.generic.template.ListReport.view.ListReport": {
						"controllerName": "<namespace>.ext.controller.ListReportExt",
						"": {
							"ZTEST_INFO": {
								"EntitySet": "ZTEST_INFO",
								"Actions": {
									"TestAction": {
										"id": "ActionBtn",
										"text": "{@i18n>TestAction}",
										"press": "onClickDisplayDocument"
					"sap.ui.viewExtensions": {
					"sap.suite.ui.generic.template.ListReport.view.ListReport": {
						"SmartFilterBarControlConfigurationExtension|ZTEST_INFO": {
							"className": "sap.ui.core.Fragment",
							"fragmentName": "<namespace>.ext.fragment.CustomFilter",
							"type": "XML"
						"GridTableColumnsExtension|ZTEST_INFO": {
							"className": "sap.ui.core.Fragment",
							"fragmentName": "<namespace>.ext.fragment.CustomColumn",
							"type": "XML"


Lets take an example of how we can achieve new filter in Filter bar of a List Report.

“CustomFilter” fragment file should have below snippet to start within wherein you can add more and more filters. Lets not be greedy 🙂 , right now i will add just one .


	  <core:FragmentDefinition xmlns="sap.m" xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" xmlns:core="sap.ui.core">
	<!-- My Custom Filter-->
	<smartfilterbar:ControlConfiguration key="CustomIndicator1042Filter" index="30"
		label="{i18n|sap.suite.ui.generic.template.ListReport|ZTEST_INFO>Indicator1042Filter}" id="CustomVH1042Indicator">
			<ComboBox id="CustomIndicator1042Filter-combobox" selectedKey="0" selectionChange="on1024FilterSelection">
				<core:Item id="CustomIndicator1042FilterItem0" key="0"
				<core:Item id="CustomIndicator1042FilterItem1" key="1"
				<core:Item id="CustomIndicator1042FilterItem2" key="2"


And we are not done yet.We have a controller file left “ListReportExt”.

We have a standard hook after extending the List Report and we can write rest of our logic within that hook.

onBeforeRebindTableExtension: function(oEvent) {
//Filter Logic


Dont worry !!! I am gonna give you  a sample logic to try out too..


onBeforeRebindTableExtension: function(oEvent) {
	var smartTable = oEvent.getSource();
	var oTable = smartTable.getTable();
	//Read $fiter params to pass selected value in custom filter
	var oBindingParams = oEvent.getParameter("bindingParams");
	oBindingParams.parameters = oBindingParams.parameters || {};
	var oSmartFilterBar = this.byId(oSmartTable.getSmartFilterId());
	var vCategory;
	if (oSmartFilterBar instanceof sap.ui.comp.smartfilterbar.SmartFilterBar) {
		//Custom Indicator1042 filter
		var oCustomControl = oSmartFilterBar.getControlByKey("CustomIndicator1042Filter");
		if (oCustomControl instanceof sap.m.ComboBox) {
			vCategory = oCustomControl.getSelectedKey();
			switch (vCategory) {
				case "1":
					oBindingParams.filters.push(new sap.ui.model.Filter("Indicator1042", "EQ", "Yes"));
				case "2":
					oBindingParams.filters.push(new sap.ui.model.Filter("Indicator1042", "EQ", "No"));



OK..Finally our first job is done!!!!!! You wanna see the result..? Here it is…


So what if , you want a Filter which populates values from back-end??? It’s simple.. Just customize your “smartfilterbar” in the fragment.


Point to be noted!!! Below mentioned Entity for MultiComboBox is not part of CDS Source, this is the one we added manually from gateway builder.

	<MultiComboBox id="combobox" items="{ path: '/EntitySet', sorter: { path: 'SortProperty' } }"
		<core:Item key="{key}" text="{Value}-{Text}"/>


Then still i have no plans to leave Filter alone.. I going to make it to a “MultiComboBox” So that we can select multiple values in the Dropdown.


Above snippet actually shows how to add MultiComboBox to the Filter Fragment.


Lets take a break and do some ABAP Coding. 🙂 … Why ??? because Lets say if i have exposed a parameter

@Consumption:{valueHelp: '_assoc'}
key propertyname,

in Consumption view as Filter/Value Help and i need that to be Multi-Select.

But before logging into your AS ABAP  Server, if you are not familiar with

you should definitely go ahead and try that..  SAP help document is very handy too.


Enough reading , lets go do some coding..!!!


Just straight away go and redefine method define in MPT_EXT.

*** Call Super Method
    super->define( ).

*** Local Data Declaration
    DATA lo_entity_type   TYPE REF TO /iwbep/if_mgw_odata_entity_typ.
    DATA lo_property      TYPE REF TO /iwbep/if_mgw_odata_property.

*** Set the drop-down annotations for property ekorg of entity:
    lo_entity_type = model->get_entity_type( 'ZTEST_INFOType' ).
    IF lo_entity_type IS NOT INITIAL.
      "Set ekorg as fixed-value list:
      lo_property = lo_entity_type->get_property( iv_property_name = 'propertyname' ).
      IF lo_property IS NOT INITIAL.
            iv_value_list_type = /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values


And the output is….


We have an annotation

@Consumption.filter.defaultValue: '111'

that will default a value for any filter that you want.


Wheww..!!!!! I have tried my best to cover everything i came across while playing with Fiori Element Filters…. If something comes up , i will definitely update in the above section…

We have lot to cover… Columns ,Actions, then below few topics.


  1. Enabling Export option via Controller and add Extra columns in Export
  2. Key Value on Value Help using Annotation
  3. Point to take care while adding a formatter file.


Don’t you think, this blog will be little bit lengthy if i continue explaining everything right here??? Lets split into Multiple series of Blog..


NB: If anybody thinks that few sections are duplicates of some other Blog, do let me know.


Thanks and Regards,

Vishnu P

Happy Coding 🙂


You must be Logged on to comment or reply to a post.
  • Thanks Vishnu, Few good points on UI extension as we have limited ext options in Fiori smart templates.

    But I would rather avoid so much code in UI5 and OData for enabling multi combo box, which can be achieved via CDS annotation.

    Yes, for non S/4 systems, your blog works great .


  • Hi Vishnu,

    Thanks for sharing this, working with Fiori Elements can be frustrating. The documentation is getting better and better but it's still quite difficult to bring all the pieces together.



  • Hi Vishnu,

    Nice blog, you can also add the details on how to implement the variant save and fetch for the added custom fields as it is a question that has been asked many times in the community(If i remember correctly).



  • Hi Gaurav,


    Nice blog.  Is there a way to change the call that is made when you click on the Go button?  E.g. I want to call about CDS view or service dynamically based on the filters?  Basically, I am trying to have a detailed view of a table when one of the filter dropdown is selected. I want another option to have the summarized view of the table to be shown.  I am trying to do this without having to use the service builder to do the custom DPC logic if not needed.

    I have a sales order CDS view with line item, delivery info, etc.  But I also want to be able to just show sales order with line time - and delivery information summarized to the line item level.




  • Hello Vishnu,


    To enhance filter bar, instead of defining fixed values i am pulling them from backend.


    The problem is that now the main entity is not being called when hitting Go button, as it has been replaced by the entity used in the filter enhancement.


    Do you know how can i solve this issue, please?