UX101

UX101 – UI Technologies and Clients from SAP in times of SAP Fiori and SAP S/4HANA

Speakers Las Vegas, Sept 19 - 23

Bangalore, October 5 - 7

Barcelona, Nov 8 - 10



Oliver Lehmann



Karthikeyan Loganathan



Oliver Lehmann



Ingo Deck



Mamatha K H



Ingo Deck

Disclaimer The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. 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. 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. 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, 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 statements are subject to various risks and uncertainties that that could cause actual results 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 i n making purchasing decisions.

Agenda Digital transformation drives user experience How users perceive SAP UIs – UIs – and  and what technology is behind it? 



Feel SAPs new user experience - Demo Details on SAP Fiori launchpad, UI theme designer, SAPUI5, SAPUI5 flexibility services, SAP Web IDE, SAP Gateway, Web Dynpro for ABAP, ABAP, SAP Screen Personas, SAP Fiori visual theme, SAP Dynpro, SAP Mobile Platform and SAP HANA Cloud Platform mobile services

Your options in the SAP UX environment 

Consumption options



Deployment options



SAP UI technology decision support



Mobile options

SAP UX tools in the design process 

Splash / Build

Summary around S/4HANA 

The SAP UI technologies for SAP S/4HANA



Key takeaways

Digital transformation drives UX

Digital transformation transformation –  the influence on user expectations  – the

‘Me’ in the Centre Speed &  Availability everything immediately everywhere

Simplicity Flexibility What’s next?

SAP’s UX direction: SAP Fiori



People





SAP Fiori Business







Technology







SAP’s answer in the UX strategy

Design Strategy

New / Renew & Empower

Architecture & Technology Technology

Execution of SAP’s UX strategy NEW & RENEW

EMPOWER

Delivering over time SAP Fiori UX across SAP Solutions *

Customers to innovate through User Experience

Suppliers & networks

Education & Best practices

Customer experience

Digital Core

Tools & Technologies

SAP HANA Platform

Workforce engagement

Security

loT & big data

UX Design Services

How users perceive SAP UIs.. ..and what technology is behind it?

Demo

Let‘s start with the user  – a  –  a demo

SAP Fiori app

Single point of entry

WDA app

Dynpro app

Where are we? SAP Fiori app

Single point of entry

WDA app



SAP Fiori launchpad



UI theme designer

Dynpro app

SAP Fiori launchpad

SAP Fiori launchpad Single point of entry for business applications across platforms and devices

SAP delivered software Custom built and 3 rd  party software







The strategic single point of access for a user Role-based, responsive Role-based, responsive and  and personalized Integrating existing UI technologies







Deployable on multiple platforms In alignment with established with established UI clients Further evolving from an functional perspective and with award-winning designs

SAP Fiori launchpad at a glance

 Anchor navigation allows direct access to groups Color coding alerts user for any overdue, new or immediate actions Dynamic charts to provide high level, real-time overview Link lists provide access to a large number of apps Group tiles for personalized content organization

Search across and within apps to get immediate answers

News and feeds to enhance collaboration

Launch SAPUI5, Web Dynpro ABAP*, SAP GUI for HTML* and arbitrary URLs

Edit mode for instant personalization of groups and tiles

SAP Fiori launchpad evolution Viewport with Me-area and notifications The Viewport is the entry point to the users’ daily business. It allows users to focus on their daily work and still keep track of what’s going on in other areas. The Viewport provides possibilities to integrate different areas via the Me-Area and Me-Area and Notifications. Notifications.

Me-Area

Workspace

Notifications

Recommended sessions for SAP Fiori launchpad

UX126 (L1)

i

SAP Fiori Launchpad – Launchpad  – Overview,  Overview, Recommendations and Latest Updates

i

SAP Fiori Launchpad – Launchpad  – Effectively  Effectively Configure and Manage Business Content

UX163 (HO2)

SAP Fiori launchpad branding Make it your corporate entry point

UI theme designer

UI theme designer at a glance  Apply your corporate brand and more

Web based available onpremise and on SAP HCP

Can theme controls and applications

Different skill levels of theming: quick, expert and CSS*

Definition of color palette for easy reuse

Live preview with control selection highlighting parameters Custom CSS3 and LESS support Switch original/preview, full screen, device sizes

Import/export of themes for external editing

Supports cross-technology theming

Supported SAP technologies and platforms 1 Status quo and outlook 2

Supported UI Technologies Unified Rendering

SAPUI5

Web Dynpro ABAP/Java, HTML GUI, BSP, HTMLB

(incl. SAP Fiori, SAP Fiori launchpad)

SAP Portal  Ajax Framework Page, Fiori Framework Page

SAP NWBC (for Desktop >= 4.0)

WebClient UIF (SAP CRM) SAP NWBC (for HTML)

SAPUI5 (Custom Libs)

SAP GUI (WIN GUI)

Supported Platforms3 SAP NetWeaver AS ABAP

SAP Portal (>= 7.30 SP10)

SAP HANA Cloud Platform supported

support planned

Recommended sessions for UI theme designer

UX603 (CJ)

i

Create a Theme Using UI Theme Designer Like a Pro

i

Making Custom Themes Future Ready

UX717 (CR)

