testt tst

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.