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 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.

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

Agenda

SAPUI5 Overview
Improvements in SAPUI5 Development Efficiency
UI Flexibility / Runtime Adaptation for Business Experts & Key Users

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

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/

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

UI Development Toolkit for HTML5 (SAPUI5)
Overview

CROSS DEVICE SAP UX STRATEGY

responsive design consumer-grade UIs
DESKTOP USER (e.g. SAP Fiori Apps)
EXPERIENCE
MOBILE
UI
Design-time Tools Development
SAPUI5 Tools in Eclipse, Toolkit for HTML5
Web based IDE (SAPUI5)
UI theme designer
SAP/
NON-SAP BACKEND
PLATFORMS ACCESS /
CROSS ODATA TIMELESS SOFTWARE
PLATFORM SAP Gateway

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

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

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

Simplified SAPUI5 Architecture
Application CLIENT

Web Browser
SAP UI5 Runtime Views with Modells
and libraries Views with
sap.m lib (sap.ui.commons
lib
) JSON, XML or
OData

Controllers

OData
Application

SAP NetWeaver SAP NetWeaver SAP HANA SAP HANA Extended

SAP NetWeaver
SERVER

AS ABAP AS Java Cloud Application Services

Gateway
(XS Engine)
Resource Handler Resource Handler Resource Handler

JS JS JS JS JS JS JS JS
CSS CSS CSS CSS CSS CSS CSS CSS SAP Backend DB

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

Improvements in Development
Efficiency and Adaptability

Public
 Efficient Development With Smart SAP Fiori UIs
SAP Fiori UI
Adaptation

User End user personalization

Runtime context: Admin
role, locale, UI(5) Flexibility Partner Key user runtime adaptation
device, variant Industry

Flexibility Efficiency
Developer adaptation

SAP Fiori / SAPUI5

Development

Coding
Hybrid Smart SAP Web IDE
design design
(breakouts) at runtime
Freestyle
design Smart Controls / Smart Templates

SAPUI5 Controls

Business data Semantic meta data

(Gateway / OData) (OData annotations)
This is the current state of planning and
2015 SAP SE or an SAP affiliate company. All rights reserved. may be changed by SAP at any11time.
Public
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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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 SAPUI5-

specific code completion

WYSIWYG Editor

Collaborative development and project

persistency

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

UI5 Inspector: SAPUI5-tailored control explorer in Chrome DevTools

The challenge
Figure out the structure and building
blocks (controls, layout) of an SAPUI5
fiori/SAPUI5 app Control Tree
Explore controls properties, events and
data binding information in one place
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

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

 Freestyle Templates
SAP Fiori UI
Adaptation

End user personalization

Key user runtime adaptation

Developer adaptation

SAP Fiori / SAPUI5

Development

Coding
SAP Web IDE

Freestyle
design
SAPUI5 Controls

Business data
(Gateway / OData)
This is the current state of planning and
2015 SAP SE or an SAP affiliate company. All rights reserved. may be changed by SAP at any16time.
Public
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

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

Smart Controls, XML templating, Smart Templates
SAP Fiori UI
Adaptation

End user personalization

Key user runtime adaptation

Developer adaptation
Development

Hybrid Smart SAP Web IDE

design design
(breakouts at runtime

Smart Controls / Smart Templates

SAPUI5 Controls

Business data Semantic meta data

(Gateway / OData) (OData annotations
This is the current state of planning and
2015 SAP SE or an SAP affiliate company. All rights reserved. may be changed by SAP at any18time.
Public
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

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

Smart Controls

Smart FilterBar

Smart Table

2015 SAP SE or an SAP affiliate company. All rights reserved. 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
SmartFilterBar with Annotations

Annotations.xml view.xml
<EntityType Name="Item" sap:service-schema-version="1" sap:service-version="1" <smartFilterBar:SmartFilterBar
sap:label="Item" sap:semantics="aggregate" sap:content-version="1">
id="smartFilterBar"

<Property Name="CompanyCode" Type="Edm.String" MaxLength="4" entityType="Item"
sap:text="CompanyName" sap:label="Company Code" sap:creatable="false"
x-persistencyKey=
sap:required-in-filter="true"/>
SmartFilter_Persist"
<Property Name="FiscalYear" Type="Edm.String" MaxLength="4"
/>
sap:label="Fiscal Year" sap:creatable="false" sap:required-in-
filter="true"/>

</EntityType>

2015 SAP SE or an SAP affiliate company. All rights reserved. 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>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="ORT01"/>
</Record>
<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
<PropertyValue Property="ValueListProperty" String="WAERS"/>
</Record>
</Collection>

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

Developer Efficiency

Reduced XML size

Reduced JS code size

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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
Property="Value" Path="CustomerAccountName"/>
<sfo:SmartForm editable="true" title="{path:
'meta>com.sap.vocabularies.UI.v1.HeaderInfo/TypeName', formatter: </Record>
'sap.ui.model.odata.AnnotationHelper.format'} <Record Type="com.sap.vocabularies.UI.v1.DataField">
<template:if test="{meta>com.sap.vocabularies.UI.v1.Identification}">
<sfo:Group label="Identification"> <PropertyValue
<template:repeat Property="Label" String="Vendor"/>
list="{meta>com.sap.vocabularies.UI.v1.Identification}">
<sfo:GroupElement label="{path: 'meta>Label', formatter: <PropertyValue
'sap.ui.model.odata.AnnotationHelper.format'}"> Property="Value" Path="CustomerVendorAccount"/>
<sfi:SmartField value="{path: 'meta>Value', formatter:
'sap.ui.model.odata.AnnotationHelper.simplePath'}"/> </Record>
</sfo:GroupElement>
</template:repeat>
</Collection>
</sfo:Group>
</template:if> </Annotation>
</sfo:SmartForm>

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

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