Demo

UI theme designer

- DEMO -

Where are we? SAP Fiori app

Single point of entry



SAPUI5



SAP Web IDE



Development efficiency and UI flexibility



SAP Analysis Path Framework



SAP Gateway



UI theme designer*

WDA app

Dynpro app

SAPUI5

SAP UI development toolkit for HTML5 (SAPUI5) SAPUI5 is a JavaScript-based UI library which is designed to build cross-platform business applications. 

The preferred key technology for the next generation of SAP applications embracing SAP Fiori UX



UI control library that embraces Web standards



Web- and Eclipse-based tools available













Optimized to make use of SAP meta data exposed in the OData stream Efficiently build delightful responsive responsive business  business applications based on HTML5 for all devices Offers modification free extensibility capabilities Predefined themes with full control for customer  branding Compliant with all SAP product standards  Available for free free with OpenUI5

SAPUI5 demo kit Get into it quickly Developer Guide: Main documentation on SAPUI5

Demo Apps

Controls: Samples with code snippets

Explored: major controls with examples and code snippets Icons: all SAPUI5 built-in icons

 API Reference: Documentation of framework and control APIs

List of 3rd party open source software from different sources used by SAPUI5

Version Info: Libraries list along with their version

Comparison SAPUI5 and OpenUI5

SAPUI SAPUI5 5 LICENSE NW ABAP / NW JAVA / HCP / SAP HANA XS / CDN

OpenUI5 OpenUI5

NO PREVIEW NO OFFICIAL CONTRIBUTION

OPEN SOURCE (APACHE LICENSE 2.0)

SUPPORT / SERVICE MARKETPLACE

OpenUI5.org / CDN

SCN COMMUNITY

BETA RELEASE

Core

GitHub CONTRIBUTION stackoverflow stackoverflow COMMUNITY  COMMUNITY OpenUI5 slack CHANNEL slack CHANNEL

Recommended sessions for SAPUI5

UX164 (HO4)

i

Kick-Start Your Journey to Building SAPUI5 Apps!

i

New Features of SAPUI5 That You  Absolutely Have to Know About

UX301 (L1)

i

UX725 (CR)

OPA5 – Kick-Start OPA5 –  Kick-Start Asynchronous  Acceptance Tests! UX721 CR)

i

Latency Can Be a Drag: Using the AKAMAI Network to Speed Up Your SAPUI5 App

i

How to Integrate Open Source JavaScript Libraries in Custom SAPUI5 Controls

i

How Do These Controls for SAPUI5 Work? A Look Behind the Scenes

UX724 (CR)

UX714 (CR)

SAP Web IDE

SAP Web IDE Speed up development by intelligently reducing efforts Powerful, extensible, cloud-based integrated development tool that simplifies end-to-end application development for SAPUI5 apps e.g. SAP Fiori

Develop

Test

Build and deploy

Extend apps

SAP Web IDE at a glance Drag & drop tools, wizards and templates for creating/extending SAP Fiori/SAPUI5 apps

Collaborative development and project persistency

Instant preview and mock data support

Hybrid mobile development

Develop once, deploy everywhere and run on any device - mobile, tablet and desktop

Extensible architecture to add custom tools and templates

Code editor optimized for SAPUI5

Integration with various data sources

SAP Web IDE delivery options

SAP HANA Cloud Platform , Web IDE

SAP Web IDE for SAP HANA

Develop F ior iori/ i/S S A P UI5, hybrid hybr id mobile mobile and and IoT apps apps

Devellop S A P HA NA bas Deve bas ed applications

SAP Web IDE Personal Edition

SAP Web IDE powered by HCP • • • • •

Zero installation, low administration Ubiquitous availability Biweekly updates Use cloud or on-premise data services Deploy to HCP or on-premise ABAP systems

• Included with HCP license

Trial & Production

• • • • • •

Single user (PC, Mac) Quarterly releases, download & install For offline development Not all features of Web IDE HCP edition Use on-premise data services Deploy to local ABAP systems

• Database modeling and development, Node.js and SAPUI5/Fiori apps • Released with HANA SPSs • Included in SAP HANA license •  Also available with with the new SAP HANA SAP HANA Express Edition

• Included with HCP license

Trial & Production

Trial & Production

The big picture

SAP Fiori apps Hybrid mobile apps SAPUI5 apps IoT apps

Plugins & templates

External services SAP Gateway (OData services)

Hybrid App Toolkit Overview page

SDK

SAP Web IDE

Internet of Things

Data Sources

SAP HANA Extended Application Service (OData services) REST services

Git HANA Cloud Platform

Recommended sessions for SAP Web IDE

UX207 (L1)

i

SAP Web IDE: Improves Your Productivity in Developing SAP Fiori/SAPUI5 Apps

i

 Adapt SAP Fiori and SAP S/4HANA Suite  Apps to Your Business Needs Needs Quickly

i i

UX262 (HO2)

DEV604 (CJ)

 Add Your Custom SAPUI5 Project Template to SAP Web IDE DEV603 (CJ)

Build Your First Extension for SAP Web IDE

Development efficiency and UI flexibility

Efficiently develop your user interfaces and flexibly adapt them UI development efficiency via SAP Fiori Elements 

