Cd168 (3)
1 like772 views
The document discusses building SAP Fiori-like user interfaces using SAPUI5, an HTML5-based UI development toolkit from SAP, covering topics such as SAPUI5 introductions and features, building SAP Fiori applications with SAPUI5, and hands-on exercises for creating SAP Fiori apps with SAPUI5.
Cd168 (3)
- 1. Frederic Berg, Bertram Ganz, Oliver Graeff, Thomas Marz, SAP AG October 2013 CD168 Building SAP Fiori-like UIs with SAPUI5
- 2. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 2 Disclaimer This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.
- 3. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 3 SAPUI5 Introduction SAPUI5 Overview, Model View Controller, a SAP Fiori Application (User Interfaces, Files & Architecture) What‘s new: Changes in SAPUI5 Runtime version 1.16 Exercise Preparation (live demo) Developing SAPUI5 applications with Eclipse and Google Chrome (Exercise 0: Getting Started) Building SAP Fiori-like UI with SAPUI5 in 10 hands-on Exercises 1 Resource Model > 2 Object Controls > 3 Formatter > 4 Search > 5 Split App & Shell > 6 Additional Device Adaptation > 7 Info Tab > 8 Approval Process > 9 Line Item > 10 Grouping Key Takeaways Appendix: SAP Fiori Applications, SAP NetWeaver User Interface Services References: Related Resources, Supportability & Security, SAP UX Explorer, Further Information Agenda
- 4. SAPUI5 Introduction SAPUI5 Overview, Model View Controller, SAP Fiori Application (User Interfaces, Files & Architecture)
- 5. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 5 UI development toolkit for HTML5 (SAPUI5) SAP’s HTML5 Toolkit for building lightweight business UIs on multiple platforms Key Features and Benefits Built with Leading Web Technologies jQuery OData OpenAJAX LESS D3.js ARIACSS3 Runs on Various SAP and Non-SAP Platforms SAP HANA XSSAP NetWeaver AS ABAP Open Source Platforms (testing) SAP HANA Cloud SAP NetWeaver AS Java / Portal SAP Mobile Platform (planned) HTML5 • Enterprise Readiness • Eclipse-Based Design Time • Openness and Flexibility• Fast Release Cycles • Unmatched Extensibility • Powerful Theming & Branding • Any Screen on Any Device • Cutting-Edge Controls Build on STANDARDSFoster INNOVATIONDelight USERS • Efficiency and Performance • User Interface Services • Well-known and easy to learn • Timeless SAP Data Consumption Read more: “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”: http://scn.sap.com/docs/DOC-31625
- 6. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 6 Basic Model-View-Controller Concept in SAPUI5 Views with sap. libraries Controllers Models JSON, XML or OData implementation interface implementationdata binding Views can be defined using • XML with HTML, mixed or standalone (sap.ui.core.mvc.XMLView) • JavaScript (sap.ui.core.mvc.JSView) • JSON (sap.ui.core.mvc.JSONView) • declarative HTML (sap.ui.core.mvc.HTMLView) Controllers • bound to a view or standalone • can also be used by multiple views Model: Data binding can be used on the views Read more: SAPUI5 Demo Kit Developer Guide SAPUI5 Runtime Programming & API Application Development Topics MVC https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/MVC.html
- 7. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 7 Phone DesktopTablet Master Page Detail Page sap.m.App Master Page Detail Page sap.m.SplitApp Master Page Detail Page sap.m.SplitApp SAP Fiori Application Details – User Interfaces
- 8. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 8 App ControllerApp View sap.m.App / sap.m.SplitApp Component.js Master Controller … Detail Controller Mock Model i18n Model util (Formatter.js) index.html Navigation Master View sap.m.Page Detail View trigger call call call call … SAP Fiori Application Details – Files & Architecture sap.m.Page Read more: SAPUI5 Demo Kit Developer Guide SAPUI5 for Mobile Best Practice https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/BestPractice.html
- 9. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 9 What‘s New: Changes in SAPUI5 version 1.16* • SAPUI5 Component replaces the Application.js (deprecated) read more: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Components.html • sap.m.IconTabBar replaces sap.me.TabContainer (deprecated) • sap.m.Table as separate control independent of sap.m.List • No more custom CSS for spacing * SAPUI5 version 1.16: part of UI Add-on 1.0 SP06 for SAP NetWeaver and applied to next wave of SAP Fiori applications
- 10. Exercise Preparation: Developing SAPUI5 Applications SAPUI5 Tools in Eclipse, Google Chrome browser Step-by-step description: see CD168 Excercises.docx > Exercise 0 – Getting Started
- 11. Building an SAP Fiori-like UI with SAPUI5 in 10 Exercises* Exc1 Resource Model > Exc2 Object Controls > Exc3 Formatter > Exc4 Search > Exc5 Split App & Shell > Exc6 Additional Device Adaption > Exc7 Info Tab > Exc8 Approval Process > Exc9 Line Item > Exc10 Grouping Step-by-step description: see CD168 Excercises.docx *based on UI development toolkit for HTML5 runtime version 1.16
- 12. Key Takeaways
- 13. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 13 UI development toolkit for HTML5 (aka HTML5) Key takeaways • HTML5 is a specification for building highly interactive and flexible UI`s • SAPUI5 bundles a UI control library and tooling for building delightful desktop and mobile UIs for consumer-grade user experience following web standards • SAPUI5 is your best choice when developing enterprise ready lightweight business applications in the SAP context running on various platforms • SAPUI5 is available, bundled with several platforms and products • SAP Fiori Apps are built with SAPUI5 and SAP NetWeaver UI Services • SAPUI5 opens up a broad range of opportunities for SAP customers
- 14. SAP Fiori Applications SAP Fiori approach and key criteria SAP NetWeaver User Interface Services For more details join sessions CD119, CD205, TEC149, TEC217
- 15. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 15 The SAP Fiori approach* Responsive Simple Impactful Coherent Instant Value All Sizes | Devices | Versions | Channels Focused on user experience outcomes over features and functions Renewed based on usage Assortment of apps that speak the same language Out of the box • Easy to adopt • Easy to adapt • Easy to deploy • Easy to introduce • Easy to grow *follows SAP UX strategy „RENEW most broadly used scenarios“
- 16. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 16 SAP Fiori Apps are built with SAPUI5 and SAP NetWeaver UI Services Key criteria for SAP Fiori-like applications I N S TA N T R E S P O N S I V E S I M P L E S A P U I 5
- 17. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 17 SAPUI5 meets key criteria for SAP Fiori-like applications Criteria Description INSTANT VALUE Easy to adopt and deploy: no upgrades, works on SAP releases with largest installed base and SAP HANA (cross-release, SAPUI5 also cross-platform). Little admin. Easy to adapt: theming and extensibility. Easy to introduce: no training RESPONSIVE UI designed for all device types (cross-device). UI adapts to device form factors. Use responsive patterns of SAPUI5 (SplitApp, DesktopShell, Object Header/List, Form) SIMPLE 1-1-3 principle: one user, one use case, three screens. Keep simple things simple: focus on user experience outcomes over features and functions. Make the important things really easy to use and learn. Little apps combined into a collection of functions (home screen) SAPUI5 SAPUI5 control library (for mobile and desktop), cross-device theme (SAP Blue Crystal) with UI theme designer for custom theming and branding, SAP NetWeaver User Interface Services
- 18. 18© 2013 SAP AG or an SAP affiliate company. All rights reserved. SAP Fiori Home Pages are built with SAP NetWeaver User Interface Services Personalize tile order Display tiles based on user role
- 19. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 19 SAP NetWeaver User Interface Services – Key Capabilites SAP Fiori Home Pages are built with SAP NetWeaver User Interface Services • Add enterprise qualities to your SAPUI5 application by providing service APIs that make application development easier Examples: navigation, launch pads, PFCG content, UI adaptations, building pages, authoring and content provisioning • Investment protection by integrating SAPUI5 applications with existing SAP UI technologies • Services available to SAPUI5 application as JavaScript and/or REST (OData) based APIs • Enable without disruptions in any AS ABAP release (higher than 7.0) via a non-modifiable NW UI add-on for SAP NetWeaver Client container (desktop/mobile) SAPUI5 User Interface Application CLIENT SAP NetWeaver AS ABAP 7.0-7.02/7.31 SP4 / 7.40 Application SERVER UIadd-onforSAP NetWeaver1.0 SAP NetWeaver User Interface Services Existing repository / functionality Application backend Application service Read more: “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”: http://scn.sap.com/docs/DOC-31625 Developer Guide: http://help.sap.com/nw-uiaddon#section3 Developer’s Guide: UI Add-on 1.0 SP04 for SAP NetWeaver (PDF)
- 20. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 20 SAP NetWeaver User Interface Services Documentation and Blogs Developer Guide: User Interface Add-on 1.0 for SAP NetWeaver Support Package Stack 03 (PDF) http://help.sap.com/nw-uiaddon#section3 JavaScript Services: client-side CHIPs in SAPUI5, Shell API http://help.sap.com/javadocs/ui-services/index.html OData Services: Launchpad Service (chapter 4) ABAP APIs: Launchpad Service API SCN Blog: Introducing the new UI Add-On for SAP NetWeaver: http://bit.ly/OkOkkq SCN Blog: Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5) Foster INNOVATION SAPUI5 Productivity Services: http://scn.sap.com/docs/DOC-31625
- 21. References SAPUI5 Related Resources, Supportability & Security, SAP UX Explorer, Further Information
- 22. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 22 SAPUI5 Related Resources Resource Link / Description SCN Space scn.sap.com/community/developer-center/front-end scn.sap.com/docs/DOC-31625 SCN blog ‘Get to know SAPUI5’ SAPUI5 Demo Kit sapui5.netweaver.ondemand.com/sdk/#content/Overview.html Overview, Developer Guide, Controls, API Reference, TestSuite Tool Update Sites tools.netweaver.ondemand.com/ SAPUI5 Tools and ABAP Team Provider saptools-saptools.netweaver.ondemand.com/juno/com/sap/ui5tp/updatesite/ SAP Online Help help.sap.com/nw-uiaddon UI Add-on for SAP NetWeaver AS ABAP see Developer’s Guide, Security Guide, incl. UI theme designer and UI Services SAP Fiori http://www54.sap.com/pc/tech/mobile/software/lob-apps/fiori/index.html highlights, solution brief, eBook and more … http://scn.sap.com/docs/DOC-4159 SCN Doc on “What is SAP Fiori”
- 23. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 23 SAPUI5 Supportability – Problem Message Handover If you need to send problem messages to SAP, use the following SAP component hierarchy names: SAP Component Hierarchy Name Description CA-UI5 SAPUI5 Core Framework and Libraries CA-UI5-MOB SAPUI5 Mobile Library CA-UI5-TOL SAPUI5 Tools including UI theme designer CA-UI2 UI Integration CA-UI2-INT-BE UI Integration - Backend Enablement: OData services, ABAP APIs CA-UI2-INT-FE UI Integration - Frontend Enablement: JavaScript services Source: SAP Online Help User Interface Add-on for SAP NetWeaver Admin Guide Supportability: http://help.sap.com/nw-uiaddon
- 24. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 24 SAPUI5 Security Information How to ensure the required security for SAPUI5 applications It is important to understand that SAPUI5 is a client side JavaScript library, so while the library itself is designed and tested to be secure, it can not ensure the application to be secure! • Application developers need to understand the security threats and actively prohibit exploitation. • Also the correct configuration of the HTTP server which is used is important. • User authentication, session handling, authorization handling or encryption are not part of SAPUI5 and need to be handled by the server side framework and/or custom code of the application For more Details read … • SAPUI5 Demo Kit Developer Guide General Information Security Information https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/SecurityGuide.html • Or as PDF doc: http://help.sap.com/nw-uiaddon#section4 Security Guide
- 25. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 25 New SAP UX Explorer Get more insight into the different ways to improve your user experience New online tool that is aimed to provide transparency in the area of user interfaces (UI) and user experience (UX) everybody is looking for. Answers questions like … • Which items of the SAP UX portfolio are really of INTEREST for me? • Are there RELATIONS to other items that I need to know? • Which of these items provide the VALUE I am searching for? • How can I start USING them? SCN Blog: http://bit.ly/15TC5UF SAP UX Explorer http://uxexplorer.hana.ondemand.com SAPUI5 page: http://bit.ly/1aw1JBL
- 26. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 26 Further Information Watch SAP TechEd Online www.sapteched.com/online SAP Public Web scn.sap.com/community/developer-center/front-end experience.sap.com, uxexplorer.hana.ondemand.com Related SAP TechEd Sessions CD110 Toolkit for SAPUI5 App Development (1h Lecture) CD119 Building Responsive SAPUI5 Applications Following the SAP Fiori Approach (1h Lecture) CD167 New User Interface Theme Designer (2h Hands-on) CD205 Add Enterprise Qualities to Your SAPUI5 Applications (1h Lecture) TEC149 SAP UX Strategy and UI Roadmap (1h Lecture) TEC217 SAP Fiori – Technology Behind the Scenes (1h Lecture) SAP Education and Certification Opportunities training.sap.com WDE300: Developing UIs using HTML5 Fundamentals WDE350: Developing UIs using HTML5 and SAPUI5
- 27. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 27 SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online Continue your SAP TechEd education after the event! SAP TechEd Virtual Hands-on Workshops Access hands-on workshops post-event Available January – March 2014 Complementary with your SAP TechEd registration SAP TechEd Online Access replays of keynotes, Demo Jam, SAP TechEd LIVE interviews, select lecture sessions, and more! View content only available online http://saptechedhandson.sap.com/ http://sapteched.com/online
- 28. Feedback Please complete your session evaluation for CD168. Thanks for attending this SAP TechEd session.
- 29. © 2013 SAP AG or an SAP affiliate company. All rights reserved. 29 © 2013 SAP AG or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.