Skip to Content
Technical Articles
Author's profile photo Vishnu Pankajakshan Panicker

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

https://blogs.sap.com/2016/11/16/fiori-elements-how-to-develop-a-list-report-basic-approach/

 

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.

Filters:

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",
						"sap.ui.generic.app": {
							"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">
		<smartfilterbar:customControl>
			<ComboBox id="CustomIndicator1042Filter-combobox" selectedKey="0" selectionChange="on1024FilterSelection">
				<core:Item id="CustomIndicator1042FilterItem0" key="0"
					text="{i18n|sap.suite.ui.generic.template.ListReport|ZTEST_INFO>all}"/>
				<core:Item id="CustomIndicator1042FilterItem1" key="1"
					text="{i18n|sap.suite.ui.generic.template.ListReport|ZTEST_INFO>yes}"/>
				<core:Item id="CustomIndicator1042FilterItem2" key="2"
					text="{i18n|sap.suite.ui.generic.template.ListReport|ZTEST_INFO>no}"/>
			</ComboBox>
		</smartfilterbar:customControl>
	</smartfilterbar:ControlConfiguration>
</core:FragmentDefinition>

 

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"));
					break;
				case "2":
					oBindingParams.filters.push(new sap.ui.model.Filter("Indicator1042", "EQ", "No"));
					break;
				default:
					break;
			}
		}
	}

}

 

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.

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

 

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

https://blogs.sap.com/2016/06/01/odata-service-development-with-sap-gateway-using-cds-via-referenced-data-sources/

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

https://help.sap.com/doc/saphelp_nw75/7.5.5/en-US/d0/d28697a5804135afa8d188c91dae83/content.htm?no_cache=true

 

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.
        lo_property->set_value_list(
            iv_value_list_type = /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values
        ).
      ENDIF.




    ENDIF.

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 🙂

 

Assigned tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      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.

      https://blogs.sap.com/2018/11/16/dropdown-list-in-fiori-elements/

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

      Regards,
      Tejas

      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker
      Blog Post Author

      Hi Tejas

      I really appreciate your feedback  Thanks for the input.

      Thanks and Regards

      Vishnu P

      Author's profile photo Pierre Dominique
      Pierre Dominique

      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.

      Cheers,

      Pierre

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      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).

      BR,

      Mahesh

      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker
      Blog Post Author

      Hi Mahesh,

      We can attach an attachBeforeExport event handler and write few logic to append the newly created columns to $select Query Parameter.

      onBeforeExport: function(oEvent) {
          var exportSettings = oEvent.getParameters("exportSettings");
          var dataSource = exportSettings.exportSettings.dataSource;
          var selectUrl = dataSource.dataUrl;
      			
      ........
      ........
      
      }
      
      

      I was planning to cover this in upcoming series under column extension.

       

      Thanks and Regards,

      Vishnu P

       

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      Hi  Vishnu Pankajakshan Panicker,

      Great!!. Actually I didn't phrase my comment properly.. I mean to say "variant management for Custom Selection fields (Filters)".

      BR,

      Mahesh

      Author's profile photo Gaurav Sardana
      Gaurav Sardana

      Hi Mahesh,

       

      Were you able to save custom filters in Variant ? I got stuck at this point..could you please help.

       

      With gratitude

       

      Gaurav

       

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      you need to use appstate functions. Check the below blog, which was doing this using OVP, but same applies incase of listreport as well.

      https://blogs.sap.com/2018/10/11/overview-page-ovp-developer-extension/#

      Author's profile photo Gaurav Sardana
      Gaurav Sardana

      Hello Mahesh,

      Thank you so much for helping on variant save functionality. That is working as expected. 🙂

      One issue I am facing in the same is, whenever I am changing the values (basically tokens) of custom filter, variant change/update * is not trigerring. It is not giving me option to update the same variant whenever I am only changing values in my custom filter.. Could you please guide on this one..if you faced such issue ?

      With gratitude,

      Gaurav

      Author's profile photo John Bibal
      John Bibal

      Hi Gaurav,

      This document might help you:
      https://sapui5.hana.ondemand.com/1.71.4/#/topic/7bcdffc056a94731b4341db73251e32b.html

      There's a section there in the FAQ where it mentions the following:

      I have added custom controls to the SmartFilterBar. If I save a view and load it again, the custom fields are initial. What do I have to do to enable custom fields for view management?

       

      Regards,
      John

      Author's profile photo Jay Malla
      Jay Malla

      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.

       

      Thanks,

      Jay

      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      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?

       

      Thanks,

      Javier