2015 ASUG UX205-SAPUI5 NewFeaturesofThatYouAbsolutelyHavetoKnowAbout

run()
UX205 New Features of

SAPUI5 That You Absolutely
Have to Know About
Public
Speakers
Las Vegas, Oct 19 - 23
Barcelona, Nov 10 - 12
Stefan Beck
Tim Back
2015 SAP SE or an SAP affiliate company. All rights reserved.
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.
SAP contributes key elements of SAPUI5 to

Open Source community:
http://sap.github.io/openui5/
Public
UI Development Toolkit for HTML5 (SAPUI5)

Overview
CROSS DEVICE
responsive design
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
SAPUI5 Main Characteristics

Supports RIA like client-side features based on
JavaScript
Uses the jQuery library as a foundation
Supports the development of custom controls as an
extension to the standard offering
Provides full control of UI themes for customer
branding
Allows usage of own JavaScript and HTML
Fully supports SAP Product standards
Open AJAX compliant and can be used together
with/uses other standard JS libs
Platform independent
The development of SAPUI5 is not tied to any other
code lines thus enabling short shipment cycles
Public
Application CLIENT
Simplified SAPUI5 Architecture
Web Browser
SAP UI5 Runtime

and libraries
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
SAP HANA Extended

Application Services
(XS Engine)
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
Efficient Development With Smart SAP Fiori UIs

Adaptation
SAP Fiori UI
Runtime context:
role, locale,
device, variant
UI(5) Flexibility
User
Admin
Partner
Industry
Key user runtime adaptation
Efficiency
Flexibility
Development
End user personalization
Developer adaptation
SAP Fiori / SAPUI5

Coding
Freestyle
design
Hybrid
design
(breakouts)
Smart
design
at runtime
SAP Web IDE
Smart Controls / Smart Templates
SAPUI5 Controls
Business data
(Gateway / OData)
Semantic meta data

(OData annotations)
This is the current state of planning and
Public
may be changed by
SAP at any11time.
Improvements in
Development Efficiency
Public
What did SAPUI5 Application Development mean up to now?

There was a lot of code
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
SAP Web IDE the highly efficient development tool
Wizard templates for creating simple and

complex SAP Fiori and SAPUI5 apps
Code editor with JS, XML and SAPUI5specific code completion
WYSIWYG Editor
Collaborative development and project
persistency
Public
14
UI5 Inspector: SAPUI5-tailored control explorer in Chrome DevTools

The challenge
Figure out the structure and building
blocks (controls, layout) of an
fiori/SAPUI5 app
Explore controls properties, events and
data binding information in one place
SAPUI5
Control Tree
Standard DOM Tree:

comes a bit cluttered
The solution: UI5 Inspector

Add-On plugin in Chromes DevTools
environment (F12)
Open source (link) and free : get it from
Google WebStore (link)
Provides essential information and allows
for on-the-spot changes
Development, support and debugging
made much easier
Public
15
Freestyle Templates
Adaptation
SAP Fiori UI
Development
SAP Fiori / SAPUI5

Coding
SAP Web IDE
Freestyle
design
SAPUI5 Controls
Business data
(Gateway / OData)

Public
may be changed by
SAP at any16time.
New Freestyle Templates

State of the art UI5 freestyle applications
as templates in WebIDE
Master Detail Applications
Worklists
Include best practices
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
Smart Controls, XML templating, Smart Templates