Meta data driven approach for pattern-based apps



Less amount of frontend code



High code quality templates and re-use controllers



Design consistency



Upgrade-safe – Upgrade-safe – get  get the latest evolving design guidelines

UI flexibility via SAPUI5 Flexibility Services 

Layered storage of UI adaptations (e.g. SAP , Industry, Partner, User layer)



Intuitively adapt and extend SAPUI5 Application-UIs at runtime without coding



Increase business flexibility by empowering empowering key users to adapt the UI

Efficient UI development with SAPUI5 SAP Fiori Elements and SAPUI5 Flexibility Services

Developer

   E    D    I    b   e    W Dev    P    A Flexibility    S

Manual coding

Manual coding

Hybrid design

Smart design

(Break-outs)

(at runtime)

Freestyle design (Freestyle Template)

Vanilla Controls

Smart Controls / SAP Fiori Elements

Dev Efficiency

A   t    d   e  s  i    g n  t   i   m  e

Efficient UI development with SAPUI5 SAP Fiori Elements and SAPUI5 Flexibility Services

Developer

Efficiency

UI Adaptation

Flexibility

Coding

   E    D    I    b   e    W Dev    P    A Flexibility    S

Manual coding

Manual coding

Hybrid design

Smart design

(Break-outs)

(at runtime)

Freestyle design (Freestyle Template)

Vanilla Controls

Smart Controls / SAP Fiori Elements

Dev Efficiency

A   t    d   e  s  i    g n  t   i   m  e

Efficient UI development with SAPUI5 SAP Fiori Elements and SAPUI5 Flexibility Services

   b   e Efficiency    E    W    D    P   I    A Flexibility    S

Developer

   E    D    I    b   e    W Dev    P    A Flexibility    S

UI Adaptation Coding Manual coding

Manual coding

Hybrid design

Smart design

(Break-outs)

(at runtime)

Freestyle design (Freestyle Template)

Vanilla Controls

Smart Controls / SAP Fiori Elements

Dev Efficiency

A   t    d   e  s  i    g n  t   i   m  e

Efficient UI development with SAPUI5 SAP Fiori Elements and SAPUI5 Flexibility Services

End user

Personalization

Key user

UI Adaptation    b   e Efficiency    E    W    D    P   I    A Flexibility    S

Developer

   E    D    I    b   e    W Dev    P    A Flexibility    S

A   t   r   u n  t   i   m  e

UI Adaptation Coding Manual coding

Manual coding

Hybrid design

Smart design

(Break-outs)

(at runtime)

Freestyle design (Freestyle Template)

Vanilla Controls

Smart Controls / SAP Fiori Elements

Dev Efficiency

A   t    d   e  s  i    g n  t   i   m  e

UI development efficiency Smartness of controls and templates 



 Annotations describe semantics related to data Smartness of controls and templates is based on the understanding of these semantics. Annotations are evaluated in the client-controller-logic. client-controller-logic.

Development steps

Choose

Select annotated OData service.

Run fully functional standard SAP Fiori app

Templates incorporate latest Fiori design and UX

 Annotations are derived from from CDS for reuse, productivity, and consistency

No front-end coding required. Extension via additional annotations or own templates SAPUI5 Flexibility Services for modification free adaptations

SAPUI5 Flexibility Services at a glance UI adaptation at runtime

General capabilities

 Adapt Smart Form control: add/hide/move fields/groups, rename labels/titles, combine fields

Layered repository with merge engine for UI changes

Lifecycle and transport management

 Adapt Object Page control: add/hide/move sections, rename labels/titles

Upgrade safe

Keyboard support

Variant handling for Smart Filter Bar and Smart Table

Enabled in SAP FLP via key user authorization role Screenshot of UI Adaptation at Runtime (Key Us er)

Recommended sessions for development efficiency and UI flexibility

i

UX125 (L1)

SAP Fiori Elements UX165 (HO2)

i

SAP Fiori Elements

i

UI Adaptation of SAP Fiori Apps: An Overview

UX208 (L1)

UX164 (HO4)

i

Kick-Start Your Journey to Building SAPUI5 Apps!

i

New Features of SAPUI5 That You  Absolutely Have to Know About

UX301 (L1)

Demo

SAP Web IDE

- DEMO -

SAP Analysis Path Framework

SAP Analysis Path Framework (APF) – (APF) – What's  What's it about?











 APF is designed designed for easy, intuitive, data driven, chart-based, multidimensional drill-down analysis for business users

Potential Starting Point Fiori Launch Tile Smart Business KPI Tile Fiori Application ….    

 APF comes as Fiori Fiori applications (runtime as well as design time) Can be launched from different sources (e.g. for further drill-down behind a Smart Business KPI tile)

Context sensitive launch

APF-based Application Multidimensional chartbased drill-down analysis Gain analytical insight 



 APF allows context sensitive Insight-to Action navigation navigation to other applications  APF is built in Analytics in SAP Suite offerings such as Suite on HANA and S/4HANA which does not require additional licensing

Context sensitive launch

Navigation Target  Any application which which can be launched via intentbased Fiori navigation Insight-to-Action 



Analysis Path Framework APF Configuration Modeler Fiori app for designing and adjusting APF-based apps 

