Lessons learnt:

Creating a Fiori App in Eclipse accessing

SAP on IBM z Systems

Volker Schölles, IBM, SAP on IBM z Systems Development

April 14th 2016

Agenda

• Executive Summary

• SAP Fiori Apps Positioning and What they are

• SAP Fiori Apps Deployment

• SAP Fiori Apps Development Example and Launchpad Upload

• Short Demo

© 2016 IBM Corporation 2

Executive Summary

• Problem:
You want to leverage a new proprietary Fiori App with your SAP system on premise

• Solution:
Create an Fiori App accessing your SAP on IBM z Systems with Eclipse

• How to:
- Learn via sample Fiori App
- Use an IDES Installation because it already contains a SAP Gateway setup
(IDES ECC 6.0 incl. EhP7 Edition 2 (2015))
- Select common scenario: SAP Business Suite ‘Purchase Order Approval’ application
- Implement sample described in two SAP Community Network blogs

© 2016 IBM Corporation 3

 Positioning SAP Fiori and IBM Solutions
• SAP Fiori Apps are SAP‘s Mobile Solutions
• Ready to run mobile apps for different SAP back-
end applications; allow for easy extensions
• SAP-centric
• Own Fiori Apps: Deep Application knowledge is
the prerequisite

• IBM MobileFirst Platform

• Custom-development of mobile solutions
for „Individual Enterprise“ transformation
• For Apps which access different on-premise
sources, both SAP and non-SAP APIs

• IBM Bluemix
• Modern and fast dev. environment; offers
„MobilFirst Services Starter“ boilerplate*
• For Apps which access both SAP and Cloud
APIs
• Public Cloud deployment
* boilerplate: contains an app and its associated runtime environment and predefined services for a particular domain.

© 2016 IBM Corporation 4

SAP Fiori
• SAP Fiori is the new user experience (UX) for SAP software. It applies modern design
principles for a completely reimagined user experience. SAP Fiori UX represents a
personalized, responsive and simple user experience across devices and deployment
options. See SAP Fiori - SAP User Experience Community
• SAP Fiori Apps are developed by using User Interface Development Toolkit for HTML5
(SAPUI5).

© 2016 IBM Corporation 5

SAP Fiori User Interface is build with SAPUI5
• The SAPUI5 runtime is a client-side HTML5* rendering library with a rich set of UI
controls for building as well desktop as mobile applications.
• Sample Fiori Purchase Order Approval application**, which is based on SAPUI5
technology looks on iPhone 6 like below.

* https://de.wikipedia.org/wiki/HTML5 ** http://scn.sap.com/docs/DOC-53949

© 2016 IBM Corporation 6

SAP Fiori App Types

Only transactional Fiori Apps run currently on Any DB Option: HANA as a sidecar

© 2016 IBM Corporation 7

 SAP Fiori App Catalog

• SAP Fiori Apps reference library:

– fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer

• SAP Fiori - SAP Help Portal Page

– help.sap.com/fiori

• Some Analytical Fiori Apps are called SAP Smart Business

• Example for Transactional Fiori App: My Spend

– SAP Fiori principal Apps 1.0 for SAP ERP
– Back-End product supported by : SAP ERP 6.0 SPS 15+, etc.

© 2016 IBM Corporation 8

 SAP Fiori – requires SAP Gateway and OData
• SAP Gateway is a mandatory component to run SAP Fiori apps. SAP Fiori apps use OData services
(REST API implementation) to display and update data in the backend.
• OData service is based on a Entity Data Model (EDM) which can be created in Eclipse and imported
into SAP Gateway. During import via `SEGW` transaction ABAP classes and stub OData Create /
Read / Update / Delete (CRUD) methods are created to access the data. The ABAP code of the
methods must be developed.

• The ModelProviderClass (MPC) is used to define the model, e.g. method ‘Define’ creates entity,
properties, etc.
• The DataProviderClass (DPC) is used to code your CRUD methods as well as function import
methods. All the logic must be coded in redefined methods of DPC extension class.
• The UI is coded in JavaScript and XML
See http://scn.sap.com/docs/DOC-46223
and refer to Generated ABAP Classes and Service Registration - SAP NetWeaver Gateway - SAP Library

© 2016 IBM Corporation 9

