Adding Custom Fields to SAP Fiori Apps in 3 Steps.

SAP Mobility SAP Fiori Approve Purchase Orders/ SAP Fiori Approve Purchase Requisitions

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility. A Branded Service provided by SAP Rapid Innovation Group

Applicable Releases: SAP Fiori Approve Purchase Orders 1.0 SAP Fiori Approve Purchase Requisitions 1.0 SAP NetWeaver Gateway 2.0 SP 06

Version 1 June 2013

All other produc t and s er vic e names mentioned ar e the trademar ks of their res pecti ve c ompani es. Data c ontai ned i n this document s er ves i nfor mati onal pur poses onl y. National pr oduct specific ati ons may var y. The infor mation i n this document is pr oprietar y to SAP. N o part of this doc ument may be reproduc ed, c opi ed, or trans mitted i n any form or for any purpose without the expres s prior written per mission of SAP AG. This doc ument is a preli minar y versi on and not subj ect to your lic ens e agreement or any other agreement with SAP. T his doc ument c ontai ns onl y intended s trategies , develop ments, and func tionalities of the SAP® pr oduc t and is not i ntended to be bi ndi ng upon SAP to any parti cular course of busi ness, pr oduct str ateg y, and/or development. Pleas e note that this doc ument is s ubjec t to c hang e and may be c hanged by SAP at any time without notice. SAP ass umes no r esponsibility for err ors or omissi ons in this doc ument. SAP does not warrant the ac cur ac y or c ompl eteness of the infor mation, text, graphics , links, or other items contained within thi s materi al. T his document is provi ded without a warranty of any kind, either ex press or i mplied, i ncl udi ng but not li mited to the i mpli ed warr anties of merc hantabil ity, fitnes s for a partic ular purpos e, or non-infri ngement. SAP s hall have no li ability for damages of any ki nd including without li mitation direc t, s pecial, indirec t, or c onsequenti al damages that may res ult from the us e of thes e materi als. T his li mitati on shall not appl y i n c as es of i ntent or gross negligenc e. The statutor y liability for personal inj ur y and defec ti ve pr oduc ts is not affec ted. SAP has no c ontrol over the infor mation t hat you may acc ess thr oug h the use of hot links c ontai ned i n these materi als and does not endors e your us e of thir d-party Web pages nor provi de any warranty whatsoever rel ating to third-party Web pages.

© Copyright 2013 SAP AG. All rights reserved. No part of this public ation may be reproduc ed or trans mitted in any for m or for any purpos e without the expr ess permis sion of SAP AG. T he infor mation c ontai ned herei n may be changed without pri or notic e. Some s oftwar e produc ts mar keted by SAP AG and its dis tributors contai n pr oprietar y s oftware c omponents of other s oftwar e vendors. Microsoft, Wi ndows , Excel , Outl ook, and Power Poi nt are registered tr ademar ks of Micr os oft Cor por ation. IBM, D B2, D B2 Uni vers al D atabas e, System i, System i5, System p, Sys tem p5, Sys tem x, System z, System z 10, Sys tem z9, z 10, z 9, i Seri es, pSeri es, xSeries, zSeries, eSer ver, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterpris e Ser ver, PowerVM , Power Arc hitecture, POWER6+, POWER 6, POWER 5+, POWER5, PO WER , OpenPower, Power PC, Batc hPi pes, BladeC enter, System Storage, GPF S, H ACMP, R ETAIN, D B2 Connect, R ACF, Redbooks , OS/2, Parall el Syspl ex, M VS/ESA, AIX, Intelligent Miner, WebSphere, N etfi nity, Ti voli and Informi x ar e tr ademar ks or registered trademar ks of IBM Cor por ati on. Linux is the r egister ed tr ademar k of Linus T or val ds i n the U.S. and other c ountries. Adobe, the Adobe l ogo, Acr obat, PostScript, and Reader are either tr ademar ks or registered tr ademar ks of Adobe Sys tems Inc orp orated in the United States and/or other c ountries. Oracl e is a r egister ed trademar k of Or acle C or por ation. UNIX, X/Open, OSF/1, and M otif ar e r egister ed trademar ks of the Open Group. Citrix, IC A, Program N eighbor hood, M etaFrame, Wi nFrame, Vi deoFr ame, and M ultiWi n are trademar ks or r egister ed trademar ks of Citri x Systems, Inc. HTML, XML, XHTML and W3C ar e tr ademar ks or registered tr ademar ks of W3C®, World Wide Web Cons ortium, Massac hus etts Institute of Tec hnol og y. Java is a r egister ed trademar k of Sun Micros ystems, Inc . JavaScri pt is a registered tr ademar k of Sun Micros ystems, Inc., used under licens e for tec hnol ogy invented and i mpl emented by N etsc ape. SAP, R /3, SAP N etWeaver, D uet, PartnerEdge, ByDesig n, SAP BusinessObj ects Explor er, StreamWor k, and other SAP pr oducts and s er vic es mentioned herein as well as their r espec ti ve l ogos ar e tr ademar ks or registered trademar ks of SAP AG in Germany and other c ountries.

