Skip to Content
Author's profile photo Mateusz Jarmuzek

SAP Fiori 2.0 for SAP HCM – How to extend “My Profile” app using SAP Web IDE

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.

 

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Damian Collado Rodriguez
      Damian Collado Rodriguez

      2 years since last post about HCM fiori apps. Great to see some love.

      Good job btw.

      Author's profile photo Christopher Solomon
      Christopher Solomon

      Nice write up. Reminds me yet again how many steps are involved to do somethings that should be so simple. haha

      Author's profile photo Prakash Singh Gariya
      Prakash Singh Gariya

      Great blog.
      Very hepful.

      Looking forward to more such posts.
      Thanks man.

      Author's profile photo Patrick Dean
      Patrick Dean

      Thanks for the thorough write-up! 😀

      Author's profile photo Kadiravan Bakthavachalam
      Kadiravan Bakthavachalam

      Really Nice one.

      Author's profile photo Marcin Czarny
      Marcin Czarny

      Hi, nice blog, very helpful!

      Could you clarify how to deploy this extension on SAPUI5 ABAP Repository?

       

      Best regards,
      Marcin