Professional Documents
Culture Documents
Public
Speakers
Las Vegas, Oct 19 - 23
Barcelona, Nov 10 - 12
Stefan Beck
Tim Back
Public
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.
Public
Agenda
SAPUI5 Overview
Improvements in SAPUI5 Development Efficiency
UI Flexibility / Runtime Adaptation for Business Experts & Key Users
Public
SAPUI5 Overview
Public
What is SAPUI5?
Summary
The UI Development Toolkit for HTML5 (SAPUI5) is an extensible JavaScript-based HTML5 control
rendering library for business applications that run in the browser.
Public
DESKTOP
USER
EXPERIENCE
SAP UX STRATEGY
consumer-grade UIs
(e.g. SAP Fiori Apps)
MOBILE
UI
Development
Toolkit for HTML5
(SAPUI5)
Design-time Tools
SAPUI5 Tools in Eclipse,
Web based IDE
UI theme designer
CROSS
PLATFORM
SAP/
NON-SAP
PLATFORMS
BACKEND
ACCESS /
ODATA
TIMELESS SOFTWARE
SAP Gateway
Public
Public
Application CLIENT
Web Browser
Views with
sap.ui.commons
lib
Views with
sap.m lib
Modells
JSON, XML or
OData
Controllers
Application
SERVER
OData
SAP NetWeaver
AS ABAP
SAP NetWeaver
AS Java
Resource Handler
Resource Handler
SAP HANA
Cloud
Resource Handler
JS
JS
JS
JS
JS
JS
JS
JS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
SAP NetWeaver
Gateway
SAP Backend
DB
Public
Improvements in Development
Efficiency and Adaptability
Public
SAP Fiori UI
Runtime context:
role, locale,
device, variant
UI(5) Flexibility
User
Admin
Partner
Industry
Efficiency
Flexibility
Development
Developer adaptation
Freestyle
design
Hybrid
design
(breakouts)
Smart
design
at runtime
SAPUI5 Controls
Business data
(Gateway / OData)
2015 SAP SE or an SAP affiliate company. All rights reserved.
Improvements in
Development Efficiency
Public
for views
for controllers
for CSS adaptations
that had to be manually
written in tools that did not
have a lot of built-in support
for JavaScript and in particular
for UI5 assets
Public
13
Public
14
SAPUI5
Control Tree
Public
15
Freestyle Templates
Adaptation
SAP Fiori UI
End user personalization
Key user runtime adaptation
Development
Developer adaptation
Freestyle
design
SAPUI5 Controls
Business data
(Gateway / OData)
2015 SAP SE or an SAP affiliate company. All rights reserved.
AppDescriptor
Controls that adhere to responsive design
Internationalization files
Routning for inner app navigation
App state in bookmarkable URLs
Local testing via Quint and OPA5 test
Public
17
SAP Fiori UI
End user personalization
Key user runtime adaptation
Development
Developer adaptation
Hybrid
design
(breakouts
Smart
design
at runtime
Business data
(Gateway / OData)
2015 SAP SE or an SAP affiliate company. All rights reserved.
Smart Controls
SmartControls
Consume OData annotations like data type, max. length, F4 help, groups, etc. and customize the control
accordingly
Smart FilterBar and Table were introduced with UI5 1.28
Field, Input, Form are available in with UI5 1.30
Public
19
Smart Controls
Smart FilterBar
Smart Table
Public
20
OData Annotations
sap:label
sap:creatable
sap:updatable
sap:deletable
sap:display-format
sap:semantics
sap:field-control
http://scn.sap.com/docs/DOC-44986
2015 SAP SE or an SAP affiliate company. All rights reserved.
Public
21
Annotations.xml
<EntityType Name="Item" sap:service-schema-version="1" sap:service-version="1"
sap:label="Item" sap:semantics="aggregate" sap:content-version="1">
view.xml
<smartFilterBar:SmartFilterBar
id="smartFilterBar"
entityType="Item"
x-persistencyKey=
SmartFilter_Persist"
/>
</EntityType>
Public
22
Public
23
Developer Efficiency
Public
24
Public
25
Property="Value" Path="CustomerAccountName"/>
</Record>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue
Property="Label" String="Vendor"/>
<PropertyValue
Property="Value" Path="CustomerVendorAccount"/>
</Record>
</Collection>
</Annotation>
Public
26
Smart Templates
The decisive step to a professional UI development efficiency is
Using Smart Templates that
Are a combination of all previous assets being
SAP Web IDE application templates executed at design time
Smart Controls
XML templates executed at run- or at design time
Extended via
Re-usable assets like application- or transaction controller
Floorplan like application fragments (e.g. Master / Detail, List / Report or Object Page)
Floorplan specific re-use controllers (e.g. needed for routing / navigation)
Important to be mentioned: UI Flexibility for modification free adaptations still sits on top
Public
27
Smart Templates
WebIDE
Template
Configuration
SAPUI5
Smart Template
Application
Custom
Views (e.g.
using XML
templating)
Smart FilterBar
Smart Table
Re-Use Controllers
Annotations
2015 SAP SE or an SAP affiliate company. All rights reserved.
Public
28
This application which consists of a worklist and an object page is completely based on generic code
and an OData service with annotations
2015 SAP SE or an SAP affiliate company. All rights reserved.
Public
29
Annotations
Object Page
<Annotation Term="UI.HeaderInfo">
<Record>
<PropertyValue Property="TypeName String="Product"/>
<PropertyValue Property="ImageUrl" Path="ProductPictureURL"/>
<PropertyValue Property="Title">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Product_Text"/>
</Record>
</PropertyValue>
<PropertyValue Property="Description">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Product"/>
</Record>
</PropertyValue>
</Record>
</Annotation>
Public
30
Annotations
Object Page
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.CollectionFacet">
<PropertyValue Property="Label" String="Product Information"/>
<PropertyValue Property="Facets">
<Collection>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label"
String="General Information"/>
<PropertyValue Property="Target" AnnotationPath="..."/>
</Record>
<Record Type="UI.ReferenceFacet">...</Record>
<Record Type="UI.ReferenceFacet">...</Record>
</Collection>
</PropertyValue>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label" String=Product Description"/>
<PropertyValue Property="Target" AnnotationPath=..."/>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label"
String="Supplier"/>
Public
31
Annotations
Object Page
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.CollectionFacet">
<PropertyValue Property="Label" String="Product Information"/>
<PropertyValue Property="Facets">
<Collection>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label" String="..."/>
<PropertyValue Property="Target"
AnnotationPath="@UI.FieldGroup#GeneralInformation"/>
</Record>
<Record Type="UI.ReferenceFacet">...</Record>
<Record Type="UI.ReferenceFacet">...</Record>
</Collection>
</PropertyValue>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label" String=Product Description"/>
<PropertyValue Property="Target"
AnnotationPath=" to_ProductText/@UI.LineItem"/>
</Record>
<Record Type="UI.ReferenceFacet">
<PropertyValue Property="Label"
String="Supplier"/>
<PropertyValue Property="Target"
AnnotationPath="to_Supplier/@UI.Identification"/>
</Record> ...
Public
32
Public
UI(5) Flexibility
User
Admin
Partner
Industry
Development
Adaptation
Developer adaptation
SAP
Web IDE
End User
I personalize my apps
Key User
I adapt the apps for my team
Public
35
Wants to make UI adaptations to improve business processes, facilitate access to information, and,
therefore, increase the efficiency of his/her team(s)
Public
36
Public
37
Runtime context:
role, locale, device, variant,
User
Admin
Partner
Industry
End User
Pers Layer
Semantic Change
Apply
End-User Personalization
Semantic Change
On-the-fly merge
to the company
wide-model
Test Layer
Semantic Change
Runtime
model
Adaptation Mode
Semantic Change
Customer Layer
Semantic Change
Generation
Semantic Change
Key-User Adaptation
Partner Layer
Add-Ons
Vendor Layer
Semantic Change
Generation
Semantic Change
Semantic Change
Industry or Globalization
Vendor Layer
Base Application File
Companywide model
Adaptation
Mode
model
Key User
SAP
defined
model
38
Assumptions
Key users are empowered to
Public
39
A
Key user
launches app
via FLP
Switch to RTA
Change UI
Back to FLP
A*
A*
Key user is
usually working
herself with this
app
Team sees UI
changes when
relaunching
app
A
In FLP the app
tile gets visual
hint for
indicating UI
changes
Launching app
will show
notification
about UI
changes on
first screen
Public
40
FLP plugin:
RTA available for applications that are opened by a key user within the FLP
Prerequisite: Authorization role assigned (SAP_UI_FLEX_KEY_USER)
RTA will be available for UI_AddOn v2.0 SP00 for 7.31+ Fiori systems
Public
41
Future Steps
Public
42
SAPUI5 Noteworthy
Public
SAP UX STRATEGY
consumer-grade UIs
(e.g. SAP Fiori Apps)
DESKTOP
USER
EXPERIENCE
MOBILE
UI
Development
Toolkit for HTML5
(SAPUI5)
Development Tools
Less code,
faster development
SAP/
NON-SAP
PLATFORMS
CROSS
PLATFORM
2015 SAP SE or an SAP affiliate company. All rights reserved.
BACKEND
ACCESS /
ODATA
TIMELESS SOFTWARE
SAP Gateway
Multi-version support
44
SAPUI5 Noteworthy
Public
45
http://sapteched.com/online
Public
46
Further Information
Related SAP TechEd sessions:
UX113 - Applying UI Theme Designer to SAP Fiori and SAP NetWeaver Business Client (1hr Lecture)
UX110 - Bringing Visual Applications into SAP Fiori (2hrs Hands-OnWorkshop)
UX600 - Custom Apps on SAP Web IDE and SAP Fiori Launchpad on SAP Enterprise Portal (1hr Lecture)
UX203 - Implementing SAP Fiori in the Cloud (1hr Lecture)
UX262 - Building SAPUI5 Applications using SAP Web IDE (4hrs Hands-On Workshop)
Public
47
Feedback
Please complete your session evaluation for
UX205
2015
2015
SAP
SAP
SESE
oror
anan
SAP
SAP
affiliate
affiliate
company.
company.
AllAll
rights
rights
reserved.
reserved.
Public
4848
Thank you
Contact information:
stefan.beck@sap.com
tim.back@sap.com
2015 SAP SE or an SAP affiliate company. All rights reserved.
Public
49
Public
50