SAP “How-to” Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a

Business Objects and the Business Objects logo, BusinessObjects, Crystal

practical business context, it is not implied that those features and

Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business

procedures are the only approach in solving a specific business problem

Objects products and services mentioned herein as well as their respective

using SAP NetWeaver. Should you wish to receive additional information,

logos are trademarks or registered trademarks of Business Objects

clarification or support, please refer to SAP Consulting.

Software Ltd. Business Objects is an SAP company.

Any software coding and/or code lines / strings (“Code”) included in this

Sybas e and Adapti ve Ser ver, i Anywhere, Sybas e 365, SQL Anywher e, and other Sybase pr oduc ts and s er vic es mentioned herei n as well as their r es pec ti ve logos ar e tra demar ks or registered trademar ks of Sybase, Inc. Sybas e is an SAP c ompany.

documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent. Disclaimer Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components. Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

Document History Document Version

Description

1

The first release version

Typographic Conventions

Icons

Type Style

Description

Icon

Example Text

Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Cross-references to other documentation

Example text

Emphasized words or phrases in body text, graphic titles, and table titles

Example text

File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools.

Example text

User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation.



Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system.

EXAMPLE TEXT

Keys on the keyboard, for example, F2 or ENTER.

Description Caution Note or Important Example Recommendation or Tip

Table of Contents 1.

2.

3.

4.

Business scenario ................................................................................................................1 1.1

Sample scenario ................................................................................................................. 1

1.2

Prerequisites ....................................................................................................................... 1

Architecture .......................................................................................................................... 2 2.1

Overview ............................................................................................................................ 2

2.2

Test OData services [Gateway] ....................................................................................... 3

Implementation .................................................................................................................... 6 3.1

Step 1 . Extend the OData Entity in the GW Model Provider by implementing BAdI [ERP] .................................................................................................................................. 6

3.2

Step 2 . Extend the corresponding ABAP DDIC Structure by Append Structure [ERP] .................................................................................................................................. 6

3.3

Step 3. Fill data to the custom fields in the GW Data Provider by implementing BADI [ERP] .......................................................................................................................12

Test the OData service .......................................................................................................17 4.1

Check the OData service - Before .................................................................................. 17

4.2

Clear the Cache ............................................................................................................... 17

4.3

Test the OData service - after ......................................................................................... 17

4.4

UI extensibility ................................................................................................................. 18

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

1.

Business scenario

Adding custom fields in SAP Fiori apps UI is common requirement from customers. Customers have custom fields in ERP backend applications. You are a consultant to enable those customer fields in SAP Fiori apps. There are 2 how to guides for adding custom fields.  

Part 1: Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility. Part 2: Adding custom fields to SAP Fiori apps. UI fields extensibility.

1.1

Sample scenario

In this How to Guide we will show you how to add the “Purchasing Group” field in SAP Fiori Approve Purchase Orders.

Implementation steps are in 3 steps. 1. 2. 3.

Extend the corresponding ABAP DDIC Structure by Append Structure Extend the OData Entity in the GW Model Provider by implementing BADI Fill data to the custom fields in the GW Data Provider by implementing BADI

Steps are also same for SAP Fiori Approve Purchase Requisitions. Note: The standard delivered BADI is different in each app. Please look at the Installation and Configuration Guide in the http://help.sap.com/fiori and also look at details in the transaction SE18 and SE80

