UX208 – UI Adaptation of SAP Fiori Apps:
An Overview
Public
Speakers
Las Vegas, Sept 19 - 23
Bangalore, October 5 - 7
Barcelona, Nov 8 - 10
Vanessa Micelli-Schmidt
Babu Ganesh V
Stefan Beck
Tim Back
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
2
Disclaimer
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of
SAP. Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or
any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this
presentation or any related document, or to develop or release any functionality mentioned therein.
This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms
directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice.
The information in this presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality.
This presentation 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. This presentation is for informational
purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this
presentation, except if such damages were caused by SAP’s intentional or gross negligence.
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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
3
Motivation
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
4
Reality check
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
5
Perspective key user
Developer
Key user
End user
“I develop new or modify
existing apps for my company“
“I adapt apps for my team“
“I personalize apps for
myself“
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
6
Demo
UI adaptation at runtime
Public
UI adaptation at runtime
Features & prerequisites


Enabled controls

Smart form

Object page

Simple form
Actions

Drag & drop UI elements

Cut & paste UI elements

Rename UI elements

Add/hide fields

Access in-app extensibility tools (SAP
S4HANA)

Combine/split fields

Add/delete field groups, sections

Undo, redo, discard changes

Keyboard support
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
 NW UI Add-on 2.0 / SAP_UI 7.50 SP00 (RTC) or
higher




Released for HCP with SAPUI5 1.40
Desktop/laptop with Google Chrome or IE11+
Apps with stable control & view IDs!
SAP Fiori launchpad (page FioriLaunchpad.html, ICF
services /sap/bc/ui2/flp )
 Key user authorization role
(SAP_UI_FLEX_KEY_USER)
 No support of XML fragments, yet; only support for
