SAP MDG Fiori Extensibility Guide · 2019-11-12 · SAP MDG Fiori Extend SAP MDG Fiori Applications No part of this publication may be reproduced or transmitted in any form or for

SAP MDG Fiori Extend SAP MDG Fiori Applications

SAP MDG Fiori Extensibility Guide

© Copyright 2008 SAP AG. All rights reserved.

SAP MDG Fiori Extend SAP MDG Fiori Applications No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information

contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS,

AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, OpenPower and PowerPC are trademarks or registered

trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United

States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web

Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services

mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in

Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective

companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its

affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable

for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the

express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional

warranty.


Contents

Overview .................................................................................................................................... 4

About This Document ............................................................................................................. 4

Extending SAP MDG Fiori Applications .................................................................................. 4

OData Extensibility for MDG Projects ......................................................................................... 6

Concept .............................................................................................................................. 6

Extension Support for OData on Gateway ........................................................................... 8

Use Cases of oData Extensibility ........................................................................................ 8

UI Extensibility for MDG Fiori Applications ................................................................................16

Concept .............................................................................................................................16

Launchpad extension .........................................................................................................20

UI Extensibility tasks ..........................................................................................................20

Download SAP delivered standard application from ABAP System ....................................21

Create Custom Application that Extends an SAP delivered standard application ...............22

General Guidance when Implementing Extensions in Custom Application .........................22

Define Extensions Metadata ..............................................................................................22

Test Custom Application on Launchpad Sandbox on local tomcat .....................................23

Upload Custom Application to SAPUI5 Repository .............................................................23

Smoke Test Custom Application on ABAP System ............................................................24

Configure custom application on Fiori Launchpad ..............................................................24

Use Cases for UI Extensibility ............................................................................................25

Extension of Business Partner Application ................................................................................29

OData Extensibility ................................................................................................................29

UI Extensibility .......................................................................................................................30

Extension of Supplier Application ..............................................................................................37



Extension of Customer Application ............................................................................................46



Extension of Material Application ..............................................................................................54



SAP MDG Fiori Extend SAP MDG Fiori Applications Extension of Cost Center Application ........................................................................................58



Extension of Profit Center Application .......................................................................................63



Extension of Track My Requests Application ............................................................................67



Additional References ...............................................................................................................79

Overview

About This Document

This document covers the extensibility concept for SAP Fiori MDG applications. The document

contains references to the documentation for extension of other layers.

If the customer wants to change the branding of SAP Fiori application they should use Theme

Designer.

Extending SAP MDG Fiori Applications The functionality of an SAP Fiori application can be enhanced by extending different layers.

You may not need to extend all layers each time you want to enhance an application. The

criterion for determining whether or not a layer needs to be extended is described in the section

below.

Each application type follows a certain architectural approach so the way in which an application

is extended differs.

Content Layer When an Extension is Required Relevance

Business Suite The backend logic and content required for the application enhancement does not exist in the Business Suite

Relevant for Archetype I Extensions in this layer are not covered in this document. There are also no


references in this document.

Gateway The backend logic and content required for the app extension exists in the Business Suite layer but is not exposed in the app's Gateway service.

Relevant for Archetype I Extensions in this layer are not covered in detail in this document. There are references in this document.

UI The backend logic and content required for the app extension exists in the Gateway layer but is not exposed in the app's UI.

Relevant for Archetype I

The tools required to extend each content layer are indicated in the following table

Content Layer ABAP Object Navigator (se80)

ABAP Dictionary (se11)

ABAP Customizing (spro)

HANA Studio

SAP Gateway Service Builder (segw)

Eclipse with ABAP Repository Team Provider

Smart Business Modeler

SAP Business Suite X X

SAP Gateway X X X

UI for Transactional Apps

X

Architecture Overview SAP Fiori apps are built using HTML5 and SAPUI5. For some potentially required extensions

the underlying jQuery JS library can be used. All supported form factors and operating systems

are supported with one development project and a single code line per user interface app.

The SAP Business Suite on HANA system consists of an ABAP engine used for transactional

applications and an XS Engine used for analytical applications running on the same SAP HANA

database instance. The artifacts of the backend applications and the application content are

stored in the SAP HANA database as illustrated in the figure below.

In addition, the UI apps are deployed on a central SAP ABAP NetWeaver server which contains

also the UI Service Add-on for the shell services and the SAP Gateway Add-on for the OData

enablement of the ABAP-based Business Suite system.


SAP ABAP Netweaver

Web Dispatcher

Gateway AddOn

UI Apps UI Services AddOn

SAP Business Suite

ABAP Engine

SAP NW Gateway Backend Enablement

Transactional Apps

SAP HANA

XS Engine

Analytical Apps

Application Artifacts Application Content

Web Clients

(Smartphone / Desktop / Tablet)

R

R R

RTrusted RFC

R

SQL

OData Extensibility for MDG Projects

To achieve modification-free extensibility, use the “Redefine” concept that is available as part of

the SAP NetWeaver Gateway.

Concept

For information on the “Redefine” concept see the following document

https://help.sap.com/saphelp_gateway20sp08/helpdata/en/3d/500cb8468d4534ae4130aecf680dbb/co

ntent.htm

When you have created a custom OData service that redefines an SAP Delivered OData

service, you have a new OData project that redefines the SAP OData delivered standard project

https://help.sap.com/saphelp_gateway20sp08/helpdata/en/3d/500cb8468d4534ae4130aecf680dbb/content.htm



Extend an app's SAP Gateway layer when you need to expose backend logic and content to the

UI layer.

In the SAP Gateway Service Builder (transaction SEGW), redefine the relevant Gateway service

for the app.

To get the name of your BSP application, refer the application-specific documentation.

Refer to SAP Note 1919388 for details on how to extend an OData service.

Do not change the SAP-delivered OData project.Create a new custom OData project on segw

and then use the option “Redefine OData Service (GW)” in the new custom OData project.

http://help.sap.com/saphelp_gateway20sp08/helpdata/en/34/4e3d5269a2b610e10000000a44176d/co

ntent.htm?frameset=/en/3d/500cb8468d4534ae4130aecf680dbb/frameset.htm

Using the approach mentioned above and generating a customer-specific OData project leads

to runtime artifacts where the Customer DPC (Data Provider Class) is a subclass of the SAP

delivered class.

http://help.sap.com/saphelp_gateway20sp08/helpdata/en/34/4e3d5269a2b610e10000000a44176d/content.htm?frameset=/en/3d/500cb8468d4534ae4130aecf680dbb/frameset.htm

http://help.sap.com/saphelp_gateway20sp08/helpdata/en/34/4e3d5269a2b610e10000000a44176d/content.htm?frameset=/en/3d/500cb8468d4534ae4130aecf680dbb/frameset.htm


Customer DPC ClassCustomer DPC Class

SAP Delivered DPC ClassSAP Delivered DPC Class

One can check this by looking into the superclass of the Customer’s DPCs.

So that there are no conflicts between customer and SAP in the names of the OData Properties / Entity Types / Navigation Properties / Associations / Entity Sets / Methods, ensure that you name them in the customer namespace or with specific pre-fixes like Y or Z.

Conflicts may not occur in right away but may happen later if SAP ships new versions.

For additional information on how to develop OData service refer http://scn.sap.com/docs/DOC-

27405

Extension Support for OData Services on SAP Gateway

Extension Possibility How do we enable

Add new fields to an existing entity

Bind DDIC to Entity,

Provide Include Structures

Add new entities No Action Required

Add new navigations No Action Required

Use Cases of oData Extensibility

For all the scenarios the base project is redefined as mentioned in this document:

https://help.sap.com/saphelp_gateway20sp08/helpdata/en/3d/500cb8468d4534ae4130aecf680dbb/co

ntent.htm

Use Case : Add existing MDG entities as entities to the OData service

In this scenario we are adding the Industry as an entity to the MDG_CUSTOMER project after

redefinition.

Execution Steps

Action Details




Execution Steps

Action Details

Create new Extensibility Project

In the backend extensibility test system execute transaction SEGW, this opens the SAP Gateway Service Builder. Click on the Create button and enter the name of extensibility project which you want to create (Example: ZMDG_CUSTOMER_EXT_<Name>’). Save in a local object.

Redefine the OData Service

Right click on data model under the newly created project and choose Redefine. Select OData Service(GW). Enter the valid Technical Service name as MDG_CUSTOMER_SRV and Version 0001. Choose Next. Choose All the Entities/Properties and choose Finish.

Add properties to Search Customer

Action 1: Go to transaction SEGW. Open project MDG_CUSTOMER Entity Search Partner Select and Copy all the properties.

Action 2: Go to the custom project created (For example: ZMDG_CUSTOMER_EXT_<Name>) Entity Search Customer Choose Add Rows (the number of rows added should be same as the number of rows copied) and paste the properties that were copied in previous action.

Add Custom Entity & Property

Action 1: Add custom Entity. Select the Data Model to which the Custom Entity should be added Entity (double click) A pane containing the list of entities is shown on the right Choose Add and enter the name of the new entity along with the Structure. Enter the Entity Set name and save.