1.2 -

Prerequisites

SAP Fiori Approve Purchase Order is up and running. You have ABAP programming knowledge.

June 2013

1

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

2. 2.1

Architecture Overview

The OData components are installed on SAP Business Suite backend.

It has Model Provider Class and Data Provider Class and methods have enhancement spots which call BAdI (Business Add In) implementations.

You can check the enhancement details in SE80 or SE18. Transaction: SE80 Package: GBAPP_APV_PO

June 2013

2

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

2.2

Test OData services [Gateway]

1. Logon to NetWeaver Gateway system and call transaction /IWFND/MAINT_SERVICE. Logon user should be the approver who has workitems for approving Purchase Orders. Test OData using Gateway Client tool. Transaction: /IWFND/MAINT_SERVICE

2. Test the $metadata. /sap/opu/OData/SAP/GBAPP_POAPPROVAL/$metadata

June 2013

3

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

There is no Property for “Purchasing Group” in Header detail. 3. Test the OData service and check collections. /sap/opu/OData/SAP/GBAPP_POAPPROVAL?$format=xml

4. Get a workitem ID /sap/opu/OData/SAP/GBAPP_POAPPROVAL/WorkflowTaskCollection?$filter=TaskType eq 'TS20000166'&$top=1 /sap/opu/OData/SAP/GBAPP_POAPPROVAL/Wor kfl owTas kColl ecti on?$filter=T as kT ype eq 'TS20000166'&$top= 1

June 2013

4

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

5.

Get the Purchase Order detail /sap/opu/OData/sap/GBAPP_POAPPROVAL/WorkflowTaskCollection('000001105834')/HeaderD etails?$expand=ItemDetails,Notes,Attachments

At the end of this How to Guide, you see Purchasing Group data in here. It means the OData service provides Purchasing Group value and HTML5 UI can consume it.

June 2013

5

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

3.

Implementation

3.1

Step １ . Extend the corresponding ABAP DDIC Structure by Append Structure [ERP]

In the step １, you are going to add the field „Purchasing Group“ in the structure of entity. 1. Open the structure Transaction: SE80 Structure: GBAPPS_PO_HEADER_DETAILS and GBAPPS_PO_WORKFLOW_TASK

2. Double click the include GBAPPS_PO_HEADER_DETAILS_INCL.

3. Select the „Append Structure...“ button.

June 2013

6

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

4. Enter the Append name. For example ZPO_H_DETAILS..

5. Add field. For example ZZEKGRP.

Information only: Purchasing Group field „EKGRP“ is in the table „EKKO“.

6. Activate the Append Structure. You should see the ZZEKGRP in the Structure GBAPPS_PO_HEADER_DETAILS.

7. Repeat same steps for GBAPPS_PO_WORKFLOW_TASK structure. There is include GBAPPS_PO_WORKFLOW_TASK_INCL.

June 2013

7

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

3.2

Step 2 . Extend the OData Entity in the GW Model Provider by implementing BAdI [ERP]

In the step 2, you are going to implement a BAdI method which adds “Purchasing Group” property in the Model Provider class. 8. Display Enhancement Spot Transaction: SE18 Enhancement Spot: GBAPP_APV_PO

9. Right click on Implementations and select “Create BAdI Implementation”.

10. Type Enhancement Implementation name

11. Type BAdI Implementation name

June 2013

8

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

You have option for copying the sample class. In this guide, we copy the sample class.

12. Implement the DAdI Double click the Implementing Class.

Double click the method.

You see the sample code with comments.

June 2013

9

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

13. Go to change mode and add “ZPurchasingGroup” property in both entity “WorkflowTask” and “HeaderDetail”. The UI screenshot helps you to understand why you handle 2 entity types.

Remember that you have looked at the meta deta definition in the section 2.2.

June 2013

10

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

Program Code: ------------------------------------------------------------------METHOD if_gbapp_ex_apv_po_mdp~enhance_gw_service_entity_mdp. DATA: lo_property

TYPE REF TO /iwbep/if_mgw_OData_property.