SAP APF runtime 











Fiori applications for easy, intuitive, data driven, chartbased drill-down analysis for business users Dig into data step-by-step, building analysis paths by using a pool of preconfigured analysis steps Selections in one analysis step affect subsequent analysis steps in the path Save, retrieve, and print analysis paths Each step can have its own OData service – service  – With that cross scenarios pulling data from different application areas/systems areas/systems can be defined Supported data providers behind OData services:  –  –  –

HANA calculation views CDS views BW queries (Easy queries)

Analysis Path Framework - Further Information Central Places for Further Information 

APF @ SAP Community Network



APF Wiki Page (SAP internal only)



APF @ Fiori Design Guidelines



APF Documentation

Online Demos 

SAP Fiori Trial – Trial – Demo  Demo of APF-based App (public available via internet w/o user login; click on



SAP Demo Cloud – Cloud – Demo  Demo and Script – Script – APF  APF Configuration Modeler and APF-based App (SAP internal only) (To get access to the demo cloud follow these instructions instructions)) (In case you are facing issues with the link above please copy https://www.sapdemostore.com/scenario/12529 https://www.sapdemostore.com/scenario/12529 into  into your internet browser directly)

Video Tutorials 

APF Runtime – Runtime – 1:  1: UI Overview



APF Runtime – Runtime – 2:  2: Creating an Analysis Path



APF Runtime – Runtime – 3:  3: Further Options for Analysis Paths



APF Runtime – Runtime – 4:  4: Filtering Data in an Analysis Path



APF Configuration Modeler – Modeler – 1:  1: UI Overview



APF Configuration Modeler – Modeler – 2:  2: Configuring an Analysis Step



APF Configuration Modeler – Modeler – 3:  3: Configuring a Representation



APF Configuration Modeler – Modeler – 4:  4: Configuring Filters



APF Configuration Modeler – Modeler – 5:  5: Insight to Action



APF Configuration Modeler – Modeler – 6:  6: Export and Import of Configurations



APF – APF  – Smart  Smart Business Integration

to get a guided tour)

Demo

 APF

- DEMO -

SAP Gateway

SAP Gateway - Expose data from SAP backend systems and consume on compelling apps on any device SAP Gateway acts as a secure communication layer between the data stored in your SAP backend systems and the client devices that want to consume this data. It uses open industry protocols so you can create people-centric (SAP Web IDE and SAPUI5) apps that are tailored to specific devices. No specific SAP knowledge is required, just standard web and application-development skills.

OData SAP Gateway

SAP Gateway ensures you can develop apps that are: 

SAP Business Suite

Innovative

Gateway Backend Enablement 

Engaging



Compelling

SAP BW CRM

SRM

SCM

PLM

ERP

SAP HANA / Any DB

Recommended sessions for SAP Gateway

OData

INT104 (L1)

i

SAP Gateway deployment options in a nutshell

i

Developing SAP Fiori Apps for Customers of SAP Business Suite

i

The ABAP Programming Model in SAP S/4HANA

i

Building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP

i

How to Develop Your First OData Service Using SAP Gateway

INT261 (HO2)

DEV109 (L2)

DEV212 (L2)

DEV610 (CJ)

SAP Fiori Mobile

SAP Mobile Platform / SAP HANA Cloud Platform mobile services  An open, secure, full-spectrum mobile platform SAP Mobile Platform (on premise) and SAP HANA Cloud Platform mobiles (cloud) provide tools and services for developing and deploying native, hybrid and SAP Fiori mobile apps. The SAP Mobile Platform SDK simplifies the development of cross-platform apps with powerful enterprise capabilities.

SAP Fiori Architecture - Mobile SAP Web IDE - What is SAP SA P Hybrid app toolkit (HAT)? SAP HANA Cloud Platform





Enables developers to develop and build Apache Cordova hybrid apps in SAP Web IDE

SAP Web IDE

HAT HAT has 3 components that are provided as a plugin and an add-on to SAP Web IDE: 

The SAP Web IDE plugin for Hybrid App Toolkit Toolkit



HAT HAT Connector to local build environment (Cordova CLI)



SAP Hybrid App Toolkit Companion

HAT Connector HAT Companion app

 Android SDK* Tools

Kapsel

XCode

Hybrid Application Toolkit (plugin)

HAT (add-on)

SAP Fiori mobile service Mobilize and extend SAP Fiori apps Simple, guided approach Enable delivery of the best Fiori experience on mobile devices

Contacts Calendar

Tasks Printing 1

Barcode

Optimize for mobile Provide users the benefits of a native app user experience

Push Camera Offline

Secure data  Address threats on on multiple layers

Voice Recording 3rd party Plug-ins GPS

Connect to enterprise systems Ensure simple access & authorization for mobile users

Settings Security

Web App

Lifecycle Management

SAP Fiori Mobile App

Recommended sessions for SAP Fiori Mobile

i

UX125 (L1)

SAP Fiori Elements UX165 (HO2)

i

SAP Fiori Elements

i

UI Adaptation of SAP Fiori Apps: An Overview

i

Kick-Start Your Journey to Building SAPUI5 Apps!

i

New Features of SAPUI5 That You  Absolutely Have to Know About