Example: For ‘Industry’, enter structure /MDGBP/_S_BP_PP_BP_INDSTR , enter entity set Industries.

Action 2: Add Custom Property. Select the Entity Type (For example, Industry) to which the Custom Property should be added. Right click on ‘Industry’ under the Entity Type. Select Change. On the Right side of page, a pane with entities and their corresponding Properties are displayed. Choose Add and enter the name of the new Property along with Edm.Core .Type and the ABAP field name.

Examples:

For Industry Sector Edm.Core .Type= Edm. String Max.=10 and ABAP field name= BP_INDSCT.

For BusinessPartnerID. Edm.Core .Type = Edm.String. Max.=10 and ABAP field name = ‘BP_HEADER.

For Industry System Edm.Core.Type = Edm.String. Max. = 4 and ABAP field name = BP_INDSYS.


Execution Steps

Action Details

Association and Navigation property

Action 1: Create Association

Right click Associations. In the wizard that opens up, enter the following details and choose Next.

Association Name: BusinessPartner_Industry

Principal Entity

Entity Type Name: Business Partner

Cardinality:1

Dependent Entity

Entity Type Name: Industry

Cardinality:1:N

Navigation Property : Industry

Action 2: Referential Constraints

Enter data as shown below and choose Next.

Principal Entity- BusinessPartner

Principal Key – BusinessPartnerID

Dependent Entity- Industry

Dependent Property- BusinessPartnerID

Action 3: Create Association Set

Enter the data below and choose Ok.

Association Set Name : BusinessPartner_Industry

Principal Entity:

Entity Set Name: BusinessPartners

Dependent Entity:

Entity Set Name: Industries

Generate the OData Project

Choose the Generate button under the SAP Gateway Service Builder In the popup, confirm if the default details for ‘Model and Service Definition’ are correct. Provide your respective Technical Service Name(Example: ZMDG_CUSTOMER_SRV_<Name>) Choose Ok and Save this in a local Package.


Execution Steps

Action Details

Redefine create method of class „ZCL_ ZMDG_CUSTOMER_EXT_<yourUserName>_DPC_EXT“

1. Open transaction SE24. Open class ZCL_ ZMDG_CUSTOMER_EXT_<Name>_DPC_EXT. Go to Change mode and redefine the method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_DEEP_ENTITY

using the button.

2. Check the filter checkbox . This shows only the redefined methods.

3, Open the redefined method created (Double click CREATE_DEEP_ENTITY under the method that was just redefined).

4. Add the following code in the redefined method

Note replace the class name ZCL_ZMDG_CUSTOMER_E_03_mpc with the generated class name in your project.

Replacement code for create deep entity

5. Go to the Types tab and choose the Direct Type Entry button. Add the

following code in the types declaration of public and activate it using button.

Note: replace the class name ZCL_ZMDG_CUSTOMER_E_03_mpc with the generated class name in your project

Replacement code of types public

Register and Test the new OData Project as a new Service.

In UI extensibility system execute transaction /iwfnd/maint_service and choose Add Service. Enter the required details.

System alias of Backend Extensibility System

Technical Service name: User‘s Technical Service name (For example, ZMDG_CUSTOMER_SRV_<Name>).

After pressing Enter, the Technical Service Name and its corresponding details are displayed under the Add Service section.

Choose Technical Service Name, the Service details are displayed in a pop-up. Choose Local Object and press enter. An Information /Success message stating Service ZMDG_CUSTOMER_SRV_<Name> was created and its metadata was loaded sucessfully is displayed.

This registers the OData Project as a Service.


Use Case: Add existing attributes of a MDG entity to the entity of OData service

In this scenario we add the cost center category property to the CostCenter entity. This attribute

is present in the entity.

Execution

Steps

Action Details

Create new

Extensibility

Project

Open the backend extensibility test system.

Execute transaction SEGW. This opens the SAP Gateway Service Builder.

Choose Create. Enter the name of extensibility project that you want to create

(Example: ZMDG_COSTCENTER_EXT_<Name>). Save in a local object.

Redefine the

OData

Service

Right-click on Data model under the newly created project and choose Redefine.

Select OData Service(GW). Enter the valid Technical Service name as

MDG_COSTCENTER_SRV and the Version as 0001. Choose Next. Choose all the

Entities/Properties choose Finish.

Add Custom

Property

Select the Entity Type (Example, CostCenter) to which the Custom Property

should be added. Right-click on Properties under the Entity Type. Select Change.

On the right side of page, a pane with entities and its corresponding properties are

displayed. Choose Add and enter the name of the new property along with

Edm.Core .Type and the ABAP field name.

Example: For CostCenterCategory, Edm.Core .Type = Edm.Int64 and ABAP field

name = KOSAR.

Note: The Cost Center Category is a part of structure /MDG/_S_0G_ES_CCTR

and we do not need to enhance it further.

Generate the

OData

Project

Choose Generate in the SAP Gateway Service Builder. In the popup confirm if

the default details for Model and Service Definition are correct. Provide your

Technical Service Name (For example, ZMDG_COSTCENTER_SRV_<Name>).

Choose Ok and save this in a local Package.

SAP MDG Fiori Extend SAP MDG Fiori Applications Execution

Steps

Action Details

Register and

Test the new

OData

Project as a

new Service.

In the UI extensibility system.

Execute transaction /iwfnd/maint_service and choose Add Service. Enter the

required details:

The system alias of backend extensibility system

The technical service name. In this case, your technical service name (For

example, ZMDG_COSTCENTER_SRV_<Name>).

After choosing Enter, the Technical Service Name and its corresponding details are

displayed under the Add Service section.

Click on Technical Service Name; the Service details are displayed in a Pop-up.

Choose Local Object and press Enter. An information /success message is

displayed stating that the Service ZMDG_COSTCENTER_SRV_<Name> was

created and its metadata was loaded successfully.

This registers the OData Project as a Service.

Use Case: Add new attribute to the MDG entity and the same as property to the entity of

OData service

In this scenario the following steps have been executed to extend the project.

Add a custom attribute to the MDG entity, for example Purchasing Organization.

Step 1: Extending the MDG Data Model

The step is required if the user wants to add fields which are not part of the standard MDG data

model.

Execution

Steps

Action Details

Edit model Execute transaction MDGIMG then select ->Data Modelling->Edit

model->Choose Data model BP->Entity BP_PORG->Attributes. Add

the new attribute. Activate the data model.

Generate and

Activate

Execute transaction MDGIMG then select Data modelling->generate

data model specific structures for BP->Structures


structures

Activate mapping Execute transaction MDGIMG then select Data modelling->generate

data model specific structures for BP->mapping

Extend mappings Execute transaction MDGIMG then select Data modelling->Extend

mappings

Step 2: Extending the standard MDG OData services

Important: Do not alter the existing OData Services. The steps below describe the creation of

projects and OData services.

Execution Steps Action Details

Create new

Extensibility Project

In the backend extensibility test system

Execute transaction SEGW. This opens the SAP Gateway Service Builder.

Choose Create. Enter the name of extensibility project which needs to be

created (For example, ZMDG_SUPPLIER_EXT_<Name>). Save in a local

object.

Redefine the OData

Service

Right click on the Data model under the newly created project and choose

Redefine. Select OData Service (GW). Enter the valid Technical Service Name

as MDG_SUPPLIER_SRV and the Version 0001. Choose Next. Choose all

the Entities/Properties and choose Finish.

SAP MDG Fiori Extend SAP MDG Fiori Applications Execution Steps Action Details

Add properties to

Search Supplier

[Important Note]:

This step is a

workaround that we

have put in place

as we have a

current limitation

due to a bug wrt to

redefinition of the

model (IM

0120061532

0001014935 2014)

that is still open.

1. Execute transaction SEGW, Open project MDG_Supplier. Choose Entity

Search Partner. Select and Copy all the properties.

2. Go to the custom project created (For example:

ZMDG_SUPPLIER_EXT_<Name>) and navigate to EntitySearch Supplier and

choose the Add Rows button (the number of rows added should be same as the

number of rows copied). Paste the Properties that were copied in previous

action.

Add Custom

Property

Select the Entity Type(For example, PurchasingOrganization) to which the

Custom Property should be added. Right click on ‘Properties’ under the Entity

Type and choose Change. On the Right side of page a pane with entities and

their corresponding properties are displayed. Choose Add and enter the name of

the new property along with the Edm.Core .Type and ABAP field name.

Example: For Payment Terms the Edm.Core .Type = Edm.String and the ABAP

field name = ZTERM_M.

Generate the

OData Project

Choose Generate in the SAP Gateway Service Builder. In the popup confirm if

the default details for Model and Service Definition are correct. Enter your

Technical Service Name (For example: ZMDG_SUPPLIER_SRV_<Name>) and

choose Ok. Save this in a local Package.

Register and Test

the new OData

Project as a new

Service.

In UI extensibility system execute transaction /iwfnd/maint_service and choose

Add Service. Enter the required details:

The system alias of the backend extensibility system

The technical service name. This is the Technical Service Name (For

example, ZMDG_SUPPLIER_SRV_<Name>).

After choosing Enter, the Technical Service Name and its corresponding details

