Frederic Berg, Bertram Ganz, Oliver Graeff, Thomas Marz, SAP AG
October 2013
CD168
Building SAP Fiori-like UIs with SAPUI5
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.
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)
Whats 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
SAPUI5 Introduction SAPUI5 Overview, Model View Controller,
SAP Fiori Application (User Interfaces, Files & Architecture)
2013 SAP AG or an SAP affiliate company. All rights reserved. 5
UI development toolkit for HTML5 (SAPUI5) SAPs 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 ARIA CSS3
Runs on Various SAP and Non-SAP Platforms
SAP HANA XS SAP 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 STANDARDS Foster INNOVATION Delight 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
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
implementation data 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
2013 SAP AG or an SAP affiliate company. All rights reserved. 7
Phone Desktop Tablet
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
2013 SAP AG or an SAP affiliate company. All rights reserved. 8
App Controller App 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
2013 SAP AG or an SAP affiliate company. All rights reserved. 9
Whats 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
Exercise Preparation:
Developing SAPUI5 Applications SAPUI5 Tools in Eclipse, Google Chrome browser
Step-by-step description: see CD168 Excercises.docx > Exercise 0 Getting Started
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
Key Takeaways
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
SAP Fiori Applications SAP Fiori approach and key criteria
SAP NetWeaver User Interface Services
For more details join sessions CD119, CD205, TEC149, TEC217
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
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
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 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
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
Applic
ation
CLIE
NT
SAP NetWeaver AS ABAP
7.0-7.02/7.31 SP4 / 7.40
Applic
ation
SE
RV
ER
UI add-o
n for
SA
P
NetW
eaver
1.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 Developers Guide: UI Add-on 1.0 SP04 for SAP NetWeaver (PDF)
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
References SAPUI5 Related Resources, Supportability & Security,
SAP UX Explorer, Further Information
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 Developers 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
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
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
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
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
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
Feedback Please complete your session evaluation for CD168.
Thanks for attending this SAP TechEd session.
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.