UX208 (L1)

UX164 (HO4)

UX301 (L1)

Demo Flow Agenda SAP Fiori app

Single point of entry WDA app

Dynpro app 



SAP Fiori visual theme Web Dynpro ABAP / F loorplan Manager



SAP Screen Personas



UI theme designer*

SAP Fiori visual theme

SAP Fiori: User experience in SAP S/4HANA

Single entry point via SAP Fiori launchpad

Domain specific infos and actions

Enter details and explore in depth

Web Dynpro ABAP / Floorplan Manager

SAP Fiori visual theme for WDA: search page

SAP Fiori visual theme for WDA: object pages

Floorplan Manager / Web Dynpro ABAP Web Dynpro based UI composition via floorplans & patterns

List GUIBB with variant handling, table services and conditional formatting

New theme SAP_Belize: no icons in transparent toolbars, new spacing

SAP Fiori filter bar in search page and other dialogues (filter values and dialogues, tokenizer)

Bi-directional navigation between WDA and SAPUI5 apps Footer toolbar with closing actions

New message area integrated into footer toolbar

SAP Screen Personas for WDA

UI Theme evolution Example screen “Create customer” – Web –  Web Dynpro ABAP

Belize Bluecrystal Corbu

Recommended sessions for Web Dynpro ABAP / Floorplan Manager

UX124 (L2)

i

Update on SAP Business Client and the SAP GUI Interface Family

i

Consume External Data Feeds with WebSockets Using ABAP in W eb Dynpro

i

Scripting for ABAP in Web Dynpro with SAP Screen Personas

i

Speed Up Integration of Web Dynpro for ABAP into SAP Fiori Launchpad

i

Make Your Web Dynpro for ABAP Apps React to External Events in Real Time!

i

Drastically Improve the Analytical Capabilities in ABAP in Web Dynpro!

UX600 (CJ)

UX601 (CJ)

UX719 (CR)

UX726 (CR)

UX727 (CR)

SAP Screen Personas

How does it work? Deploys as a layer on top of an underlying SAP screen •

The existing functionality and authentication model are retained

•

Changes are applied as a delta to the existing screen

•

It is possible to remove, change or add controls or scripts

Easy to create and simple to deploy •

WYSIWYG HTML5 editor to create flavors with drag-and-drop

•

JavaScript executable across SAPGUI for Windows, HTML and Java

•

Full integration with SAP roles and authorizations

Let’s Let’ s define what we are talking about SAP Fiori UX

SAP Fiori apps

•

The new look and feel of SAP software

•

Based on common business scenarios

•

Role-based user experience

•  Across

•

Included with S/4HANA

industries and lines of business

•

SAP Screen Personas •

Tool to simplify interaction with existing SAP ERP applications

•

For SAP GUI screens or Web Dynpro ABAP applications

•

SAP S/4HANA approved addon

Backend requirements vary

Streamline the transaction  After 40+ years, SAP SAP transactions are incredibly robust, feature-rich and encompass the requirements of many industries. Screen Personas

The foundation of Screen Personas is removal – removal – the  the hiding of fields, industry functionality, buttons and screens. In the end, the Screen Persona has just the information needed for the user to perform a specific task

Simplify complex transactions

Transaction CO02 (Change production order)

SAP Screen Personas flavor gallery accelerates deployment Gallery holds assets to build flavors more quickly •

Flavors for Flavors  for SAP Screen Personas provide a starting point for transactions

•

Themes for Themes  for SAP Screen Personas provide visual changes across transactions

•

Templates for Templates for SAP Screen Personas offer a floorplan for quickly building flavors with a consistent appearance

•

Content provided as-is with no further support

•

Mostly Fiori-designs on SAP Screen Personas 3.0

http://link.personas.help/SAPScreen http://link.personas .help/SAPScreenPersonasFla PersonasFlavorGallery vorGallery More information on SCN: http://scn.sap.com/community/gui/blog/2016/05/14/announcing-contentflavors-themes-and-templates-for-sap-screen-personas

Recommended sessions for SAP Screen Personas

UX209 (L1)

i

SAP Screen Personas As Part of the SAP Fiori User Experience

i

Simplifying Screens in SAP ERP with SAP Screen Personas

UX261 (HO2)

Demo

SAP Screen Personas

Demo flow agenda SAP Fiori app

Single point of entry WDA app

Dynpro app 

SAP Fiori visual theme for SAP Dynpro



SAP Screen Personas*



UI theme designer*

SAP dynpro

SAP Fiori visual theme for SAP dynpro transactions Side by side

SAP Fiori visual theme for SAP dynpro transactions What is changed?

Transparent Toolbar: Text instead of icons

Merged header (as with SAP Fiori 2.0)

Right-aligned field labels

Tab strips with SAP Fiori visualization New icons

Condensed table rows

New footer with processing and closing actions like „Save“

UI theme evolution Example screen from f rom transaction VA03 – VA03 – display  display order in SAP GUI for HTML

Belize Bluecrystal Corbu

Recommended sessions for SAP Dynpro

i

UX124 (L2)

Update on SAP Business Client and the SAP GUI Interface Family UX122 (L1)

i

