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

[former_member528257]

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

 

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.