Lessons learnt:

Creating a Fiori App in Eclipse accessing

SAP on IBM z Systems

Volker Schlles, 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

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

Positioning SAP Fiori and IBM Solutions

SAP Fiori Apps are SAPs Mobile Solutions

Ready to run mobile apps for different SAP backend 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

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

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

SAP Fiori App Types

Only transactional Fiori Apps run currently on Any DB

Option: HANA as a sidecar

2016 IBM Corporation

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

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

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-sapui5mobile-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 onpremises systems of record plus other public
and private clouds. Expose your own APIs to
your developers.

Rapid Coding
Visual Composition

Runs on .

Extend SaaS Apps

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

2016 IBM Corporation

27

SAP on IBM z Systems Community

at IBM developerWorks
New external community
-

connect, share, and collaborate

Anybody can read; in order to participate

you need to join in

Link to 'SAP on IBM z Systems:

http://ibm.co/1ToJlR8

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
IBMs statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBMs 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 users 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