Architecture of Fiori Transactional Apps –
Intranet Deployment

 Apps are deployed by ABAP UI add-ons,

SAP Fiori Lauchpad to start an App

 Apps are connected via OData services

based on OData models

 OData services are shipped via ABAP

Support Packages

 SAP Gateway:
 Handles communication between client and SAP backend
applications using OData services and processes HTTPS
request for the OData services
 Makes your SAP business data and functionality accessible to
any external device

 Details

© 2016 IBM Corporation 10

Architecture of Fiori Transactional Apps –
Internet-Facing Deployment
 SAP Fiori Client
 Mobile application runtime
 Available for iOS, Android, Windows
 Provides e.g. asset caching or device API access

 SAP Web Dispatcher (or equivalent) in DMZ

 SAP Mobile Platform (optional) for additional

management capabilities like:
 Enterprise authentication
 User/device registration
 Application lifecycle management
 Usage statistics

 Details
 Alternative deployment on SAP HANA Cloud Platform

© 2016 IBM Corporation 11

Development environments for Fiori Apps

• Developing Fiori Apps in public cloud: SAP Web IDE

 Overview and introduction to Web IDE: scn.sap.com/docs/DOC-55884
 Apps can be deployed on ABAP Server with SAP Gateway or on SAP HANA Cloud Platform
(HCP)

• Developing Fiori Apps on premise: Eclipse

 Eclipse plugins available for download at
tools.hana.ondemand.com

© 2016 IBM Corporation 12

Development of a Fiori ‚Purchase Order Approval‘
App with Eclipse
Information is described in three SAP Community Network sources:
 Fiori-like Purchase Order Approval with OData - Part I (Fiori-like SCN Part I)
http://scn.sap.com/docs/DOC-53949
describes the SAP backend ABAP Logic, OData Model and SAP Gateway configuration
 Create your first service with SAP Gateway 2.0 SP4 (Gateway SCN)
http://scn.sap.com/community/developer-center/mobility-platform/blog/2013/04/02/my-journey-creating-a-sapui5-
mobile-app-at-home-part-ii
describes how to create and activate a service in the SAP Gateway
 Fiori-like Purchase Order Approval with OData - Part II (Fiori-like SCN Part II)
http://scn.sap.com/docs/DOC-53950
describes the SAPUI5 Frontend coding, which is in JavaScript and XML

Used Eclipse(Luna) plugins:

 ABAP Development Tools for NetWeaver (as ADT)
 Eclipse connects to an SAP backend system and you can edit all ABAP classes / methods / tables...

 SAP Mobile Platform Tools, which contains the Ogee OData plugin
 SAP UI5 Development Toolkit; SAP UI5 application preview runs on the Jetty web server
 Jetty provides Web services in an embedded Java application and it is already a component of the Eclipse IDE (started as open
source project and moved in 2009 to Eclipse); https://en.wikipedia.org/wiki/Jetty_(web_server)

© 2016 IBM Corporation 13

Steps to build sample App „Fiori POApproval“

1. Create backend ABAP code (available on Github) via SAPlink report as described in
‚Fiori-like SCN Part I‘
2. Create OData model as Entity Data Model in Eclipse and export it
3. Activate SAP Gateway as described in ‚Gateway SCN step 1‘
4. In mandant with Purchase Order data:
Create a new SAP Gateway project (described in ‚Gateway SCN‘ step 2) and import
OData Model into SAP Gateway via SEGW transaction
5. Adapt Model and create code for the data access (CRUD) methods
6. Activate service in Gateway via SPRO transaction (described in ‚Gateway SCN‘ step 4)
7. Create „Fiori“ UserInterface (UI) App with SAPUI5 Development Toolkit in Eclipse as
described in ‚Fiori-like SCN Part II‘
8. Adapt sample ABAP code to retrieve ‘real pending approval data’ from IDES system

Remark: More details, hints, remarks and recommendations can be found in the backup foils

© 2016 IBM Corporation 14

Detailed steps to build sample App
• Import backend ABAP code (available on Github) via SAPlink report as described in
‚Fiori-like SCN Part I‘
•  SLINK project (report code must be created manually in SAP backend system )
Classes Z_MM_PO, Z_MM_POITEM, Z_MM_SUPPLIER are created
 Hint: Table Types ZMM_POITENS and ZMM_POS had to be defined in the Dictionary for successful compile.