Smart Templates

WebIDE
Smart Template Application
(incl. Routing, MasterDetail, Custom
Template Views (e.g.
Configuration FullScreen app structures,
XML templating etc.) using XML
templating)

SAPUI5
Smart FilterBar Smart Table

Re-Use Controllers

Annotations

2015 SAP SE or an SAP affiliate company. All rights reserved. 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
2015 SAP SE or an SAP affiliate company. All rights reserved. Public 29
 Annotations
<Annotation Term="UI.HeaderInfo">

Object Page <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>

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

 Annotations
<Annotation Term="UI.Facets">

Object Page <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"/>
<PropertyValue Property="Target" AnnotationPath="..."/>
</Record> ...

2015 SAP SE or an SAP affiliate company. All rights reserved. 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> ...

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

UI Flexibility / Runtime Adaptation
for Business Experts/Key Users

Public
UI Flexibility and Runtime Adaption
SAP Fiori UI
User End user personalization
Runtime context: Admin
role, locale, UI(5) Flexibility Partner Key user runtime adaptation
device, variant Industry

Developer adaptation
Development

SAP Web IDE

Adaptation

This is the current state of planning and

2015 SAP SE or an SAP affiliate company. All rights reserved. may be changed by SAP at any34time.
Public
Personas: End User vs. Key User vs. Developer

End User Key User

I personalize my apps I adapt the apps for my team I modify and create apps for my company

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

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

Runtime Adaptation Demo

Link to Demo (to be opened in Chrome)

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

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

End User
Pers Layer Semantic Change
Apply
End-User Personalization
Runtime
Semantic Change On-the-fly merge
to the company model
Test Layer Semantic Change wide-model
Adaptation Mode
Semantic Change

Customer Layer Semantic Change

Key-User Adaptation Generation Adaptation
Semantic Change Merge of the test
Mode
deltas to the model
Partner Layer Semantic Change
Generation Company-
company-wide
model
Add-Ons
Semantic Change Alll deltas are wide model
merged to the base
Vendor Layer Semantic Change file
Industry or Globalization Key User
SAP
Vendor Layer defined
Base Application File model

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

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

Straightforward Interaction Flow

Open App Switch to RTA Change UI Publish and Exit RTA Back to FLP

A A A* A*
A A

Key user Key user is Key user wants Key user saves Key User sees In FLP the app
launches app usually working to make UI UI changes UI changes tile gets visual
via FLP herself with this changes for Key user writes within running hint for
app e.g. optimizing notification app indicating UI
Key user wants her teams message about Team sees UI changes
to switch to workflow UI changes for changes when Launching app
RTA mode for the team relaunching will show
making UI Key user is app notification
changes publishing UI about UI
Key user has changes to the changes on
special access team first screen
rights for
switching to
RTA mode

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

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

SAPUI5 Noteworthy

Public
 UI Development Toolkit for HTML5 (SAPUI5)
Summary
SAP UX STRATEGY
CROSS DEVICE consumer-grade UIs
responsive design (e.g. SAP Fiori Apps)
DESKTOP USER
EXPERIENCE Design Principles and Guidelines (link)
MOBILE Smart Templates & Controls

UI Flexibility via Design and Runtime

Adaptation
Development Tools Development Red Dot Award for Fiori 2.0 Design
Wizard Templates & Tutorials
Toolkit for HTML5
Web based IDE
WYSIWYG & Theming Editors
(SAPUI5)
TIMELESS SOFTWARE
OPA Test Framework SAP/ SAP Gateway
Support Tools NON-SAP BACKEND
Less code, PLATFORMS ACCESS / OData v.2 w/ Annotations
faster development ODATA AppDescriptor
Multi-version support
CROSS
Smoother integration, improved LM
PLATFORM
2015 SAP SE or an SAP affiliate company. All rights reserved. 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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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

2015 SAP SE or an SAP affiliate company. All rights reserved. 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:

[email protected]
[email protected]

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

 2015 SAP SE 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 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 forward-
looking 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.

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