Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Z sap boe-2016-techws-04_vs_fiori-app-with-eclipseluna-accessing-zsap-system

737 views

Published on

SAP FIORI

Published in: Education
  • Be the first to comment

Z sap boe-2016-techws-04_vs_fiori-app-with-eclipseluna-accessing-zsap-system

  1. 1. 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
  2. 2. © 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
  3. 3. © 2016 IBM Corporation 3 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
  4. 4. © 2016 IBM Corporation 4 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.
  5. 5. © 2016 IBM Corporation 5 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).
  6. 6. © 2016 IBM Corporation 6 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
  7. 7. © 2016 IBM Corporation 7 SAP Fiori App Types Only transactional Fiori Apps run currently on Any DB Option: HANA as a sidecar
  8. 8. © 2016 IBM Corporation 8 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.
  9. 9. © 2016 IBM Corporation 9 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
  10. 10. © 2016 IBM Corporation 10 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
  11. 11. © 2016 IBM Corporation 11 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
  12. 12. © 2016 IBM Corporation 12 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
  13. 13. © 2016 IBM Corporation 13 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)
  14. 14. © 2016 IBM Corporation 14 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
  15. 15. © 2016 IBM Corporation 15 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>
  16. 16. © 2016 IBM Corporation 16 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/
  17. 17. © 2016 IBM Corporation 17 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
  18. 18. © 2016 IBM Corporation 18 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
  19. 19. © 2016 IBM Corporation 19 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.
  20. 20. 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:UsersIBM_ADMINworkspace “ (old TP "D:tempeclipseworkspaceVSFirstBMDemoApp“ 7) Select FioriLikePOApproval project (old TP: SAPUI5POApproval) and right click -> Run As -> Web App Preview
  21. 21. © 2016 IBM Corporation 21 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
  22. 22. © 2016 IBM Corporation 22 Thank you Volker Schoelles volker_schoelles@de.ibm.com Questions
  23. 23. Backup slides
  24. 24. © 2016 IBM Corporation 24 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
  25. 25. © 2016 IBM Corporation 25 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
  26. 26. © 2016 IBM Corporation 26 MobilFirstPlatform
  27. 27. © 2016 IBM Corporation 27 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 Drop 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
  28. 28. © 2016 IBM Corporation 28 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
  29. 29. © 2016 IBM Corporation 29 Trademarks The 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* z13 z13s zEnterprise* z/OS* zSecure z Systems z/VM*
  30. 30. © 2016 IBM Corporation 30 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.

×