SAP Fiori UX for SAP S/4HANA: How This  Affects Your Applications in SAP GUI

i

Simplifying Screens in SAP ERP with SAP Screen Personas

UX261 (HO2)

 Your  Your options in the SAP UX environment

 Your  Your options in the SAP UX environment Consumption options

The journey to SAP Fiori UX Single point of access for business applications Initial state of customers – customers  – entry  entry points and investments Landscape & Infrastructure

Sizing

Single Sign On

Identity Management

Roles

Permissions

…

Initial state of customers

? SAP Fiori UX

SAP Fiori apps & SAP Fiori launchpad

The journey to SAP Fiori UX Introduction of SAP Fiori apps  Apply SAP Fiori UX to existing existing SAP clients clients Landscape & Infrastructure

Sizing

Single Sign On

Identity Management

Roles

Permissions

…

Initial state of customers

Browser (FLP standalone)

SAP Fiori UX

SAP Enterprise Portal

SAP Business Client

+

SAP Fiori apps & SAP Fiori launchpad

The journey to SAP Fiori UX Introduction of SAP Fiori apps  Apply SAP Fiori UX to existing existing SAP clients clients Landscape & Infrastructure

Sizing

Single Sign On

Identity Management

Roles

Permissions

…

Initial state of customers

SAP Business Client

SAP Fiori UX

+

SAP Fiori apps & SAP Fiori launchpad

Steps to SAP Fiori user experience on the desktop

SAP Fiori apps in NWBC 5.0

SAP Fiori launchpad in SAP Business Client 6.0

SAP NWBC

SP01 SP00 SAP NW 7.50 / UI ADD-ON 2.0

i

UX124 (L2)

Update on SAP Business Client and the SAP GUI Interface Family

The journey to SAP Fiori UX Introduction of SAP Fiori apps  Apply SAP Fiori UX to existing existing SAP clients clients Landscape & Infrastructure

Sizing

Single Sign On

Identity Management

Roles

Permissions

…

Initial state of customers

SAP Enterprise Portal

SAP Fiori UX

SAP Business Client

+

SAP Fiori apps & SAP Fiori launchpad

Two portal flavors. f lavors. One platform Fiori Framework Page 





i

Ajax Framework Page

Use it for: Application Portal Cross devices (responsive design) Optimized for SAP Fiori

UX845 (1h)

Road Map Q&A: SAP HANA Cloud





i

Use it for: Intranet, external facing, administration Desktop only

UX602 (CJ)

Build Your Site Based on SAP HANA

i

UX604 (CJ)

SAP Web IDE and SAP Enterprise

Demo

SAP Business Client SAP Portal

 Your  Your options in the SAP UX environment Deployment options

SAP Fiori, cloud edition Value proposition

SAP Fiori, cloud edition provides SAP Business Suite customers a simple approach to modernize the user experience (UX) by adopting SAP Fiori applications and services in the cloud. Enable a modern and intuitive user experience for your existing SAP business processes with minimum cost and effort Combine SAP and non-SAP business processes with a consistent UX Simplify your on-premise landscape with efficient cloud services, enabling fast innovation cycles

SAP Fiori UX SAP HANA Cloud Platform

Securely connect the on-premise SAP Business Suite to the cloud SAP Business Suite

SAP Fiori, cloud edition  Architecture at a glance http

SAP HANA Cloud Platform – Platform – Customer  Customer Account    D    U    S    O    E    C    L    I    C    V    R    C    I    E    L    S    B    I    U    U    P

HCP Cockpit

SAP Fiori launchpad

UI theme designer Launchpad Config Cockpit

SAP Fiori apps

SAP Web IDE

OData

Cloud Identity

i

Implementing SAP Fiori in the Cloud

i

Experience SAP Fiori in the Cloud

UX204 (L1)

UX260 (HO2)

SAP Fiori mobile service**

HCP OData provisioning *

Integration Service*

   S    E    E    S    I    &   S    M    A   S    E    E    R    T    C    A    P   -    D   O    R    N    P    O

SAP HANA Cloud connector

http

SAP Gateway Hub* IW_BEP

SAP Business Suite

Fiori backend

* alternative OData service via SAP Gateway (on-premise) or SAP HANA Cloud integration service

SAP Fiori, cloud edition Implementation journey

DEMO CLOUD

EXTENDED DEMO

PRODUCTIVE USAGE

Easily explore and experience SAP Fiori with zero installation and configuration

Customize and extend the SAP Fiori experience with app extensions, branding and in own cloud account

Customize, extend Customize, extend,, mobilize and run SAP Fiori UX productively on the cloud. Connect to your SAP Business Suite.



Free



Free



Subscription fee



Non-productive usage



Non-productive usage



For productive usage



90 days trial account



90 days trial account



SAP HANA Cloud Platform account



Community Support



Community Support



SAP Support



Connect to productive SAP backend



http://sap.com/fiori-demo

Connect custom Fiori apps to sandbox system

SAP Fiori launchpad deployment options ABAP Front End Server

SAP Enterprise Portal

Fiori launchpad

Fiori launchpad

 ABAP Front End Server

SAP Enterprise Portal

HANA Cloud Platform

Fiori launchpad

HANA Cloud Platform  App  App  App