IF iv_entity_type_name = 'HeaderDetail' OR iv_entity_type_name = 'WorkflowTask'. lo_property = io_entity_type>create_property( iv_property_name = 'ZPurchasingGroup' iv_abap_fieldname = 'ZZEKGRP' ). lo_property->set_nullable( abap_true ). ENDIF. ENDMETHOD. -------------------------------------------------------------------

14. Activate the method.

June 2013

11

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

3.3

Step 3. Fill data to the custom fields in the GW Data Provider by implementing BADI [ERP]

In the step 3, you are going to implement a BAdI method which fills “Purchasing Group” value in the Data Provider class. 1. Open the Enhancement Spot. Transaction: SE18 Enhancement Spot: GBAPP_APV_PO

2. Right click on Implementations and select “Create BAdI Implementation”.

3. You can use same Enhancement Implementation created in the step 1.

4. Type BAdI Implementation name

You have option for copying the sample class. In this guide, we copy the sample class.

June 2013

12

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

5. Implement the BAdI Double click the Implementing Class.

Double click the method CHANGE_HEADER_DETAILS_INFO_API.

You see the sample code with comments.

June 2013

13

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

6. Check the Method definition and find the field you have to fill the value. Select the menu Goto -> Method Definition.

7. Open a new session and check the structure GBAPPS_APV_PO_IT_X

June 2013

14

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

ZZEKGRP is there.

You have to fill the Purchasing Group value to the cs_header_details_x-zzekgrp. 8. Go back to the original session.

9. Switch to change mode and implement the code. Program Code: ------------------------------------------------------------------METHOD if_gbapp_ex_apv_po_rdp~change_header_details_info_api. DATA: lv_po_number TYPE ebeln. lv_po_number = cs_header_details_x-po_number. SELECT SINGLE ekgrp FROM ekko INTO cs_header_details_xzzekgrp WHERE ebeln = lv_po_number . ENDMETHOD.. -------------------------------------------------------------------

June 2013

15

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

10. Activate the method. Status should be Active. 11. Repeat same step for CHANGE_WORKFLOW_TASK_API method.

Program Code: ------------------------------------------------------------------METHOD IF_GBAPP_EX_APV_PO_RDP~CHANGE_WORKFLOW_TASK_API. DATA: lv_po_number TYPE ebeln. FIELD-SYMBOLS: TYPE GBAPPS_PO_WORKFLOW_TASK. LOOP AT CT_WORKFLOW_LIST ASSIGNING . lv_po_number = -po_number. SELECT SINGLE ekgrp FROM ekko INTO zzekgrp WHERE ebeln = lv_po_number . ENDLOOP. ENDMETHOD.. -------------------------------------------------------------------

June 2013

16

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

4.

Test the OData service

Before implementing 3 steps, there was nOData for Purchasing Group.

4.1

Check the OData service - Before

Get the Purchase Order detail /sap/opu/OData/sap/GBAPP_POAPPROVAL/WorkflowTaskCollection('000001105834')/HeaderD etails?$expand=ItemDetails,Notes,Attachments

There was no Purchasing Group in the end of xml.

4.2

Clear the Cache

When you changed the Model, you have to clear Gateway cache in both Gateway and ERP backend. Transaction: /IWFND/CACHE_CLEANUP on Gateway server

Transaction: /IWBEP/CACHE_CLEANUP on ERP Server

4.3

Test the OData service - after

Get the Purchase Order detail /sap/opu/OData/sap/GBAPP_POAPPROVAL/WorkflowTaskCollection('000001105834')/HeaderD etails?$expand=ItemDetails,Notes,Attachments

June 2013

17

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

The Workflow Task entity has also Purchasing Group value. /sap/opu/OData/SAP/GBAPP_POAPPROVAL/WorkflowTaskCollection?$filter=TaskType eq 'TS20000166'&$top=1

4.4

UI extensibility

The next step is you are going to display the Purchasing Group field in the UI. Please refer to the separate How to Guide “Adding custom fields to SAP Fiori apps. UI fields extensibility”.

June 2013

18

Adding custom fields to SAP Fiori apps in 3 steps. OData fields extensibility.

June 2013

19

www.sap.com/contactsap www.sdn.sap.com/irj/sdn/howtoguides