are displayed under the Add Service section.

Selecting the Technical Service Name, the Service details are displayed in a

Pop-up. Choose Local Object and press Enter. An information/success message

states that the Service ZMDG_SUPPLIER_SRV_<Name> was created and its

metadata was loaded successfully.

This Registers the OData Project as a Service.


UI Extensibility for MDG Fiori Applications

Concept

The extensibility concept allows a customer to do extensions modification free for few of

the extensibility use cases. A modification free application requires no modifications in the SAP

delivered standard application. This protects the customer investment and at the same time

allows SAP upgrades to perform without interfering with the custom application. The concept

uses the extension possibilities of the UI components and the JavaScript classes.

A typical SAP delivered standard application consists of bootstrap files, views, controllers, and

internationalization. A custom application extends an SAP delivered standard application and

consists of bootstrap file Component.js which extends the Component.js of the SAP standard

application, internationalization file, view fragments, views, and view controllers.

Different extension use cases are supported by means of view extensions, view modifications,

view replacements, configuration for overriding/extending the navigation routes, controller

extension, controller replacement, extending the internationalization (i18n) strings, and

overriding or adding OData service URLs.

When the custom application is the started, at runtime, the resources of both the SAP delivered

standard application and the custom application are merged to create a single runtime artifact.

The Component.js in the custom application is merged with Component.js in the SAP delivered

standard application at runtime.


Legend

views

SAP Delivered UI ProjectExtension UI Project(Customer Project)

+ oDescriptor

+ detailsModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

+ setFavourite()

+ setUnFavourite()

S3.controller.js

S3.view.xml

views

- extModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

- delete()

S3Ext.controller.js

S3Ext.fragment.xml

Designtime Representation(On the Design Time, IDE)

Runtime Representation of Extended Views/Controllers(On the Client Side)

+ oDescriptor

+ detailsModel

- extModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

+ setFavourite()

+ setUnFavourite()

- delete()

S3.controller.js

S3.view.xml

<<contains>>

S3Ext.fragment.xml

1..1 1..1

Views

Controller

ExtensionsMetadata

1..1

Mo

dif

icat

ion

fre

eA

ll O

bje

cts

in t

he

Cu

sto

me

r N

ame

spac

e

S2.view.xml

S2.controller.js

1..1

Component.js

Configuration.js

i18n

Component.js

i18n

S2Ext.view.xml

S2Ext.controller.js

1..1

S2Ext.view.xml

<<replaces>>

S2.view.xml

S2Ext.controller.js1..1

View Extension of view S3 View Replacement of view S2

KEY1=Value1

KEY2=Value2

….

…..

KEY1=Value11

KEY3=Value3

….

….

KEY1=Value11

KEY2=Value2

KEY3=Value3

….

….

i18n Resource Merge

Contains only the customer extensions

+ Component.js


For more information on Creating an SAP UI5 Application, please refer to the document

at

https://help.sap.com/saphelp_nw74/helpdata/en/5b/9a170d9f6a4d5784e8ab2ded3d8517

/content.htmFor more information on building SAP UI5 applications using XML views,

refer to the

http://help.sap.com/saphelp_hanaplatform/helpdata/en/91/f292806f4d1014b6dd926db0e

91070/content.htm

views

SAP Delivered Application Custom Application

+ oDescriptor

+ detailsModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

+ setFavourite()

+ setUnFavourite()

S3.controller.js

S3.view.xml

views

- extModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

- delete()

S3Ext.controller.js

S3Ext.fragment.xml

Designtime Representation(On the Design Time, IDE)

1..1 1..1

Mo

dif

icat

ion

fre

eA

ll O

bje

cts

in t

he

Cu

sto

me

r N

ame

spac

e

S2.view.xml

S2.controller.js

1..1

Component.js

Configuration.js

i18n

Component.js

i18n

S2Ext.view.xml

S2Ext.controller.js

1..1

key1=value1

key2=value2

….

…..

key1=value11

key3=value3

….

….

Contains only the customer extensions

+ Component.js

Design time

Custom BSP App

Extends

Legend

Runtime Representation of Extended Views/Controllers(On the Client Side)

+ oDescriptor

+ detailsModel

- extModel

onInit()

onAfterRendering()

onBeforeRendering()

onExit()

+ setFavourite()

+ setUnFavourite()

- delete()

S3.controller.js

S3.view.xml

<<contains>>

S3Ext.fragment.xml

Views

Controller

ExtensionsConfiguration(Metadata)

1..1

S2Ext.view.xml

<<replaces>>

S2.view.xml

S2Ext.controller.js1..1

View Extension of view S3 View Replacement of view S2

key1=value11

key2=value2

key3=value3

….

….

i18n Resource Merge

Runtime


Extension Support on the UI

Extension Possibility Purpose How do we enable

View Modification To hide content Assign Name/IDs for Controls

View Extension To add content into specific places on UI

Introduce Placeholders

(Extension Point)

Controller Extension using a Hook

To add logic at specific places in controller

Introduce Controller Extension Hooks

View Replacement To replace with a custom view

No Action Required

Controller Extension To add/change logic of controllers

No Action Required

i18n Resource Extension

To add or change label texts

No Action Required

Custom View To create a custom view No Action Required

When Custom BSP App Runs

SAP MDG Fiori Extend SAP MDG Fiori Applications Launchpad Extension

At the end of all the steps to create a custom application that extends an SAP delivered

standard application, the end user using an SAP Fiori application gets to see a custom tile on

his SAP Fiori Launchpad as shown below.

UI Extensibility Tasks

Extend the UI layer when the information required for an app extension is exposed by the app's

SAP Gateway service but is not displayed on the UI.

Prerequisites are:

ABAP Development Tools for SAP NetWeaver. Refer the

https://tools.hana.ondemand.com/#abap for setting up the ABAP Team Provider

SAPUI5 Application Development Tool for Eclipse. Refer to SAP Note 1747308 for the

Installation of UI development toolkit for HTML5 (SAPUI5).

All SAPUI5 plugins are version 1.16.2 or higher (version numbers appear on the

Installed Software tab of the Help > About Eclipse > Installation > Details dialog box).

Local Tomcat webserver configured to work with SAPUI5 Eclipse.

If the ABAP system where the UI application is deployed is based on NW 7.31, then you can

use the ABAP Repository Team Provider. For releases lower than NW 7.31, you can use

SAPUI5 Application Development plug-in of Eclipse and use the upload/download

Extends

Extends

https://websmp230.sap-ag.de/sap(bD1lbiZjPTAwMQ==)/bc/bsp/spn/sapnotes/index2.htm?numm=1747308


mechanisms described in the link here:

https://sapui5.hana.ondemand.com/sdk/#content/Overview.html

The following checklist lists the tasks to be performed when enhancing an SAP Fiori app UI.

Task Check Description

1 Download SAP delivered standard application from ABAP system

2 Test SAP delivered standard application on local sandbox environment for Launchpad

3 Create a custom application that extends an SAP delivered standard application

4 Test custom application on local sandbox environment for Launchpad

5 Upload custom application to ABAP system

6 Smoke test custom application on ABAP system

7 Configure custom application on SAP Fiori Launchpad

8 Test custom application on SAP Fiori Launchpad

Download SAP delivered standard application from ABAP System

Pre-requisites: Before doing this step, you should know the following

1. SAP Fiori BSP Application Name you need to extend

2. OData service URL that contains the required extensions

In order to get the BSP Application Name for a given SAP Fiori app, please refer to the app-

specific documentation.

Refer to section Retrieving the SAPUI5 Application Project from the SAPUI5 Repository in

the Developer Guide for UI

http://help.sap.com/saphelp_uiaddon10/helpdata/en/d2/892e9b04c74cefbe4260629f5f7db8/content.

htm?frameset=/en/3e/3bccbb902d4672adfc24f883adf9de/frameset.htm&current_toc=/en/e4/843b8c3

d05411c83f58033bac7f072/plain.htm&node_id=683

The project name in Eclipse for the SAP delivered standard application should be same as BSP application service name on the server. Use SICF transaction on ABAP server to get the service name.

To change the OData service URL of the SAP delivered standard application to use the proxy,

you need to look for the OData service URL in the Configuration.js file inside the WebContent

folder. Inside the file, look for an object called “serviceList” and a property by name “serviceUrl”

and change it as shown below.


To configure the application on local sandbox environment for the Launchpad, refer to the link

http://help.sap.com/saphelp_scm700_ehp03/helpdata/en/89/6efc419d994463a7c148b69

04760a8/frameset.htmCreate Custom Application that Extends an SAP delivered standard

application

1. In Eclipse, create a new SAPUI5 Application Project

2. Create component.js and define the extension metadata

3. Implement extension by creating the views, controllers, i18n properties

So that there are no collisions between customer and SAP in the names of the Properties/Methods in the controllers, ensure that you name them in the customer namespace.

So that there are no collisions between customer and SAP in the names of the Control IDs in the views, ensure that you name them in the customer namespace.

Collisions may not occur in the current version but will occur after SAP ships new versions in case you do not follow the above guidelines.

General Guidance when Implementing Extensions in Custom Application