• Create OData model as Entity Data Model in Eclipse and export it

• Install ‚SAP Mobile Platform Tools‘ plugins, which contain Odata plugin
 Hint: SCN blog says: "Start by creating a new OData project: New -> OData Development -> Service Implementation Project …”
With IDES: New -> SAP Mobile Platform OData Implementation Project -> Create New OData Model

• Activate SAP Gateway as described in

‚Gateway SCN step 1‘
 Hint: Menu structure is with 7.40 slightly different (see right figure)
 Hint: Added to AppServer profile:
icm/server_port_0 = PROT=HTTP,PORT=8080
icm/host_name_full = <full host name>

© 2016 IBM Corporation 15

Detailed steps to build sample App cont.

• In mandant with Purchase Order data:

Create a new SAP Gateway project (described in ‚Gateway SCN‘ step 2) and import
OData Model into SAP Gateway via SEGW transaction
• Creates Classes and empty CRUD (Create / Read / Update / Delete) methods to access the data
• Remark: The IDES system contains the ABAP Front-End Server,
the SAP Gateway and the ABAP Back-End Server in one installation
(IDES ECC 6.0 incl. EhP7 Edition 2 (2015))

 Hint: Odata model was not correct in our SAP Gateway, see comment:

• Adapt Model and create code for the data access (CRUD) methods
 Hint: Code should be already available via SLINK import of frist step

• Activate service in Gateway via SPRO transaction (described

in ‚Gateway SCN‘ step 4)
 Hint: Service catalog is available at http://<server>:<port>/sap/opu/odata/iwfnd/CATALOGSERVICE/

© 2016 IBM Corporation 16

Detailed steps to build sample App cont.

• Create „Fiori“ UserInterface (UI) App with SAPUI5 Development Toolkit in Eclipse as
described in ‚Fiori-like SCN Part II‘
• Adapt in component.js the line
var url = "proxy/http/<host>:<port>/sap/opu/odata/sap/ZPOAPPROVAL_SRV/";
with the real SAP System host, port and service name, if you have used a different one and the line
var oModel = new sap.ui.model.odata.ODataModel(url, true, "<user>", "<pass>");
with a valid SAP System userid and password
 Hint: "Target Device" does no longer exist in panel --> select Libray ‘sap.m’
• Remark: Userid and password are hardcoded and anybody knowing the URL can access the backend data!
• Recommendation: In order to get an understanding of the UI fundamentals, do the 10 exercises described in SCN “Building SAP Fiori-like
UIs with SAPUI5 in 10 Exercises”  SCN paper link

• Test: Select project, right click and ‘Run As’ ‘Web App Preview’
• Problem of sample ABAP code with IDES system
• In class Z_MM_PO and method GET_PENDING_APPROVAL the value ‘Z1’ defined for:
constants: lc_frggr type frggr value 'Z1'. "Release group from Purchase Orders in your system
did not deliver any Purchase Orders and had to be adapted:
constants: lc_frggr type frggr value 'PO'. "Release group from Purchase Orders in your system

 Hint: Check with transaction me28, which combination of Release group (and Release code) is used in your environment.
It may be necessary to adapt also value of constants: lc_released type frggr value 'C'. "Code for "released" in your system

© 2016 IBM Corporation 17

Upload sample App and add to Fiori Launchpad

• Upload to ABAP Front-End Server