controls created inside of XML views
Public
8
Perspective developer
Developer
Key user
End user
“I develop new or modify
existing apps for my company“
“I adapt apps for my team“
“I personalize apps for
myself“
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
9
Key user tools – developer tools
Developer
Task complexity
I want to
Business expert
Implementation consultant
“Key user”
•
Create/change complex business logic
•
Rich, modern IDE functionality, incl.
debugging, code checks, quality tools
•
Support of big projects/teams
I want to
•
Perform simple tasks in an easy way
•
Fool-prove and life-cycle stable
•
WYSIWYG / instant testing included
•
Low entry barrier
Feature richness
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
10
Key user tools – developer tools
SAP S/4HANA extensibility
Developer
Large UI/ABAP/Java applications
Task complexity
Full blown data modelling (e.g. CDS)
and OData service development
Create custom UIs
Business expert
Implementation consultant
“Key user”
Create custom business objects
•
•
Add business logic
ABAP development tools
•
Adopt/add reports and forms
SAP Web IDE
Java development tools
Add / manage custom fields
Show / hide / arrange fields and
sections on existing UI
•
Feature richness
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Web-based key user tools
(SAP Fiori apps)
i
DEV108 (Lecture)
Extensibility Framework for SAP S/4HANA:
End-to-End Scenario
Public
11
Efficient development with freestyle templates
Efficiency
Flexibility
Persona: Developer
development
Design time
Manual coding
Hybrid design
(break-outs)
Freestyle
design
Smart design
(at runtime)
SAP Web IDE
Smart controls / Smart templates
Vanilla controls
Business data
(SAP Gateway / OData)
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Semantic meta data
(OData annotations)
Public
12
Efficient development with smart templates
Efficiency
Flexibility
Persona: Developer
Development
Design Time
Manual coding
Hybrid design
(break-outs)
Freestyle
design
Smart design
(at runtime)
SAP Web IDE
Smart controls / Smart templates
Vanilla controls
Business data
(SAP Gateway / OData)
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Semantic meta data
(OData annotations)
Public
13
SAPUI5 flexibility services
SAP Fiori UX
Persona-dependent choice:
UI adaptation
End User
SAPUI5 flexibility
Context
RTA
Key User
Partner
DTA
Industry
SAP
Efficiency
Flexibility
Persona: Developer
Development
Manual coding
Hybrid design
(break-outs)
Freestyle
design
Smart design
(at runtime)
SAP Web IDE
Smart controls / Smart templates
Vanilla controls
Business data
(SAP Gateway / OData)
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Semantic meta data
(OData annotations)
Public
14
Demo
UI adaptation at design time
Public
SAPUI5 flexibility change application
View with a form
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
16
SAPUI5 flexibility change application
A new field is added into the view using UI
adaptation at runtime / design time* …
* Planned for future releases
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
17
SAPUI5 flexibility change application
… and creates a SAPUI5 flexibility change
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
18
SAPUI5 flexibility change application
The change is applied to the view
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
19
SAPUI5 flexibility change application
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
20
SAPUI5 flexibility change application
View with a formA new field is added into the view using UI
adaptation
runtime/design-time*
The change is applied
theatview
… andtocreates
a SAPUI5 flexibility …
change
* Planned for future releases
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
21
Annotations for smart controls
CDS view
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
22
Annotations for smart controls
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
23
Smartness of controls and templates
•
Annotations describe semantics related to data (examples see next slide)
•
Smartness of controls and templates is based on the understanding of these semantics.
Annotations are evaluated in the client-controller-logic.
Development steps
Choose template
Select annotated
OData service.
Run fully functional
standard SAP Fiori app
Templates incorporate
latest SAP Fiori design
and UX
Annotations are derived from
CDS for reuse, productivity,
and consistency
No front end coding required.
Extension via additional
annotations or own templates
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
24
Smart templates – semantic information
Label for
field
Selection
fields
Link to value
list
Amount
linked to
currency
Line item
fields
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
25
Layering of changes in the layered repository
Pers layer
Semantic change
End user personalization
Semantic change
Customer layer
Changes are stable related
to upgrades including
flexible handling of layers
Semantic change
Key user adaptation
Semantic change
Customer layer
Semantic change
Development
Semantic change
Partner layer
Add-Ons
Vendor layer
Semantic change
Semantic change
Deltas from
changes
are added
one after
another on
top of the
original
artifact
Semantic change
Industry or globalisation
Vendor layer
Base application file
SAP standard:
views, controllers,
app descriptors
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
26
App variants vs. changes on original app
Variants
COUNTRY EQ ‘DE’
Original
COUNTRY EQ ‘FR’
if COUNTRY EQ ‘FR’
Changes
if COUNTRY EQ ‘DE’
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
27
Demo
App variant creation & coding extensibility
Public
The SAPUI5 flexibility journey
E2E extensibility for industry & partners
New infrastructure for RTA
DTA for developers in SAP Web IDE
Framework for UI
adaptation for SAP Fiori
apps on NW ABAP
Adapt object pages:
rename labels/titles
Adapt smart forms
1.32
1.30
CEI: RTA for key users
RTA goes RTC
Context-specific UI adaptation
Framework
stabilization
1.36
1.34
Improvements for object
page adaptation:
add/hide/move sections
Support tools
1.40
1.38
1.42
1.44
…
Adapt simple forms
Framework for UI
adaptation for SAP Fiori
apps on HCP
This is the current state of planning and may be changed by SAP at any time.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
29
SAP TechEd Online
Continue your SAP TechEd
education after the event!
Access replays of






© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Keynotes
Demo Jam
SAP TechEd live interviews
Select lecture sessions
Hands-on sessions
…
Public
30
Further information
Related SAP TechEd sessions:
UX301 – New Features of SAPUI5 That You Absolutely Have to Know About
UX262 – The fastest way to adapt Fiori and S/4 apps to your business needs
UX605 – SAPUI5 and Smart Templates: Fast and Flexible SAP Fiori App Development
DEV108 – Extensibility Framework for SAP S/4HANA: End-to-End Scenario
SAP Public Web
SCN: https://go.sap.corp/RTASCN
JAM: https://go.sap.corp/RTAJAM
Demo App in SAPUI5 Demokit: https://go.sap.corp/RTA
Documentation: https://go.sap.corp/RTADOC
YouTube: https://go.sap.corp/obb
SAP Education and Certification Opportunities
www.sap.com/education
Watch SAP TechEd Online
www.sapteched.com/online
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
31
Feedback
Please complete your
session evaluation for
UX208
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Contact information:
Vanessa Micelli-Schmidt
[email protected]
Public
32
© 2016 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://www.sap.com/corporate-en/about/legal/copyright/index.html 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 SE’s 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.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Public
33