The extensibility concept provides a very high flexibility for extensions. However, flexibility

leads to complexities. There are different extension options. However, one should look for

specific places where SAP has enabled extension points. One has to check if the extension

requirements can be met using one of the following options:

i18n Resource Extension

View Modification

View Extension

Controller Extension using a Hook

Only in cases, where above mentioned options cannot be used to achieve a given requirement,

the following options can be used:

View Replacement

Controller Extension

Custom View

Use the above options as minimum as possible and use them only as a last resort for achieving

extensibility use cases.

Define Extensions Metadata

The extensions metadata is defined in the file Component.js file of the custom project.

The Component.js file has a json object called “metadata”.

The object “metadata” has the following objects within: “routing”, “config”, and “customizing”.

Object Name Use


config Used to define metadata for

custom OData URL

custom i18N bundle name

customizing Used to define metadata for

view extensions

view modifications

view replacements

controller extensions

routing Used to define metadata for new navigation routes in cases where

customer views are added

customer wants to change a navigation route

The object “customizing” supports the following objects and their usages are mentioned in the

table below

Object Name Use

sap.ui.viewExtensions Used to add a new view element to standard view at the defined extension points

sap.ui.viewModifications Used to change the property value of a control in the view

sap.ui.viewReplacements Used to replace a standard view with a view in the custom application

sap.ui.controllerExtensions Used to extend the functionality of the base controller.

Refer to https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Customization.html for more

details.

The object “config” supports the following objects and their usages are mentioned in the table

below

Object Name Use

sap.ca.i18Nconfigs Used to replace or add the internationalization strings with strings defined in the custom application

sap.ca.serviceConfigs Used to add or change the oData Service definition with oData service defined in the custom application

Refer to https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Navigation.html for the

usage of object “routing”.

Refer http://www.w3schools.com/json/ to see understand json and to see examples of a json

object.

Test Custom Application on Launchpad Sandbox on local tomcat

Refer section “Run Your Own Applications in the Sandbox” of

https://help.sap.com/saphelp_uiaddon10/helpdata/en/89/6efc419d994463a7c148b6904760a8/content

.htmUpload Custom Application to SAPUI5 Repository

Follow the chapter “Sharing the SAPUI5 Application Project with the SAPUI5 Repository” in

the Developer Guide for UI

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Customization.html

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Customization.html

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Customization.html for UI5

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Navigation.html

http://www.w3schools.com/json/

https://proddps.prod.jpaas.sapbydesign.com/dps/d/preview/67986e4c1e4b41bc8f2b9eb4b7ecf972/1.06/en-US/frameset.htm?59ea851d55e04c69a5ae07b15a3eda1b.html

SAP MDG Fiori Extend SAP MDG Fiori Applications http://help.sap.com/saphelp_uiaddon10/helpdata/en/c9/4f13fd242f40beb64e08fc62c494e7/content.h

tmSmoke Test Custom Application on ABAP System

Follow the chapter “Test Your SAPUI5 Application on an ABAP Server” in the UI AddOn

Developer’s Guide http://help.sap.com/nw-uiaddon#section3

Configure Custom Application on SAP Fiori Launchpad

Refer

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/a264a9abf98d4caabbf9b027bc1005d8.html

The steps below describe specific to the MDG role.

Seq.

Execution Steps

Action Details

1 Configure the User defined Tile on Launchpad

1. In the UI extensibility system execute transaction PFCG. Enter role SAP_MDG_BCR_REQUESTOR_T and choose Display. Open Menu Tab. Right click Fiori Launchpad Design and choose Execute. The Design Catalog page is opened.

2. In the Design Catalog Page, search the Application on which the extension

needs to be done (For example, MDG Cost Center) from the Catalog list. Open

the catalog (double-click), choose the Add Tile icon, Select the Target Mapping tile.

Enter the details below for the fields and choose Save.

Semantic Object: CostCenter

Action: requestCostCenterUserName

Launchpad Role: UIMDG001

Launchpad Instance: TRANSACTIONAL

Application Alias: UsernameApplication.

3. In the Design Catalog Page, Search the Application on which the extension

needs to be done (For example, MDG Cost Center) from the Catalog list. Open

the catalog(double-click), choose the Add Tile icon, select the App Launcher - Static

tile. Enter the details below for the fields and choose Save.

Title: username_ext_application

Semantic Object: CostCenter

Action: requestCostCenterUserName

Parameters: MAXDUPREC=20&USMD_CREQ_TYPE=CCTFP1.

http://help.sap.com/nw-uiaddon#section3


Seq.

Execution Steps

Action Details

2 Assign the User defined Tile on Launchpad

1. In the UI Extensibility system open transaction LPD_CUST. Search and Open

(double click) the role UIMDG001. Right click on the existing app (For example,

Request CostCenter) for which an extension is provided and choose Copy (also in

popup). Open the copied role and enter the details below.

Link Text : Extended AppName UserName

Application Parameter: /sap/bc/ui5_ui5/sap/<BSP application name>.

Example: /sap/bc/ui5_ui5/sap/zextended_cc.

Choose the Show Advanced (Optional) Parameters button. Update the fields as

outlined below and choose Save.

Application alias: Application alias (Example: UsernameApplication)

Additional Information : SAPUI5.Component=< Extended Project Name >

For example: SAPUI5.Component= zextended_cc.

2. In the UI Extensibility system open transaction PFCG, enter role ZSAP_MDG_LAUNCHPAD_DESIGN, and choose Display. Open the Menu tab , right click on Fiori Launchpad Design, and choose Execute. The Design Catalog page is opened. Select the Group tab (Left Corner) and select the Controlling Area group. Choose the Add Tile button. Provide the required Catalog from the F4 help (For example: MDG Cost Center). On selection of Catalog, the newly created tile is displayed along with the standard tile for the

respective application. Choose the Symbol below the newly created tile.

The Icon is displayed below the tile; this successfully creates the tile and adds it to the Launchpad.

Test custom application on Fiori Launchpad

Launch the SAP Fiori Landing page and click on the custom application tile.

Use Cases for UI Extensibility

Use case: Hiding a field

Requirement

Search Term 2 is a field that is displayed in the Form screen in the SAP delivered standard

application. Hide Search Term 2 fields in the Form screen.

SAP MDG Fiori Extend SAP MDG Fiori Applications Prerequisite: The field Search Term 2 has an ID associated with it in the SAP delivered

standard application.

SAP delivered standard application

Custom Application

Steps

1. Set the visibility property of the Search Term2 field to false.

In the example, the S1.view.xml has a field with id “SearchTerm2”.