Adaptation
SAP Fiori UI
Development
Hybrid
design
(breakouts
Smart
design
at runtime
SAP Web IDE
Smart Controls / Smart Templates

SAPUI5 Controls
Business data
(Gateway / OData)
Semantic meta data

(OData annotations
Public
may be changed by
SAP at any18time.
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
Public
21
SmartFilterBar with Annotations
Annotations.xml
<EntityType Name="Item" sap:service-schema-version="1" sap:service-version="1"
sap:label="Item" sap:semantics="aggregate" sap:content-version="1">
<Property Name="CompanyCode" Type="Edm.String" MaxLength="4"

sap:text="CompanyName" sap:label="Company Code" sap:creatable="false"
sap:required-in-filter="true"/>
<Property Name="FiscalYear" Type="Edm.String" MaxLength="4"
sap:label="Fiscal Year" sap:creatable="false" sap:required-infilter="true"/>
view.xml
<smartFilterBar:SmartFilterBar
id="smartFilterBar"
entityType="Item"
x-persistencyKey=
SmartFilter_Persist"
/>
</EntityType>
Public
22
OData Annotations: Value Lists

<Collection>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterInOut">
<PropertyValue Property="LocalDataProperty" PropertyPath="CompanyCode"/>
<PropertyValue Property="ValueListProperty" String="BUKRS"/>
</Record>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="BUTXT"/>
</Record>
<PropertyValue Property="ValueListProperty" String="ORT01"/>
</Record>
<PropertyValue Property="ValueListProperty" String="WAERS"/>
</Record>
</Collection>
Public
23
Developer Efficiency
Reduced XML size
Reduced JS code size
Public
24
Smart Control success story

Achievements
Using Smart Controls

reduced the code in (XML-)View-description files up to 90%
(e.g. more than 2500 lines less for Customer Line Items, Vendor Line Items application)
gives the developers a rich set of standard functionality like e.g. Variants, Personalization Dialogs and Export to Excel
reduced the JavaScript controller code (~500 lines per app)
unified the user experience as they provide built-in features instead of having them inside the individual apps
Using Smart Controls indirectly has

improved the readiness for central changes
Improved the code quality
Public
25
XML Template with Annotations

<Annotation
Term="com.sap.vocabularies.UI.v1.Identification">
<Collection>
<Record Type="com.sap.vocabularies.UI.v1.DataField">
<PropertyValue
Property="Label" String="Your customer"/>
<PropertyValue
<sfo:SmartForm editable="true" title="{path:
'meta>com.sap.vocabularies.UI.v1.HeaderInfo/TypeName', formatter:
'sap.ui.model.odata.AnnotationHelper.format'}
<template:if test="{meta>com.sap.vocabularies.UI.v1.Identification}">
<sfo:Group label="Identification">
<template:repeat
list="{meta>com.sap.vocabularies.UI.v1.Identification}">
<sfo:GroupElement label="{path: 'meta>Label', formatter:
'sap.ui.model.odata.AnnotationHelper.format'}">
<sfi:SmartField value="{path: 'meta>Value', formatter:
'sap.ui.model.odata.AnnotationHelper.simplePath'}"/>
</sfo:GroupElement>
</template:repeat>
</sfo:Group>
</template:if>
</sfo:SmartForm>
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)
(incl. Routing, MasterDetail,

FullScreen app structures,
XML templating etc.)
Smart FilterBar
Smart Table
Re-Use Controllers
Annotations
Public
28
Smart Template-based Application
This application which consists of a worklist and an object page is completely based on generic code
and an OData service with annotations
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>
<Annotation Term="UI.DataPoint" Qualifier="ProductCategory">

<Record>
<PropertyValue Property="Title" String="Category"/>
<PropertyValue Property="Value" Path="ProductCategory"/>
</Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="ProductPrice">
<Record>
<PropertyValue Property="Title" String="Price"/>
<PropertyValue Property="Value" Path="Price" />
</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>
</Collection>
</PropertyValue>
</Record>
<PropertyValue Property="Label" String=Product Description"/>
<PropertyValue Property="Target" AnnotationPath=..."/>
</Record>
String="Supplier"/>
<PropertyValue Property="Target" AnnotationPath="..."/>

</Record> ...
Public
31
Annotations
Object Page
<Annotation Term="UI.Facets">
<Collection>
<Record Type="UI.CollectionFacet">
<PropertyValue Property="Label" String="Product Information"/>
<PropertyValue Property="Facets">
<Collection>
<PropertyValue Property="Label" String="..."/>
<PropertyValue Property="Target"
AnnotationPath="@UI.FieldGroup#GeneralInformation"/>
</Record>
</Collection>
</PropertyValue>
</Record>
<PropertyValue Property="Label" String=Product Description"/>
AnnotationPath=" to_ProductText/@UI.LineItem"/>
</Record>
String="Supplier"/>
AnnotationPath="to_Supplier/@UI.Identification"/>
</Record> ...
Public
32
UI Flexibility / Runtime Adaptation