SAP Gateway | UI Add-on

 App

 App

 App  App  App  App

 App

  s    d   n   o   u   i    t   o   u    l    l    C  o    S

Fiori launchpad

 ABAP Front End Server

SAP SAP SAP

SAP Gateway | UI Add-on  App  App  App  App

 App

CC SAP Gateway

HANA / anyDB SAP SAP SAP

SAP SAP SAP

 App

- Fiori on premise application

 App

- Fiori Cloud application

Scope-definition tools



 App Reference Library: Library: https://fioriappslibrary https://fioriappsl ibrary.hana.ondemand.com/sap .hana.ondemand.com/sap/fix/externalVi /fix/externalViewer/ ewer/  – Find Fiori Apps by free text, backend product, business context, etc  – Information on Application functionality and prerequisites  – Direct Integration into Maintenance Planner



Fiori Demo Cloud: http://www.sap.com/fiori-demo  – Access  –  Access to standard standard Fiori Apps for first first hands-on experience  – Possibility to enhance inside an own cloud account



Is the customer scope exceeding the standard apps  – Extension points  – WebIDE (Eclipse)

SAP Fiori apps reference library - “A Fiori app about Fiori apps”



Repository of all released apps up to Wave 7



List of apps



Search and Filters



 App descriptions with with screenshots



Implementation details per app



Consolidated info for selection of apps



Direct access to related resources: Documentation, Product Availability Matrix, Innovation Discovery and Landscape Planner



Data export for configuration task-lists

www.sap.com/fiori-apps-library

SAP Fiori apps reference library in Service Marketplace* Technical metadata required for installation and configuration - Link

List of Apps with Grouping/Filterin Grouping/Filtering g

Technical Details for single App

Aggregated Information for App Selection

Demo

SAP Fiori Apps Reference Library

 – DEMO – SAP Fiori Demo Cloud Edition

 Your  Your options in the SAP UX environment UI technology decision path

SAP UI technology decision path: an example SAP Fiori app

existing?

 Mobile necess ary? necess

Perfect fit? fit?

Use out of the box

Adjust with SAP Web IDE

DIY with SAP Web IDE1

WDA/Dynpro app available

DIY with SAP Web IDE

Perfect fit? DIY = Do it yourself / custom development = SAP Web IDE = SAPUI5 = SAP Screen Personas

Use out of the box

Adjust with SAP Screen Personas2

 Your  Your options in the SAP UX environment Mobile options

SAP UxD Defining SAP Fiori for iOS 

Based on human interface guidelines



Coherent with the familiar experience of iOS



Enhanced with new reusable controls and patterns

Designing transformative apps 



Consider how to transform processes, leverage context, automate tasks, define guided activity, save time Makes full use of native capabilities

Providing design guidelines

SAP Fiori for iOS Guidelines

i

UX105 (L1)

SAP Fiori for iOS

SAP tools in the design process

Design-led development With a strong focus on user-centricity, user-centricity, the design-led development process guides and supports the product teams to deliver their best UX

SAP Web IDE SAPUI5 BUILD

UI theme designer SAP Screen Personas SAP Fiori Launchpad

SAP Fiori Cloud Edition SAP Fiori app reference library

SPLASH and BUILD: rapid and effective design & prototyping Easily build prototypes:  

With built-in UI elements and floor plans Or by importing SAP UI5 apps (f uture)

Leveraging:  

Explore and leverage: 





Inspiring application designs e.g. SAP Fiori Growing gallery of application prototypes to build your own Comprehensive design-thinking artifacts for the above

Real sample data Embedded design guidelines e.g. Fiori (future)

Conduct effective user research with:   

Surveys  Annotations Usage analytics

i

User Experience As a Service for Business Analysts and Development

i

Design Your Own SAP Fiori App Prototype with Build

i

Prototyping with SAP Splash and Build

UX104 (L1)

UX102 (L1)

UX161 (HO2)

Demo

BUILD

- DEMO -

Summary around S/4HANA

SAP Fiori - just another UI?

Internet of Things

People

SAP Fiori UX role-based user experience for all devices

SAP S/4HANA applications and extensions Business networks

instant insight-driven applications for all lines of business and industries Devices

SAP HANA platform in-memory platform for all data

Social networks

On-premise edition

Cloud edition

Native integration for hybrid scenarios Ariba

Concur

Fieldglass

hybris Software

SuccessFactors

Big Data

SAP Fiori: user experience in SAP S/4HANA

SAP Screen Personas is a key part of the SAP S/4HANA Fiori UX Access SAP S/4HANA functionality through Fiori launchpad





Option to access SAP S/4HANA edition through the traditional user interfaces: Dynpro and Web Dynpro Use SAP Screen Personas 3.0 to:  –  Apply Fiori design to custom custom transactions  –





Simplify complex GUI screens

Launch flavors from your SAP Fiori launchpad and support intent-based navigation Simplify transaction screens for which no Smart Business Cockpit, factsheet, or Fiori app exists

Client options for SAP S/4HANA SAP S/4HANA Cloud

SAP S/4HANA On-Premise no local client

with local client

SAP Fiori launchpad in Browser Launches/Displays:

SAP Fiori launchpad in SAP Business Client