• Run report /UI5/UI5_REPOSITORY_LOAD in SE38 transaction, enter z<eclipse project name> (zVSFioriApp)
• Because we add the App to a Launchpad on the Front-End Server, adapt (SE80 transaction) in component.js the lines
var url = "proxy/http/<host>:<port>/sap/opu/odata/sap/ZPOAPPROVAL_SRV/";
with var url = "/sap/opu/odata/sap/ZPOAPPROVAL_SRV/";
and var oModel = new sap.ui.model.odata.ODataModel(url, true, "<user>", "<pass>”);
with var oModel = new sap.ui.model.odata.ODataModel(url, true);

 Hint: If your z<eclipse project> name is longer than 15 char, you can copy the project using a name with less than 15 chars
Use transactions /IWBEP/CACHE_CLEANUP and /IWFND/CACHE_CLEANUP to clean services caches and
SMICM (-> Goto -> HTTP-PlugIn -> Server Cache -> Invalidate Globally) to clean ICM cache
• Remark: SAP developer access key is needed

© 2016 IBM Corporation 18

Add sample App to Fiori Launchpad cont.

• Configuring the App to SAP Fiori Launchpad for Intranet Deployment

• Run SPRO transaction and define a new semantic object (SAP NW, UI Technologies, SAP NW UI Services)
• Run LPD_CUST transaction and define a new Launchpad; I used role FIN_AP and defined an TRANSACTIONAL instance
• Select the new Launchpad and create a new application (VSFioriLikePOApproval) with url (/sap/bc/ui5_ui5/sap/zVSFioriApp) from SICF transaction
• Login to Lauchpad admin page: http/<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=800&sap-language=EN
- create new custom catalog, steps 3.10.9-11
- add new 'App Launcher - Static' tile and enter General and Navigation parameter 3.10.17 - 3.10.19
- select the Target Mappings Icon (right to the Tiles Icon) and the press 'Create Target Mapping' on bottom right, do steps 3.10.14 - 15;
define as the action in Intent Mapping the name of the loaded App (zVSFioriApp)
 Hint: steps 3.10.12 -13 and 16 are no longer valid
• Run in client 800 PFCG transaction and create a single role, steps 3.10.20 – 25 (23: entry 'catalog provider' is now 'SAP Fiori Tile
Catalog' )
• Login to Lauchpad: http/<host>:<port>//sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html and create a new group and add the
Fiori App, steps 3.10.26 -33. Use the previously created catalog to add the Fiori App.

• Run the App… your are DONE.

© 2016 IBM Corporation 19

 Demo „Fiori“ Purchase Order Approval App

1) Ensure that Pulse is connected and ZDE system is running

2) In Chrome: Select 'customize icon on top right' -> More tools -> Developer tools
3) Select Device on top left , for example Apple iPhone6

4) In ‚Favourite bar‘ select „VS Fiori Lauchpad“; login into client 800 ...

5) In Firefox: Show your bookmarks -> Recently Bookmarked -> VS Fiori Launchpad ...

Or:
6) Start eclipse with workplace “C:\Users\IBM_ADMIN\workspace “ (old TP "D:\temp\eclipse\workspace\VSFirstBMDemoApp“
7) Select FioriLikePOApproval project (old TP: SAPUI5POApproval) and right click -> Run As -> Web App Preview
 Summary
start

 Learnt via sample Fiori App

‘Purchase Order Approval’, how to create a
proprietary Fiori App with Eclipse which
accesses a SAP backend running on
IBM z Systems

 Used an IDES Installation containing a SAP NW Gateway

and SAP Fiori Lauchpad infrastructure

IBM DB2 11 for z/OS

© 2016 IBM Corporation 21

Questions

Thank you

Volker Schoelles
volker_schoelles@de.ibm.com

© 2016 IBM Corporation 22

Backup slides
SAP Gateway details
• SAP Gateway is a technology that provides a simple way to connect devices,
environments and platforms to SAP software based on market standards.
It is a set of ABAP add-ons to your existing SAP ERP system and offers an API that
gives easy-to-use access to the rich wealth of business data.

• SAP Gateway offers connectivity to SAP applications using any programming language
or model without the need for SAP knowledge by leveraging REST services and OData
protocol.

• REST (Representational State Transfer) is a style of software architecture for

distributed systems such as the World Wide Web. REST uses the standard GET, PUT,
POST & DELETE methods and other existing features of the HTTP protocol. One goal
is to encapsulate legacy systems.

• Odata (The Open Data Protocol) is an open web protocol for querying and updating
data (CRUD methods). The protocol allows for a consumer to query a data source over
the HTTP protocol and get the result back in formats like Atom, JSON or plain XML.
For a simple overview see http://scn.sap.com/docs/DOC-35472

© 2016 IBM Corporation 24

 SAP Web IDE
Developing Fiori Apps in public cloud
 Browser-based (Web) Integrated Development
Environment to
 Create SAPUI5/HTML5 Apps
 Create custom Fiori Apps
 Extend SAP Fiori Apps

 Application templates act as the foundation for

