SAP Fiori 2.0 for SAP HCM - How to extend "My Profile" app using SAP Web IDE

[former_member528257]

In this post I will show you step-by-step how to extend standard SAP Fiori application on example My Profile.

 

Run SAP Web IDE. In my case it is Personal Edition.

Go to Workspace -> New -> Extension Project



Select Application -> SAPUI5 ABAP Repository



Select System from list (configuration is done in folder /config_master/service.destinations/destinations/) and application to extend:







To start application you have to add following code to Component.js.

(function() {

 jQuery.sap.registerModulePath("hcm.fab.lib.common", "/sap/bc/ui5_ui5/sap/hcmfab_common/");

 }());

By default application "My Profile" looks like below:





 

I would like to consider two scenarios:

• Scenarios 1: Hide fields from section Personal Data subsection Marital Status field Number of Children from Personal Data section.


• Scenarios 2: Add new fields to existing section Personal Data.

 

Scenarios 1: Hide fields from section Personal Data subsection Marital Status field Number of Children from Personal Data section

I want to hide field “Number of Children” from Personal Data section.

Go to Tools -> Extensibility Panel



Select View to extend, in my case “PersInfoPersonalDataBlock”. Click button “Extend” -> Replace with a copy of the original view.



Comment or remove section to hide.



Result you can see below.



 

Scenarios 2: Add new fields to existing section Personal Data

Add base salary for Personal Data section

First of all create oData (based on HCMFAB_MYPROFILE).

Goto tcode SEGW and create new oData (in my case ZHCMFAB_MYPROFILE).



Redefine standard oData HCMFAB_MYPROFILE and go throw wizard.



Add custom field to HCMFAB_S_PERS_PERSONALDATA structure.





Import new field in SEGW to my oData.







Change oData in SAP Fiori app. Goto New -> Extension.







Add following code to Component.js.

this.hcm.fab.myprofile.Component.extend("hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.Component", {

	metadata: {

		manifest: "json",

		config: {

			"sap.ca.serviceConfigs": [{

				"name": "ZHCMFAB_MYPROFILE2_SRV",

				"serviceUrl": "/sap/opu/odata/sap/ZHCMFAB_MYPROFILE_SRV;mo/",

				"isDefault": true,

				"mockedDataSource": "./model/metadata.xml"

			}]

		}

	}

});

Extend view controller – PersInfoPersonalDataBlockController and add new field.





Result:



 

Hope you enjoyed this blog.