SAP Fiori launchpad in Browser

Launches/Displays:

Launches/Displays:

Fiori Screens

•

Fiori Screens

•

•

Web Dynpro Screens

•

Web Dynpro Screens

•

Web Dynpro Screens

•

SAP GUI for HTML

•

SAP GUI for Windows

•

SAP GUI for HTML

•

UX100 (L2)

SAP Fiori 2.0 for SAP S/4HANA

Fiori Screens

SAP S/4HANA Cloud

SAP S/4HANA On-Premise

SAP S/4HANA (On-Premise)

i

no local client

i

TEC116 (L1)

UX/UI Strategy for SAP S/4HANA

No local client available

SAP S/4HANA Cloud

SAP’s key UI technologies, development tools and clients SAP Fiori launchpad SAP Enterprise Portal SAP Business Client

SAP GUI2

SAP Web IDE SAP Screen Personas

SAPUI5

DYNPRO

FPM for 1 WDA

SAP Gateway

SAP Backend

  s   e   c   r    i   e   v   r   n   e   g    S    i   s   r   m   e   o    d    t    f   a   e    l    P   m   e   e    i    l    h    t    b   o    I    U    M    P    A    S

UI Clients

UI Tools

UI Technologies

Key takeaways

1

SAPUI5 with SAP Web IDE incl. efficiency and flexibility using annotated OData Services is the key technology stack for SAP Fiori as central key element of SAP S/4HANA

2

Easily and seamlessly integrate other SAP UI technologies like WDA and Dynpro into the SAP Fiori user experience exper ience

3

SAP Fiori launchpad as the UX for the single point of user – also  also coming from SAP Portal or entry for the end user – SAP Business Client

4

Know your UI technology options and make a thoughtful choice based on your general conditions

SAP TechEd Online

Continue your SAP TechEd education after the event! Access replays of 

Keynotes



Demo Jam



SAP TechEd live interviews



Select lecture sessions



Hands-on sessions



…

Further information Related SAP TechEd sessions: UX164 - Kick-Start Your Journey to Building SAPUI5 Apps! (4h hands-on) UX163 - SAP Fiori Launchpad –  – Effectively  Effectively Configure and Manage Business Content (2h hands-on) UX165 - SAP Fiori Elements (2h hands-on) UX261 - Simplifying Screens in SAP ERP with SAP Screen Personas (2h hands-on) UX262 - Adapt SAP Fiori and SAP S/4HANA Suite Apps to Your Business Needs Quickly (2h hands-on) UX105 - Tango: UX Mobile Design (1h lecture) UX207 - SAP Web IDE: Improves Your Productivity in Developing SAP Fiori/SAPUI5 Apps (1h lecture) UX208 - UI Adaptation of SAP Fiori Apps: An Overview (1h lecture) UX209 - SAP Screen Personas As Part of the SAP Fiori User Experience Experience (1h lecture) SAPUI5 That UX301 - New Features of SAPUI5  That You Absolutely Have to Know About (1h lecture) UX124 - Update on SAP Business Client and the SAP GUI Interface Family (2h lecture) UX843 - Road Map Q&A: SAP Fiori UX844 - Road Map Q&A: SAP User Interface Technologies UX845 - Road Map Q&A: SAP Portal UX846 - Road Map Q&A: SAP Web IDE TEC214 - The User Experience from SAP and Strategy and Road Map for SAP Fiori (2h lecture) TEC116 - UX/UI Strategy for SAP S/4HANA (1h lecture) MOB307 - Extend SAP Fiori Apps with the Mobile Services Integration Framework (1h lecture) DEV212 - Building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP (2h lecture) DEV268 - Building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP (4h hands-on) INT261 - Developing SAP Fiori Apps for Customers of SAP Business Suite (4h hands-on)

Even more information SAP Public Web https://scn.sap.com/community/ui-technology - SCN central entry point f or SAP User Interface technologies https://scn.sap.com/community/ui-technology http://go.sap.com/solution/roadmaps.html - SAP UI technology road road map, SAP Fiori road map

SAP Education and Certification Opportunities www.sap.com/education www.sap.com/education  - check especially OpenSAP courses on newest UI technologies OpenSAP courses: • SAP's UX Strategy in a Nutshell by Sam Yen Yen • Creating Business Value with User Experience • Introduction to SAP Fiori UX Your Own SAP Fiori App in the Cloud  –  2016 Edition • Build Your  – 2016 • Developing Web Apps with SAPUI5 Apps with SAP HANA Cloud Platform • Developing Mobile Apps • SAP Screen Personas • Software Design for Non-Designers

Watch SAP TechEd Online www.sapteched.com/online

Feedback Please complete your session evaluation for UX101

Contact information: Oliver Lehmann

Ingo Deck

Director Product Management

Director Product Management

[email protected]

[email protected]

 © 2016 SAP SE or an SAP affiliate company 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 http://www.sap.com/corporate-en/about/legal/copyright/index.html for  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 a dditional 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 co mpanies’ mpanies’ 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 no t a commitment, promise, or legal obligation to deliver any ma terial, code, or functionality. All forwardlooking statements are subject to various risks an d uncertainties that could cause actual results to differ materially from expec tations. 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.