for Business Experts/Key Users
Public
UI Flexibility and Runtime Adaption

SAP Fiori UI
Runtime context:
role, locale,
device, variant
UI(5) Flexibility
User
Admin
Partner
Industry

Development
Adaptation
SAP
Web IDE

Public
may be changed by
SAP at any34time.
Personas: End User vs. Key User vs. Developer
End User
I personalize my apps
Key User
I adapt the apps for my team
I modify and create apps for my company
Public
35
Persona: Key User
Knows all about the companys business
Is responsible for one or more team(s)
Wants to make UI adaptations to improve business processes, facilitate access to information, and,
therefore, increase the efficiency of his/her team(s)
Wants to intuitively adapt the UI of an SAPUI5 application without deep IT or development

knowledge
Does not want to involve Consultants, IT Specialists, or Developers
Public
36
Runtime Adaptation Demo
Link to Demo (to be opened in Chrome)
Public
37
Runtime context:
role, locale, device, variant,
User
Admin
Partner
Industry
UI(5) Flexibility: Layering
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
Merge of the test

deltas to the
company-wide
model
Key-User Adaptation
Partner Layer
Add-Ons
Vendor Layer
Semantic Change
Generation
Semantic Change
Alll deltas are

merged to the base
file
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
Intuitively adapt the UIs of SAPUI5/SAP Fiori apps in a code-free way:

Change an application's layout via drag and drop
Add new fields to the UI that your service provides
Create a new field in the OData service
Public
39
Straightforward Interaction Flow

Open App
A
Key user
launches app
via FLP
Switch to RTA
Change UI
Publish and Exit RTA
Back to FLP
A*
A*
Key user is
usually working
herself with this
app
Key user wants

to make UI
changes for
e.g. optimizing
her teams
workflow
Key user saves

UI changes
Key User sees

UI changes
within running
app
Key user wants

to switch to
RTA mode for
making UI
changes
Key user has
special access
rights for
switching to
RTA mode
Key user writes

notification
message about
UI changes for
the team
Key user is
publishing UI
changes to the
team
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
Runtime Adaptation Technical Details

SAPUI5 library SAPUI5 version 1.30:
Overlay mechanism to manipulate SAPUI5 controls in the running application
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
Runtime Adaptation Roadmap

Immediate Next Steps
Visual design
Add further functionality: Add (predefined) groups, Change labels, Reset to default
Future Steps
Adaptation of other Smart Controls (SmartTable, SmartFilterBar)

Enablement of non-smart controls (ObjectHeader, Form, Table)
Context-based adaptations: Adapt for other contexts (locale, language, etc.)
Versioning/Sharing/Publishing
Collect further customer/stakeholder feedback to adapt roadmap
Public
42
SAPUI5 Noteworthy
Public
UI Development Toolkit for HTML5 (SAPUI5)

Summary
CROSS DEVICE
responsive design
SAP UX STRATEGY
consumer-grade UIs
(e.g. SAP Fiori Apps)
DESKTOP
USER
EXPERIENCE
MOBILE
UI
Development
Toolkit for HTML5
(SAPUI5)
Development Tools
Wizard Templates & Tutorials

Web based IDE
WYSIWYG & Theming Editors
OPA Test Framework
Support Tools
Less code,
faster development
SAP/
NON-SAP
PLATFORMS
CROSS
PLATFORM
BACKEND
ACCESS /
ODATA
Design Principles and Guidelines (link)

Smart Templates & Controls
Flexibility via Design and Runtime
Adaptation
Red Dot Award for Fiori 2.0 Design
TIMELESS SOFTWARE
SAP Gateway
OData v.2 w/ Annotations

