SAP Fiori 2.0 for SAP HCM – How to extend “My Profile” app – new section

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

This is a continuation to my previous blog on SAP Fiori “My Profile” app extension.

I would like to consider following scenario:

• Scenarios 1: Add new custom section contains agreement data.

Please make sure that you implement all sap notes before you start to extend application.

Important:

2680652 – My Profile (SAP Fiori 2.0) (UI): Positive flextime balances are not displayed and customer-specific areas are not visible

Backend – OData :

Go to SEGW -> select ZHCMFAB_MYPROFILE project -> Data Model -> Entity Types and create new type.

In my case I added 3 additional fields: hire date, agreement type and date of end of agreement.

Create EntitySet.

In Entity Type “EmployeeDetail” add new Navigation Properties as below.

Go to ZCL_ZHCMFAB_MYPROFILE_DPC_EXT class.

Go to SE80.

Reimplement method: /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITYSET

METHOD /iwbep/if_mgw_appl_srv_runtime~get_entityset.
    DATA lv_entityset_name TYPE string.
    DATA adddata_get_entity TYPE zcl_zhcmfab_myprofile_mpc=>tt_additionaldata.

    lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

    CASE lv_entityset_name.
      WHEN 'AddDataSet'.
        adddataset_get_entityset(
          EXPORTING
            iv_entity_name               = iv_entity_name
            iv_entity_set_name           = iv_entity_set_name
            iv_source_name               = iv_source_name
            it_filter_select_options     = it_filter_select_options
            is_paging                    = is_paging
            it_key_tab                   = it_key_tab
            it_navigation_path           = it_navigation_path
            it_order                     = it_order
            iv_filter_string             = iv_filter_string
            iv_search_string             = iv_search_string
            io_tech_request_context      = io_tech_request_context
          IMPORTING
            et_entityset                 = adddata_get_entity
            es_response_context          = es_response_context    " Feed request response information (EntitySet)
        ).
*          CATCH /iwbep/cx_mgw_busi_exception.    "
*          CATCH /iwbep/cx_mgw_tech_exception.    "
        copy_data_to_ref(
       EXPORTING
         is_data = adddata_get_entity
       CHANGING
         cr_data = er_entityset
     ).
      WHEN OTHERS.
        TRY.
            CALL METHOD super->/iwbep/if_mgw_appl_srv_runtime~get_entityset
              EXPORTING
                iv_entity_name           = iv_entity_name
                iv_entity_set_name       = iv_entity_set_name
                iv_source_name           = iv_source_name
                it_filter_select_options = it_filter_select_options
                it_order                 = it_order
                is_paging                = is_paging
                it_navigation_path       = it_navigation_path
                it_key_tab               = it_key_tab
                iv_filter_string         = iv_filter_string
                iv_search_string         = iv_search_string
                io_tech_request_context  = io_tech_request_context
              IMPORTING
                er_entityset             = er_entityset
                es_response_context      = es_response_context.
          CATCH /iwbep/cx_mgw_busi_exception .
          CATCH /iwbep/cx_mgw_tech_exception .
        ENDTRY.
    ENDCASE.
  ENDMETHOD.

Create method ADDDATASET_GET_ENTITYSET.

Frontend – SAP Fiori app:

Go to Web IDE -> Select application HCMFAB_PRFL_MONExtension

Create 3 files in customerBlocks folder.

AdditonalBlock.js

sap.ui.define(["sap/uxap/BlockBase"], function(B) {
	"use strict";
	return B.extend("hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlock", {
		metadata: {
			views: {
				Collapsed: {
					viewName: "hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlock",
					type: "XML"
				},
				Expanded: {
					viewName: "hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlock",
					type: "XML"
				}
			},
			events: {}
		}
	});
});

AdditionalBlock.view.xml

<mvc:View controllerName="hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlockController" xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:form="sap.ui.layout.form" xmlns:l="sap.ui.layout">
	<l:Grid id="addDataContainer" content="{ path: 'toAdditionalData', templateShareable: false }" containerQuery="false" hSpacing="0"
		defaultSpan="L12 M12 S12" visible="true">
		<l:content>
			<VBox renderType="Bare">
				<form:SimpleForm id="AdditionalData2Form" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" emptySpanXL="0"
					columnsXL="3" labelSpanL="12" emptySpanL="0" columnsL="3" labelSpanM="12" emptySpanM="0" columnsM="2" labelSpanS="12" emptySpanS="0"
					adjustLabelSpan="false" singleContainerFullSize="false">
					<form:content>
						<Label text="{i18n>hiredate}" id="hiredatel" labelFor="hiredate" visible="true"/>
						<Text id="hiredate" text="{HireDate}" visible="true"/>
						<Label text="{i18n>agreementtype}" id="agreementtypel" labelFor="agreementtype" visible="true"/>
						<Text id="agreementtype" text="{AgreementType}" visible="true"/>
						<Label text="{i18n>enddate}" id="enddatel" labelFor="enddate" visible="{= ${EndDate} === 'true'}"/>
						<Text id="enddate" text="{EndDate}" visible="{= ${EndDate} === 'true'}"/>
					</form:content>
				</form:SimpleForm>
			</VBox>
		</l:content>
	</l:Grid>
</mvc:View>

AdditionalBlockController.controller.js

sap.ui.define([
	"hcm/fab/myprofile/controller/BaseController",
	"hcm/fab/myprofile/utils/reuseHandler",
	"hcm/fab/myprofile/utils/formatter"
], function(B, r, f) {
	"use strict";
	return B.extend("hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlockController", {
		onInit: function() {
			this.oApplicationController = r.getOwnerComponent().getModel("appProperties").getProperty("/applicationController");
			this.oODataModel = r.getOwnerComponent().getModel();
		}
	});
});

Go to Extension Panel.

Select extensionProfileSections and click button “Extend” -> “Extend view/fragment”.

<mvc:View controllerName="hcm.fab.myprofile.HCMFAB_PRFL_MONExtension.customerBlocks.AdditionalBlockController" xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:form="sap.ui.layout.form" xmlns:l="sap.ui.layout">
	<l:Grid id="addDataContainer" content="{ path: 'toAdditionalData', templateShareable: false }" containerQuery="false" hSpacing="0"
		defaultSpan="L12 M12 S12" visible="true">
		<l:content>
			<VBox renderType="Bare">
				<form:SimpleForm id="AdditionalData2Form" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" emptySpanXL="0"
					columnsXL="3" labelSpanL="12" emptySpanL="0" columnsL="3" labelSpanM="12" emptySpanM="0" columnsM="2" labelSpanS="12" emptySpanS="0"
					adjustLabelSpan="false" singleContainerFullSize="false">
					<form:content>
						<Label text="{i18n>hiredate}" id="hiredatel" labelFor="hiredate" visible="true"/>
						<Text id="hiredate" text="{HireDate}" visible="true"/>
						<Label text="{i18n>agreementtype}" id="agreementtypel" labelFor="agreementtype" visible="true"/>
						<Text id="agreementtype" text="{AgreementType}" visible="true"/>
						<Label text="{i18n>enddate}" id="enddatel" labelFor="enddate" visible="{= ${EndDate} === 'true'}"/>
						<Text id="enddate" text="{EndDate}" visible="{= ${EndDate} === 'true'}"/>
					</form:content>
				</form:SimpleForm>
			</VBox>
		</l:content>
	</l:Grid>
</mvc:View>

Add custom texts and translaction in i18n:

Result:

In my blog you could learrn how to extend both parts: Frontend (SAP UI5) and Backend (OData) on the example of “My Profile” app.

I am looking for your feedback through comments and I hope you enjoyed this blog.