lessons learnt: creating a fiori app in eclipse accessing sap on

April 14th 2016

Lessons learnt:

Creating a Fiori App in Eclipse accessing SAP on IBM z Systems

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

© 2016 IBM Corporation 2

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


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


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.


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

https://experience.sap.com/fiori/


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

https://de.wikipedia.org/wiki/HTML5

http://scn.sap.com/docs/DOC-53949


SAP Fiori App Types

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


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.

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer

http://help.sap.com/fiori


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.

See http://scn.sap.com/docs/DOC-46223

and refer to Generated ABAP Classes and Service Registration - SAP NetWeaver Gateway - SAP Library

• 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

http://scn.sap.com/servlet/JiveServlet/showImage/102-61828-7-640799/odata.png

http://scn.sap.com/servlet/JiveServlet/showImage/102-61828-7-640799/odata.png


http://help.sap.com/saphelp_gateway20sp08/helpdata/en/ae/5b2c091ef8408783f00646af254216/content.htm?frameset=/en/ae/5b2c091ef8408783f00646af254216/frameset.htm


Architecture of Fiori Transactional Apps –Intranet Deployment

Details

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

http://help.sap.com/saphelp_fiorierpx1_100/helpdata/en/ba/f61f533f86ef28e10000000a4450e5/content.htm?frameset=/en/ec/a91e530fe4e60be10000000a441470/frameset.htm&current_toc=/en/40/1b675374bc6655e10000000a423f68/plain.htm&node_id=3&show_children=false


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

http://help.sap.com/saphelp_fiorierpx1_100/helpdata/en/18/59515419134a18e10000000a423f68/frameset.htm


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

https://scn.sap.com/docs/DOC-55884

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


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)


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)


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)


http://scn.sap.com/community/developer-center/mobility-platform/blog/2013/04/02/my-journey-creating-a-sapui5-mobile-app-at-home-part-ii


https://en.wikipedia.org/wiki/Jetty_(web_server)


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


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>

http://wiki.scn.sap.com/wiki/display/ABAP/SAPlink+User+Documentation?original_fqdn=wiki.sdn.sap.com


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/


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

http://scn.sap.com/community/developer-center/front-end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10-exercises#jive_content_id_What_You_Learn_in_10_Exercises


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


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.

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

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

start


Thank you

Volker Schoelles

[email protected]

Questions

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



SAP Web IDEDeveloping 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

https://scn.sap.com/docs/DOC-55884


MobilFirstPlatform


Run Your AppsThe developer can chose any language runtime

or bring their own. Just upload your code and

go.

DevOpsDevelopment, monitoring, deployment and

logging tools allow the developer to run the

entire application

APIs and ServicesA catalog of open source, IBM and third

party APIs services allow a developer to

stitch together an application in minutes.

Cloud IntegrationBuild hybrid environments. Connect to on-

premises systems of record plus other public

and private clouds. Expose your own APIs to

your developers.

Extend SaaS AppsDrop in SaaS App SDKs and extend to new

use cases (e.g.,. Mobile, Analytics, Web)

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.

Runs on ….

Visual Composition

Rapid Coding

IBM Bluemix


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

https://www.ibm.com/developerworks/community/groups/service/html/communitystart?communityUuid=f200cb29-8f67-40d2-b44b-ea57838ba0ba

http://ibm.co/1ToJlR8

https://www.ibm.com/account/profile/us?page=reg


TrademarksThe following are trademarks of the International Business Machines Corporation in the United States and/or other countries.

Bluemix*CICS*Cognos*DB2*

MQSeries*OMEGAMON*Parallel Sysplex*RACF*

developerWorks*DS8000*FICON*GDPS*

* Registered trademarks of IBM Corporation

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.

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.

GUARDIUM*HyperSwap*IBM*IBM (logo)*

Rational*Redbooks*IBM SmartCloud*Tivoli*

WebSphere*z13z13szEnterprise*

z/OS*zSecurez Systemsz/VM*

http://www.ibm.com/legal/us/en/copytrade.shtml

http://www.openstack.org/brand/openstack-trademark-policy


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

lessons learnt: creating a fiori app in eclipse accessing sap on

Documents