In the Component.js add the piece of code under metadata object metadata: {

SAP MDG Fiori Extend SAP MDG Fiori Applications customizing: { "sap.ui.viewModifications": { "fcg.mdg.requestbp.view.S1": { "lblTerm2": { "visible": false }, "SearchTerm2": { "visible": false }, }, },

}

Use case: Adding new fields at specified extension points

Requirement

Add Date Founded and Coordinator in the General Section of Form tab.

Prerequisite: An extension is provided in the General Section of the in the SAP delivered

standard application.


Steps

1. Predefined extension point in S3.view.xml of SAP delivered standard application

<core:ExtensionPoint name="extGeneralSection" />

2. Add a new xml file under the view folder in custom application and name it as

CustomFrag1.fragment.xml.

3. Refer to Using custom text section to add custom text in the fragment definition.

4. Refer to Using custom oData Service section to add custom field data in the

fragment definition.

5. In fragment file add the following content for adding new fields <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:ca="sap.ca.ui" >

<Label id="lbldtfounded" text="{i18n>DAT_FOUN}"></Label>

<Input id="Datefounded" maxLength="2" ></Input>

</core:FragmentDefinition>

6. In Component.js add the piece of code to customizing object

"sap.ui.viewExtensions": {

"fcg.mdg.requestbp.view.S1": {

"extGeneralSection": {

className: "sap.ui.core.Fragment",

fragmentName: "zextendedbp.view.S1form",

type: "XML"

},

},

},

Refer the link below for documentation on fragments

http://help.sap.com/saphelp_hanaplatform/helpdata/en/36/a5b130076e4b4aac2c27eebf324

909/content.htmUse case: Using custom text

Requirement

A custom text for City and new text for Date Founded

Steps

1. Add file i18n.properties under i18n folder.

2. Add properties and values in the i18n files as shown.

DAT_FOUN=Date Founded CITY=City

3. Define i18n in the config object of Component.js as shown

metadata:{

/*meta data details like configuration, customizing and routing data*/

config: {

SAP MDG Fiori Extend SAP MDG Fiori Applications "sap.ca.i18Nconfigs": {

"bundleName": "zextendedbp.i18n.i18n"

},

}

Use case: Using custom OData Service URL

Requirement

Add model for Date founded for the Form screen.

Steps

1. Add the following piece of code to config object of Component.js as shown. "sap.ca.serviceConfigs": [{

name: "ZMDG_BP_EXT_SRV",

serviceUrl:"/sap/opu/odata/sap/ZMDG_BP_EXT_SRV/",

isDefault:true,

}]

Note that the “name” attribute is the key. In order to override the OData service URL of the

SAP delivered application, use the same value of “name” attribute as that of the SAP delivered

application and provide the custom OData service URL in the value for the attribute “serviceUrl”.

The value of the “name” attribute in the SAP delivered application can be found in the

Configuration.js file of the SAP delivered application

Extension of Business Partner Application

OData Extensibility

Project MDG_BP has been created with the entities having reference to structures with custom

includes which can be used for extensions. The project can be redefined as described in the

section above.

Name ABAP structure name Extension Include

AcademicTitleValue

Address /MDGBP/_S_BP_PP_ADDRESS CI_MDG_S_PBP_ADDRESS

Attachment MDG_GW_S_ATTACHMENT CI_MDG_GW_S_ATTACHMENT

AttachmentMaster

BankDetail /MDGBP/_S_BP_PP_BP_BKDTL CI_MDG_S_PBP_BP_BKDTL

BankKeyValue

BusinessPartner /MDGBP/_S_BP_PP_BP_HEADER CI_MDG_S_PBP_BP_HEADER

CentralData /MDGBP/_S_BP_PP_BP_CENTRL CI_MDG_S_PBP_BP_CENTRL


ChangeRequest MDG_GW_S_CREQUEST CI_MDG_GW_S_CREQUEST

CorresLangValue

CountryValue

EmailAddress /MDGBP/_S_BP_PP_AD_EMAIL CI_MDG_S_PBP_AD_EMAIL

FaxNumber /MDGBP/_S_BP_PP_AD_FAX CI_MDG_S_PBP_AD_FAX

IdentificationNumber /MDGBP/_S_BP_PP_BP_IDNUM CI_MDG_S_PBP_BP_IDNUM

IdtypeValue

InternetAddress /MDGBP/_S_BP_PP_AD_URL CI_MDG_S_PBP_AD_URL

MaritalStatusValue

PhysicalAddress /MDGBP/_S_BP_PP_AD_POSTAL CI_MDG_S_PBP_AD_POSTAL

RegionValue

Role /MDGBP/_S_BP_PP_BP_ROLE CI_MDG_S_PBP_BP_ROLE

SearchPartner MDG_GW_S_SEARCH_BP CI_MDG_GW_S_SEARCH_BP

TaxCatValue

TaxNumber /MDGBP/_S_BP_PP_BP_TAXNUM CI_MDG_S_PBP_BP_TAXNUM

TelephoneNumber /MDGBP/_S_BP_PP_AD_TEL CI_MDG_S_PBP_AD_TEL

TitleValue

The DPC class methods of the service have “move-corresponding” statements in the create

deep entity and get entity methods.

UI Extensibility

To extend the UI application following extension points starting with “ext” have been provided on

the xml of the view.

Customer can add the required fragments at these extension points.

View Extension Point Use

S1.view.app.xml extObjHeaderText Extends the object header section

S1.view.app.xml extGeneralSection Extends the General Section of the form

S1.view.app.xml extCommunicationSection Extends the Address and Communication section of the form

S1.view.app.xml extBankDetailSection Extends the Bank Section of the form

S1.view.app.xml extIDNumSection Extends the Identification section of the form


S1.view.app.xml extTaxCatSection Extends the Tax Category section

S1.view.app.xml extCreateForm Extends the complete form

S1.view.app.xml extSearchTable Extends the duplicate check results table

S1.view.app.xml extAttachments Extends the attachment section

Also all the UI methods have been provided with extension hook methods starting with

“extHook”. Customer can add the implementation in the new SAPUI5 project adding the

implementation in the controller.js of the project.

The following controllers can be extended:

Controller

Hook Use

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookClearFieldValues({object} this.oView)

@ControllerHook To clear the fields after submit If customer extends the application with his own field, these fields should be reset after SUBMIT is successful @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookClearFieldValues @param {object} this.oView View Instance @return { }

S1.controller.js

{string} sap.ca.scfld.md.controller.BaseFullscreenController~extHookSearchQuery({string} queryString, {object} this.oView)

@ControllerHook To modify the search query based on customer needs Customer can modify the query that is used to fetch duplicates with configured search providers @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookSearchQuery @param {string} queryString Query with which Search is performed ... @param {object} this.oView View instance @return {string} queryString


Modified Query

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSearch({object} oItemTemp)

@ControllerHook To modify the search result table Customer can modify the result table by adding/deleting new columns or by influencing the format of data shown in this result table @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSearch @param {object} oItemTemp Item template of a table @return {object} oItemTemp Modified Item template of the table

S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookCreateObject({object} oRequestEntry, {object} this.oView)

@ControllerHook To modify the data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookCreateObject @param {object} oRequestEntry User entered Data @param {object} this.oView View


instance @return {object} oRequestEntry Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate({object} oBpData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the organization data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate @param {object} oBpData BP Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} oBPData Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate({object} oBpData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate @param {object} oBpData BP Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View


instance @return {object} oBpData Data modified by this extension

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSelect({object} this.getView().byId("tabContent"), {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSelect @param {object} this.getView().byId("tabContent") Table Content @param {object} this.oView View instance @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnAttach({object} this.oAttach, {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnAttach @param {object} this.oAttach Attachments @param {object} this.oView View instance @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate({object} oCreateForm, {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies


the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate @param {object} oCreateForm Attachments @param {object} this.oView View instance @return { }

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} country, {object} oAddressForm)

@ControllerHook To modify the address related fields on UI Customer can modify address/communication related fields on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} country Country @param {object} oAddressForm Address form @return {object} oAddressForm New Address form with extensions

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDetails({object} oSimpleForm, {object} this.getView())

@ControllerHook To modify the person related fields in general section Customer can modify fields related to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDetails({object} oSimpleForm, {object} this.getView())

@ControllerHook To modify the organization related fields in general section Customer can modify fields related


to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} Country, {object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the address/communication related fields Customer can modify fields related to address/communication section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} Country country key @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookBankDetailsForm({object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the bank related fields Customer can modify fields related to bank section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookBankDetailsForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controlle

{object} sap.ca.scfld.md.controller.BaseFullscre

@ControllerHook To modify the identification related fields


r.js enController~extHookIDTypeForm({object} oSimpleForm, {object} this.oView)

Customer can modify fields related to identification section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookIDTypeForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookTaxNumForm({object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the tax related fields Customer can modify fields related to tax section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookTaxNumForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

Extension of Supplier Application

OData Extensibility

Project MDG_SUPPLIER has been created with the entities having reference to structures with

custom includes which can be used for extensions. The project can be redefined as described in

the section above.


AcademicTitleValue




AttachmentMaster

BankDetail /MDGBP/_S_BP_PP_BP_BKDTL CI_MDG_S_PBP_BP_BKDTL

BankKeyValue

BusinessPartner /MDGBP/_S_BP_PP_BP_HEADER

CI_MDG_S_PBP_BP_HEADER

CentralData /MDGBP/_S_BP_PP_BP_CENTRL

CI_MDG_S_PBP_BP_CENTRL


CorresLangValue

CountryValue



IdentificationNumber /MDGBP/_S_BP_PP_BP_IDNUM CI_MDG_S_PBP_BP_IDNUM

IdtypeValue


MaritalStatusValue

PhysicalAddress /MDGBP/_S_BP_PP_AD_POSTAL

CI_MDG_S_PBP_AD_POSTAL

RegionValue



TaxCatValue

TaxNumber /MDGBP/_S_BP_PP_BP_TAXNUM

CI_MDG_S_PBP_BP_TAXNUM


TitleValue

CompanyCode

/MDGBPX/_S_BP_PP_BP_COMPNY

CI_MDG_S_PBP_BP_COMPNY

GeneralDataSupplier

/MDGBPX/_S_BP_PP_BP_VENGEN

CI_MDG_S_PBP_BP_VENGEN

MultipleAssignment

/MDGBPX/_S_BP_PP_BP_MLT_AS

CI_MDG_S_PBP_BP_MLT_AS

PurchasingOrganization

/MDGBPX/_S_BP_PP_BP_PORG

CI_MDG_S_PBP_BP_PORG

SearchSupplier MDG_GW_S_SEARCH_SUPPLIER

CI_MDG_GW_S_SEARCH_SUPPLIER




UI Extensibility








S1.view.app.xml extOrgDetails Extension point for Organization details





S1.view.app.xml extSearchTable Extends the duplicate check results table

S1.view.app.xml extAttachments Extension point for Attachments

S1.view.app.xml extIconTabFilter Extends the IconTabBar





Controller Hook Use

S1.controller.js


@ControllerHook To clear the fields after submit If customer extends the application with his own field, these fields should be reset after SUBMIT is successful @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookClearField


Values @param {object} this.oView View Instance @return { }

S1.controller.js


@ControllerHook To modify the search query based on customer needs Customer can modify the query that is used to fetch duplicates with configured search providers @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookSearchQuery @param {string} queryString Query with which Search is performed ... @param {object} this.oView View instance @return {string} queryString Modified Query

S1.controller.js



S1.controller.js


@ControllerHook To modify the data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFulls


creenController~extHookCreateObject @param {object} oRequestEntry User entered Data @param {object} this.oView View instance @return {object} oRequestEntry Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate({object} oBpData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the organization data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate @param {object} oBpData BP Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} oBPData Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate({object} oBpData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate @param {object} oBpData BP Data


@param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} oBpData Data modified by this extension

S1.controller.js



S1.controller.js



S1.controller.j {void} @ControllerHook To modify the


s sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate({object} oCreateForm, {object} this.oView)

person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate @param {object} oCreateForm Attachments @param {object} this.oView View instance @return { }

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} country, {object} oAddressForm)

@ControllerHook To modify the address related fields on UI Customer can modify address/communication related fields on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} country Country @param {object} oAddressForm Address form @return {object} oAddressForm New Address form with extensions

S1.controller.js


@ControllerHook To modify the person related fields in general section Customer can modify fields related to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm


Modified simple form

S1.controller.js


@ControllerHook To modify the organization related fields in general section Customer can modify fields related to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} Country, {object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the address/communication related fields Customer can modify fields related to address/communication section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} Country country key @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookSupplOrgDetails({object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the tax related fields Customer can modify fields related to tax section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookSupplOrgDetails @param {object} oSimpleForm Simple Form instance @param {object} this.oView View


instance @return {object} oSimpleForm Modified simple form

S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookIDTypeForm({object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the identification related fields Customer can modify fields related to identification section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookIDTypeForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js


@ControllerHook To modify the tax related fields Customer can modify fields related to tax section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookTaxNumForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance


@return {object} oSimpleForm Modified simple form

Extension of Customer Application

OData Extensibility

Project MDG_CUSTOMER has been created with the entities having reference to structures

with custom includes which can be used for extensions. The project can be redefined as

described in the section above.


AcademicTitleValue



AttachmentMaster

BankDetail /MDGBP/_S_BP_PP_BP_BKDTL

CI_MDG_S_PBP_BP_BKDTL

BankKeyValue

BusinessPartner /MDGBP/_S_BP_PP_BP_HEADER

CI_MDG_S_PBP_BP_HEADER

CentralData /MDGBP/_S_BP_PP_BP_CENTRL

CI_MDG_S_PBP_BP_CENTRL


CorresLangValue

CountryValue



IdentificationNumber /MDGBP/_S_BP_PP_BP_IDNUM

CI_MDG_S_PBP_BP_IDNUM

IdtypeValue


MaritalStatusValue

PhysicalAddress /MDGBP/_S_BP_PP_AD_POSTAL

CI_MDG_S_PBP_AD_POSTAL

RegionValue




TaxCatValue

TaxNumber /MDGBP/_S_BP_PP_BP_TAXNUM

CI_MDG_S_PBP_BP_TAXNUM


TitleValue

CustomerCompanyCode

/MDGBPX/_S_BP_PP_BP_CUS_CC

CI_MDG_S_PBP_BP_CUS_CC

CustomerSalesData /MDGBPX/_S_BP_PP_BP_SALES

CI_MDG_S_PBP_BP_SALES

GeneralDataCustomer

/MDGBPX/_S_BP_PP_BP_CUSGEN

CI_MDG_S_PBP_BP_CUSGEN

MultipleAssignment /MDGBPX/_S_BP_PP_BP_MLT_AS

CI_MDG_S_PBP_BP_MLT_AS

SearchCustomer MDG_GW_S_SEARCH_CUSTOMER

CI_MDG_GW_S_SEARCH_CUSTOMER



UI Extensibility








S1.view.app.xml extOrgForm Extends the Organization section





S1.view.app.xml extSearchTable Extends the Duplicate search table


S1.view.app.xml extAttachments Extends the Attachment

S1.view.app.xml extIconTabFilter Extends the Icon tab





Controller Hook Use

S1.controller.js



S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseF

@ControllerHook To modify the search result table


ullscreenController~extHookOnSearch({object} oItemTemp)

Customer can modify the result table by adding/deleting new columns or by influencing the format of data shown in this result table @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSearch @param {object} oItemTemp Item template of a table @return {object} oItemTemp Modified Item template of the table

S1.controller.js


@ControllerHook To modify the data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookCreateObject @param {object} oRequestEntry User entered Data @param {object} this.oView View instance @return {object} oRequestEntry Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate({object} oCustData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the organization data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDataForCreate @param {object} oCustData


Customer Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} oCustData Data modified by this extension

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate({object} oCustData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDataForCreate @param {object} oCustData Customer Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} oCustData Data modified by this extension

S1.controller.js


@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnAttach


@param {object} this.oAttach Attachments @param {object} this.oView View instance @return { }

S1.controller.js


@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate @param {object} oCreateForm Attachments @param {object} this.oView View instance @return { }

S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} country, {object}

@ControllerHook To modify the address related fields on UI Customer can modify address/communication related


oAddressForm) fields on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} country Country @param {object} oAddressForm Address form @return {object} oAddressForm New Address form with extensions

S1.controller.js


@ControllerHook To modify the person related fields in general section Customer can modify fields related to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPersonDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm Modified simple form

S1.controller.js


@ControllerHook To modify the organization related fields in general section Customer can modify fields related to General section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrgDetails @param {object} oSimpleForm Simple form instance @param {object} this.getView() view instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm({string} Country, {object} oSimpleForm, {object}

@ControllerHook To modify the address/communication related fields Customer can modify fields related to address/communication section


this.oView) on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookAddressForm @param {string} Country country key @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrganizationUnitForm({object} oSimpleForm, {object} this.oView)

@ControllerHook To modify the bank related fields Customer can modify fields related to Organization uint section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOrganizationUnitForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseF

@ControllerHook To modify the identification related fields


ullscreenController~extHookIDTypeForm({object} oSimpleForm, {object} this.oView)

Customer can modify fields related to identification section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookIDTypeForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

S1.controller.js


@ControllerHook To modify the tax related fields Customer can modify fields related to tax section on the UI form @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookTaxNumForm @param {object} oSimpleForm Simple Form instance @param {object} this.oView View instance @return {object} oSimpleForm Modified simple form

Extension of Material Application

OData Extensibility

Project MDG_MATERIAL has been created with the entities having reference to structures with


the section above.

Name Application Extension Include


AttachmentMaster



InternalComment /MDGMM/_S_MM_PP_INTCMNT CI_MDG_S_PMM_INTCMNT

Material /MDGMM/_S_MM_PP_MATERIAL CI_MDG_S_PMM_MATERIAL

SearchMaterial MDG_GW_S_SEARCH_MATERIAL CI_MDG_GW_S_SEARCH_MATERIAL

UOMValueHelp



UI Extensibility





S1.view.app.xml extHeader Extends the overview tile

S1.view.app.xml extGeneralData Extends the fields in the form

S1.view.app.xml extGeneralData Extends the General Data section of the form and add other sections as well

S1.view.app.xml extTable Extends the Duplicate search table

S1.view.app.xml extAttachments Extends the attachment

S1.view.app.xml extIconTabBarExtension Extends the icon tabs

S1.view.app.xml extFooterExtension Extends the footer section





Controller Hook Use

S1.controller.j {void} @ControllerHook for Cancel


s sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel()

button Description on Controller Hook usage here. Consumer can extend the functionality of cancel button and add some additional actions to this button The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel @param { } @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSubmit()

@ControllerHook for Submit button Description on Controller Hook usage here. Consumer can extend the functionality of Submit button and add some additional actions to this button The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSubmit @param { } @return { }

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookDataForCreate({array} oAttach, {string} matType, {string} indSector)

@ControllerHook for extHookDataForCreate Description on Controller Hook usage here. Consumer can add extra fields on the UI and can extend the create method to add the these fields The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookDataForCreate


@param {array} oAttach file attachment @param {string} matType material types @param {string} indSector industry sector @return {object} oNewDeepData object

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSelect()

@ControllerHook for selection of tab filter Description on Controller Hook usage here. Consumer can extend this method to provide extra funcationlity on selection of the Icon tabe filter The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSelect @param { } @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookonRefresh()

@ControllerHook for extHookonRefresh Description on Controller Hook usage here. Consumer can extend this method to provide extra funcationlity on pressing of refresh button in the duplicates tab The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonRefresh @param { } @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookClearFiel

@ControllerHook for extHookClearFields Description on Controller Hook


ds({sap.ui.core.mvc.View} oViewInst)

usage here. Consumer can extend this method to clear the UI field which have been extended The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookClearFields @param {sap.ui.core.mvc.View} oViewInst @return { }

S1.controller.js

{string} sap.ca.scfld.md.controller.BaseFullscreenController~extHookSearchQuery({string} queryString)

@ControllerHook for extHookSearchQuery Description on Controller Hook usage here. Consumer can extend this method to add more fields for duplicate check The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookSearchQuery @param {string} queryString duplicate check query @return {string} queryString enhanced query

Extension of Cost Center Application

OData Extensibility

Project MDG_COSTCENTER has been created with the entities having reference to structures

with custom includes which can be used for extensions. The project can be redefined as

described in the section above.



AttachmentMaster


CompanyCodeValueHelp


ControllingAreaValueHelp

CostCenter /MDG/_S_0G_ES_CCTR CI_MDG_S_E0G_CCTR

CurrencyValueHelp



UI Extensibility



The customer can add the required fragments at these extension points.

The extension points on the screen are as below. All the extension points follow the below

pattern



S1.view.app.xml extCreateForm Extends the fields in the form




S1.view.app.xml extIconFilter Extends the icon tab





Controller Hook Use

S1.controller.js



S1.controller.js




S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPrepare({object} newData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the ProfitCenter data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPrepare @param {object} newData Customer Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} newData Data modified by this extension

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSubmit()

@ControllerHook Handle submit Is used to handle submit The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSubmit @param { } @return { }

S1.controller.j {void} @ControllerHook Handle cancel


s sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel()

Is used to handle cancel The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel @param { } @return { }

S1.controller.js



S1.controller.js


@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate @param {object} oCreateForm Attachments @param {object} this.oView View instance @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOn

@ControllerHook To modify the person related data that is being saved to MDG


Select({object} this.getView().byId("IconTab"), {object} this.oView)

Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSelect @param {object} this.getView().byId("IconTab") Table Content @param {object} this.oView View instance @return { }

Extension of Profit Center Application

OData Extensibility

Project MDG_PROFITCENTER has been created with the entities having reference to

structures with custom includes which can be used for extensions. The project can be redefined

as described in the section above.



AttachmentMaster


ControllingAreaValueHelp

ProfitCenter /MDG/_S_0G_ES_PCTR CI_MDG_S_E0G_PCTR

SearchProfitCenter MDG_GW_S_SEARCH_PC



UI Extensibility



SAP MDG Fiori Extend SAP MDG Fiori Applications Customer can add the required fragments at these extension points.



S1.view.app.xml extCreateForm Extends the fields in the form



S1.view.app.xml extIconFilter Extends the icon tab





Controller Hook Use

S1.controller.js



S1.controller.js


@ControllerHook To modify the search result table Customer can modify the result table by adding/deleting new columns or by influencing the format of data shown in this result table @callback


sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSearch @param {object} oItemTemp Item template of a table @return {object} oItemTemp Modified Item template of the table

S1.controller.js



S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenController~extHookPrepare({object} newData, {object} this.oAttach, {string} this.vCrType, {object} this.oView)

@ControllerHook To modify the ProfitCenter data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookPrepare @param {object} newData Customer Data @param {object} this.oAttach Attachment data @param {string} this.vCrType Change Request type @param {object} this.oView View instance @return {object} newData Data modified by this extension

S1.controller.js {void} sap.ca.scfld.md.controller.BaseFullscreenController~extHook

@ControllerHook Handle submit Is used to handle submit The hook must be documented like:


onSubmit() @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonSubmit @param { } @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel()

@ControllerHook Handle cancel Is used to handle cancel The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookonCancel @param { } @return { }

S1.controller.js



S1.controller.js


@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnCreate @param {object} oCreateForm Attachments


@param {object} this.oView View instance @return { }

S1.controller.js

{void} sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSelect({object} this.getView().byId("IconTab"), {object} this.oView)

@ControllerHook To modify the person related data that is being saved to MDG Customer can modify the data set that is being sent to MDG before SUBMIT if he modifies the fields present on the UI. This is the data that gets stored in the backend @callback sap.ca.scfld.md.controller.BaseFullscreenController~extHookOnSelect @param {object} this.getView().byId("IconTab") Table Content @param {object} this.oView View instance @return { }

Extension of Track My Requests Application

OData Extensibility

Project MDG_MYCR has been created with the entities having reference to structures with


the section above.


ChangeRequest MDG_GW_S_CREQ CI_MDG_GW_S_CR



UI Extensibility

SAP MDG Fiori Extend SAP MDG Fiori Applications To extend the UI application following extension points starting with “ext” have been provided on




S1.view.app.xml extObjHeaderText Replace with required full screen control

S1.view.app.xml extShowAll Extension Point for All Requests Table

S1.view.app.xml extInProcess Extension Point for InProcess Requests Table

S1.view.app.xml extApprovedResults Extension Point for Approved Requests Table

S1.view.app.xml extRejected

S1.view.app.xml extIconTabFilter Extension Point for Rejected Requests Table

S1.view.app.xml extAction





Controller Hook Use

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookResults({object} oTab, {object} oItemTemp, {model} oTotalRequestsModel)

@ControllerHook Hook For Extending Total Table Description on Controller Hook usage here. This method is called when there are any enhancements for table with Total Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookResults @param {object} oTab @param {object} oItemTemp @param {model} oTotalRequestsModel @return {object} oItempTemp

S1.controller.js {object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookI

@ControllerHook Hook For Extending InProcess Table Description on Controller Hook


nProcess({object} oInProcessTable, {object} oItemTemp, {model} oInProcessRequestsModel)

usage here. This method is called when there are any enhancements for table with InProcess Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookInProcess @param {object} oInProcessTable @param {object} oItemTemp @param {model} oInProcessRequestsModel @return {object} oItemTemp

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookOnApproved({object} oApprovedTable, {object} oItemTemp, {model} oApprovedRequestsModel)

@ControllerHook Hook for Approved Requests Table Description on Controller Hook usage here. This method is called when there are any enhancements for table with Approved Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookOnApproved @param {object} oApprovedTable @param {object} oItemTemp @param {model} oApprovedRequestsModel @return {object} oItempTemp

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookOnRejected({object} oRejectedTable, {object} oItemTemp, {model} oRejectedRequestsModel)

@ControllerHook Hook for Rejected Requests Table Description on Controller Hook usage here. This method is called when there are any enhancements for table with Rejected Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookOnRejected @param {object} oRejectedTable @param {object} oItemTemp


@param {model} oRejectedRequestsModel @return {object} oItemTemp

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogAllPressed({object} oLocalIns, {object} this._ototReqVSDialog)

@ControllerHook Hook For Extending Sorter and Filter of Total Requests Table Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with Total Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogAllPressed @param {object} oLocalIns @param {object} this._ototReqVSDialog @return {object} this._ototReqVSDialog

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogInProPressed({object} oLocalIns, {object} this._oInProReqVSDialog)

@ControllerHook Hook For Extending Sorter and Filter of InProcess Requests Table Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with InProcess Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogInProPressed @param {object} oLocalIns @param {object} this._oInProReqVSDialog @return {object} this._oInProVSDialog

S1.controller.js {object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHook

@ControllerHook Hook For Extending Sorter and Filter of Approved Requests Table


onVSDialogApprPressed({object} oLocalIns, {object} this._oApprReqVSDialog)

Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with Approved Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogApprPressed @param {object} oLocalIns @param {object} this._oApprReqVSDialog @return {object} this._oApprReqVSDialog

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogRejPressed({object} oLocalIns, {object} this._oRejtdReqVSDialog)

@ControllerHook Hook For Extending Sorter and Filter of Rejected Requests Table Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with Rejected Requests of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonVSDialogRejPressed @param {object} oLocalIns @param {object} this._oRejtdReqVSDialog @return {object} this._oRejtdReqVSDialog

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonApplySorterOrFilter({object} evt, {object} aSorters, {object} aFilters)

@ControllerHook Hook For Extending Sorter and Filter of Total Requests, Approved and Rejected Tables Functionality Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with Total Requests,


Approved and Rejected Tables of the user The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonApplySorterOrFilter @param {object} evt @param {object} aSorters @param {object} aFilters @return {object} aResult

S1.controller.js

{object} sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonApplySorterOrFilterInPro({object} evt, {object} aSorters, {object} aFilters)

@ControllerHook Hook For Extending Sorter and Filter of InProcess Requests Tables Functionality Description on Controller Hook usage here. This method is called when there are any enhancements for sorter and filter of table with In Process Requests The hook must be documented like: @callback sap.ca.scfld.md.controller.BaseFullscreenControllerr~extHookonApplySorterOrFilterInPro @param {object} evt @param {object} aSorters @param {object} aFilters @return {object} aResult

Use Case: Adding a value help to the new field added in the create form

A new property called Cost center category is added to the cost center entity. Also the value

help entity with the properties cost center category and description are created to enable the

value helps for the field cost center category.

Step 1: Extending the standard MDG OData services

Important: Do not alter the Existing OData Services.

The steps below describes the creation of Projects and OData Service


Seq.

Execution Steps

Action Details

1 Create new Extensibility Project

In the backend extensibility test system execute transaction SEGW. This opens the SAP NetWeaver Gateway Service Builder. Choose Create and enter the name of extensibility project which needs to created (Example, ZMDG_COSTCENTER_EXT ). Save in a local object.

2 Redefine the OData Service

Right click on the Data model under the newly created project and choose Redefine. Select OData Service(GW). Enter the valid Technical Service Name as MDG_COSTCENTER_SRV and enter the Version as 0001. Choose Next. Choose all the Entities/Properties and choose Finish

3 Add Custom Property

Select the Entity Type (For example, CostCenter) to which the Custom Property should be added. Right-click on Properties under the Entity Type and select Change. On the Right side of page, a pane with entities and their corresponding Properties displays. Choose Add and enter the name of the new Property along with Edm.Core .Type and ABAP field name.

Example: For CostCenterCategory, Edm.Core .Type = Edm.Int64 and ABAP field name = KOSAR.

Note: The Cost Center Category is a part of the structure /MDG/_S_0G_ES_CCTR and we do not need to enhance it further.

4 Generate the OData Project

Choose Generate under the SAP NetWeaver Gateway Service Builder. In the popup confirm if the default details for Model and Service Definition are correct. Provide your Technical Service Name (For example, ZMDG_COSTCENTER_SRV). Choose Ok and save this in a local package.

5 Add Custom Entity & Property

1. Add custom Entity. Select the Data Model to which the Custom Entity should be added, Double-click on the entity. A pane containing the list of entities is shown on the right. Choose Add and enter the name of the new entity along with the Structure, enter the entity set name and save.

This is required to create the value help for the cost center category field.

Example : For CCATVALUELP, enter structure TKT05, enter Entity Set CCATVALUEHELPS.

2. Add Custom Property.- Select the Entity Type (For example,CCATVALUEHELP) to which Custom Property should be added. Right-click on CCATVALUELP under the Entity Type. On the Right side of page a pane with entities and their corresponding Properties are displayed. Choose Add and enter the name of the new property along with the Edm.Core .Type and the ABAP field name.

Example 1: For CCAT, Edm.Core .Type = Edm.String, Max. = 1 and ABAP field name = KOSAR.

Example 2: For CategoryText, Edm.Core .Type = Edm.String, Max. = 20 and ABAP field name = KTEXT.


Seq.

Execution Steps

Action Details

6 Association and Navigation property

The key for the association between CostCenter entity and the CCATVALUEHELP entity is the cost center category.

1. Create Association.

Right-click Associations. In the wizard that opens, enter the following details and choose Next.

Association Name: ccatvaluehelp_costcenter

Principal Entity

Entity Type Name: ccatvaluehelp

Cardinality:1

Dependent Entity

Entity Type Name: CostCenter

Cardinality:1:N

Navigation Property : ccat

2. Referential Constraints.

Enter data as shown below and choose Next.

Principal Entity- ccatvaluehelp

Principal Key – CCAT

Dependent Entity- CostCenter

Dependent Property- CostCenterCategory

3. Create Association Set.

Enter data and choose Ok.

Association Set Name : ccatvaluehelp_costcenterSet

Principal Entity:

Entity Set Name: ccatvaluehelps

Dependent Entity:

Entity Set Name: CostCenters

7 Generate the OData Project

Choose Generate under the SAP Netweaver Gateway Service Builder. In the popup confirm if the default details for Model and Service Definition are correct. Provide your respective Technical Service Name (For Example: ZMDG_COSTCENTER_SRV). Choose Ok and Save this in a local Package.


Seq.

Execution Steps

Action Details

8 Redefine create method of class „ZCL_ ZMDG_COSTCENTER_EX_DPC_EXT“

1. Open transaction SE24. Open class ZCL_ ZMDG_COSTCENTER_EX_DPC_EXT. Go to Change mode and redefine the method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITY_SET using the

button.

2. Check the filter checkbox . This shows only the redefined methods.

3. Open the redefined method created [Double-click GET_ENTITY_SET under the method that was just redefined].

4. Add the following code in the redefined method.

Note: replace the class name ZCL_ZMDG_COSTCENTER_E_DPC with the generated class name in your project

Replacement code for GET_ENTITY_SET

5. Add the new method CCATEGORY_GET_ENTITYSET in the DPC class that is generated.

The signature of the method is the same as the GET_ENTITYSET method plus additional exporting parameter of ET_MESSAGES type USMD_T_MESSAGE.

Note Replace the class name ZCL_ZMDG_COSTCENTER_E_DPC with the generated class name in your project.

Replacement Code for ccategory entity set


Seq.

Execution Steps

Action Details

9 Register and Test the new OData Project as a new Service.

In the UI extensibility system execute transaction “/iwfnd/maint_service” and choose Add Service. Enter the required details:

System alias of Backend Extensibility System

Technical Service name: Your Technical Service name (For example, ZMDG_COSTCENTER_SRV).

Press Enter and the Technical Service Name and its corresponding details are displayed under the Add Service section.

Clicking on Technical Service Name, the Service details are displayed in a Pop-up. Choose Local Object and press Enter. An Information/success message states that the Service ZMDG_COSTCENTER_SRV was created and its metadata was loaded successfully.

This Registers the OData Project as a Service.

Step 2: Extending the standard MDG SAP Fiori UI’s in Eclipse Juno (IDE)

Seq.

Execution Steps

Action Details

1 Creation of Extension SAPUI5 project

Launch Eclipse. Select the Java perspective (Right Top Corner). In the Menu, select File New Other. Select Application Project under SAPUI5 APPLICATION development, choose Next. Enter the Project Name (Example, zextended_cc) without Initial view and choose Finish.

Note the Project Name should be lowercase.


Seq.

Execution Steps

Action Details

2 Create New Template

Hint: The Code mentioned in all attached documents is only for Example purposes only and should be changed based on the user needs.

1. Select the user’s specific Project (Example, zextended_cc)

WebContent index.html“(doubleclick) . Change the existing code to the code shown in the attached document as an example.

Replacment Code for "index.html"

Note: Index.html is the Initial File that is created and contains the source root of the project and also the code to read the URL Parameters.

2. Select the user’s specific Project(Example, zextended_cc) WebContent Right-click New File (Name it Component.js) and add the existing code to the code shown in the attached document as an example.

Replacement Code for "Component.js"

Note

By replacing the Code in Component.js, Default Configuration is overwritten to point to the new Service URL (refer UI Section)

To allow the newly added field for submission: Code for the customizing i.e. view extension to add Cost Center Category on the UI at the extension point extCreateform and the Controller extension at extHookPrepare method to extend the submit data is done using the Replacement code for Component.js.


Seq.

Execution Steps

Action Details

3. To display the Extended UI element (For example, Cost Center Category) on the UI. Select the user’s specific Project (For example, zextended_cc) WebContent Right click New Folder (For example, View) Right click New File (For example, S1.form.fragment.xml). Update the File with the code shown in the attached document as an example.

Code for "s1.form.fragment.xml"

4. To extend the Hook method to add the Cost Center Category for Submitting the data. Open the user’s specific Project (For example, zextended_cc) WebContent View Right-click New File (For example, ExtendS1.controller.js). Replace the existing code with the code shown in the attached document as an example.

Replacementcodeforextends1controller

Note: To clear the custom added fields implement the code mentioned below in the ExtendS1.controller.js after the last method.

extHookClearFieldValues:function(oViewInst){

this.byId("CostCenterCategory").setValue();

},

5. Add the description of the Cost Center Category which is accessed in the extended view.

Open the user’s specific Project (For example, zextended_cc) WebContent View Right click New Folder (For example, i18n) Right click New File (For example, i18n_en.properties) Add code CCCAT=Cost Center Category.

6. Disable the Proxyservlet.

Open the user’s specific Project (For example zextended_cc) WebContent Web-inf Web.xml (double-click) Comment the lines of code mentioned in attached document. Save the file.

Code to be commented to disable the UI ProxyServlet


Seq.

Execution Steps

Action Details

4 Create BSP Application

1. Important: In Extensibility system, Single sign. on should be disabled

2. Right-click on user’s specific Project (For example, zextended_cc) Team Share Project SAP UI5 ABAP repository Connection Browse Select the UI Extensibility System (For example,: GM0) Next Login with User ID and Password Next Create new BSP application (For example, zextended_cc) and save as a $tmp package Next Finish (Choose Ok in the popup).

5 Team Share of the project

Right-click on user’s specific Project (For example, zextended_cc) Team Submit (Choose Ok in the popup) Finish.

Step 3: Extending the Launchpad Customizing, Launchpad Catalog and

Group

Extend the Launchpad customizing in transaction LPD_CUST , extend the Launchpad catalog

SAP_MDG_BC_REQUESTOR_T and the Launchpad group SAP_MDG_BCG_REQUESTOR_T. Refer to the

steps as shown in this section.

Additional References

This table contains useful links to other documents

Document/Topic Link

SAP Theme Designer http://help.sap.com/nw-uiaddon Application Help: SAP Library UI Theme Designer

SAP Netweaver UI Addon http://help.sap.com/nw-uiaddon

SAP Netweaver UI Addon Developer API Reference

https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.ui.html

SAP UI Development Toolkit for HTML5 (SAPUI5)

https://tools.hana.ondemand.com/#sapui5

SAP UI5 Wiki https://sapui5.hana.ondemand.com/sdk/

SAP UI5 Community http://scn.sap.com/community/developer-center/front-end

http://help.sap.com/nw-uiaddon

http://help.sap.com/nw-uiaddon



https://tools.hana.ondemand.com/#sapui5

https://sapui5.hana.ondemand.com/sdk/

http://scn.sap.com/community/developer-center/front-end

Documents

SAP MDG Fiori Extensibility Guide · 2019-11-12 · SAP MDG Fiori Extend SAP MDG Fiori Applications No part of this publication may be reproduced or transmitted in any form or for