AppDescriptor
Multi-version support
Smoother integration, improved LM

Public
44
SAPUI5 Noteworthy
UI5 multi version support via HCP and Akamai: SCN
Islamic calendar: Explored App
Walkthrough tutorials: DemoKit
Messaging concept: DemoKit
App descriptor: DemoKit
Reference apps: SCN
Public
45
SAP TechEd Online

Continue your SAP TechEd education after the event!
Access replays of keynotes, Demo Jam, SAP TechEd live interviews, select lecture sessions, and more!
Hands-on replays
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)
SAP Public Web

http://scn.sap.com/community/developer-center/front-end - SCNs SAPUI5 Developer Center
http://openui5.org/ - OpenUI5 open source site
SAP Education and Certification Opportunities

https://open.sap.com/courses/fiux1 - Build Your Own SAP Fiori App in the Cloud
https://open.sap.com/courses/uxn2 - Creating Business Value with User Experience
http://help.sap.com/fiori - SAP Fiori for SAP Business Suite
Watch SAP TechEd Online

www.sapteched.com/online
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
Public
49

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company 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.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
Public
50

2015 ASUG UX205-SAPUI5 NewFeaturesofThatYouAbsolutelyHavetoKnowAbout

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

2015 ASUG UX205-SAPUI5 NewFeaturesofThatYouAbsolutelyHavetoKnowAbout

Caricato da

Copyright:

Formati disponibili

run()

UX205 New Features of

2015 SAP SE or an SAP affiliate company. All rights reserved.

2015 SAP SE or an SAP affiliate company. All rights reserved.

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP contributes key elements of SAPUI5 to

UI Development Toolkit for HTML5 (SAPUI5)

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAPUI5 Main Characteristics

2015 SAP SE or an SAP affiliate company. All rights reserved.

Simplified SAPUI5 Architecture

SAP UI5 Runtime

SAP HANA Extended

2015 SAP SE or an SAP affiliate company. All rights reserved.

Efficient Development With Smart SAP Fiori UIs

Key user runtime adaptation

End user personalization

SAP Fiori / SAPUI5

SAP Web IDE

Smart Controls / Smart Templates

Semantic meta data

What did SAPUI5 Application Development mean up to now?

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Web IDE the highly efficient development tool

Wizard templates for creating simple and

2015 SAP SE or an SAP affiliate company. All rights reserved.

UI5 Inspector: SAPUI5-tailored control explorer in Chrome DevTools

Standard DOM Tree:

The solution: UI5 Inspector

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Fiori / SAPUI5

SAP Web IDE

This is the current state of planning and

New Freestyle Templates

Include best practices

2015 SAP SE or an SAP affiliate company. All rights reserved.

Smart Controls, XML templating, Smart Templates

SAP Web IDE

Smart Controls / Smart Templates

Semantic meta data

2015 SAP SE or an SAP affiliate company. All rights reserved.

2015 SAP SE or an SAP affiliate company. All rights reserved.

SmartFilterBar with Annotations

<Property Name="CompanyCode" Type="Edm.String" MaxLength="4"

2015 SAP SE or an SAP affiliate company. All rights reserved.

OData Annotations: Value Lists

2015 SAP SE or an SAP affiliate company. All rights reserved.

Reduced XML size

Reduced JS code size

2015 SAP SE or an SAP affiliate company. All rights reserved.

Smart Control success story

Using Smart Controls

Using Smart Controls indirectly has

2015 SAP SE or an SAP affiliate company. All rights reserved.

XML Template with Annotations

2015 SAP SE or an SAP affiliate company. All rights reserved.

(incl. Routing, MasterDetail,

Smart Template-based Application

<Annotation Term="UI.DataPoint" Qualifier="ProductCategory">

2015 SAP SE or an SAP affiliate company. All rights reserved.

<PropertyValue Property="Target" AnnotationPath="..."/>

2015 SAP SE or an SAP affiliate company. All rights reserved.

2015 SAP SE or an SAP affiliate company. All rights reserved.