Fiori Element Extensions/Breakouts and few Gimmicks- Part 1

[vishnucta]

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

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

 

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 🙂