highly efficient app development

 End-to-End application lifecycle with one tool

 UI design, development testing,
deployment, customer extensions

 Skills:
 ABAP & in OData Services
 OOPs ABAP and BAPI, RFC
 Eclipse, HTML5, JavaScript

 Overview and introduction to Web IDE:

scn.sap.com/docs/DOC-55884

© 2016 IBM Corporation 25

MobilFirstPlatform

© 2016 IBM Corporation 26

IBM Bluemix
IBM® Bluemix is the new Platform-as-a-Service (PaaS) offering, built on Cloud Foundry open source technology.
Bluemix is an open platform for developing and deploying mobile and Web applications. Bluemix provides a broad set of
services and runtimes that gives the integration developer control and flexibility to build an application.

Run Your Apps

The developer can chose any language runtime
or bring their own. Just upload your code and
go.

DevOps
Development, monitoring, deployment and
logging tools allow the developer to run the
entire application

APIs and Services

A catalog of open source, IBM and third
party APIs services allow a developer to
stitch together an application in minutes.

Cloud Integration
Build hybrid environments. Connect to on-
premises systems of record plus other public
and private clouds. Expose your own APIs to
your developers.

Extend SaaS Apps

Rapid Coding
Drop in SaaS App SDKs and extend to new
Visual Composition use cases (e.g.,. Mobile, Analytics, Web)

Runs on …. © 2016 IBM Corporation 27

SAP on IBM z Systems Community
at IBM developerWorks®
• New external community
- connect, share, and collaborate - Link to 'SAP on IBM z Systems’:
- Anybody can read; in order to participate http://ibm.co/1ToJlR8
you need to join in
- Register for an IBM ID to participate

© 2016 IBM Corporation 28

 Trademarks
The following are trademarks of the International Business Machines Corporation in the United States and/or other countries.
Bluemix* developerWorks* GUARDIUM* MQSeries* Rational* WebSphere* z/OS*
CICS* DS8000* HyperSwap* OMEGAMON* Redbooks* z13 zSecure
Cognos* FICON* IBM* Parallel Sysplex* IBM SmartCloud* z13s z Systems
DB2* GDPS* IBM (logo)* RACF* Tivoli* zEnterprise* z/VM*
* Registered trademarks of IBM Corporation
These are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. A current list of IBM trademarks is
available on the web at “Copyright and trademark information” at: http://www.ibm.com/legal/us/en/copytrade.shtml

The following are trademarks or registered trademarks of other companies.

LinkedIn, the LinkedIn logo, the IN logo and InMail are registered trademarks or trademarks of LinkedIn Corporation and its affiliates in the United States and/or other countries.
Java and all Java based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
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.
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
Oracle and Java are registered trademarks of Oracle and/or its affiliates.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
OpenStack is a trademark of OpenStack LLC. The OpenStack trademark policy is available on the OpenStack website.
SAP, R/3, SAP NetWeaver, ByDesign, SAP BusinessObjects Explorer, StreamWork, and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP SE in Germany and other countries.

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.

Notes:
Performance is in Internal Throughput Rate (ITR) ratio based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput that
any user will experience will vary depending upon considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the
workload processed. Therefore, no assurance can be given that an individual user will achieve throughput improvements equivalent to the performance ratios stated here.
IBM hardware products are manufactured from new parts, or new and serviceable used parts. Regardless, our warranty terms apply.
All customer examples cited or described in this presentation are presented as illustrations of the manner in which some customers have used IBM products and the results they may have
achieved. Actual environmental costs and performance characteristics will vary depending on individual customer configurations and conditions.
All statements regarding IBM's future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only.
Information about non-IBM products is obtained from the manufacturers of those products or their published announcements. IBM has not tested those products and cannot confirm the
performance, compatibility, or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products.

© 2016 IBM Corporation 29

Legal information
Please note

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion. Information
regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or
functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future
features or functionality described for our products remains at our sole discretion.

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The
actual throughput or performance that any user will experience will vary depending upon many factors, including
considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage
configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results
similar to those stated here.

Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM
operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for
informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While
efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any
kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other
materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM
or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have
achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor
shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

© 2016 IBM Corporation 30