0504 building sapui5 applications following the sap fiori approach on sap hana

Orange County Convention Center

Orlando, Florida | June 3-5, 2014

Building SAPUI5 Applications Following the SAP Fiori Approach on SAP HANA Thomas Jung, SAP HANA Product Management

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 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.

Main Message

Mastering SAP Technologies 2014 | 3

Consumer user experience is the new standard for enterprise applications …

The World is Changing

© 2013 SAP AG. All rights reserved. 5 Public

Top use

scenarios

Core use scenarios Specific customer value

use scenarios

The SAP User Experience Strategy

Existing Applications

RENEW ENABLE

SAP Fiori

Renovation Enablement Tools (e.g. SAP Screen Personas)

NEW

New Applications

Usa

ge

/R

ea

ch

© 2013 SAP AG. All rights reserved. 6

ENABLE NEW RENEW

DESIGN SERVICES

SAP USER EXPERIENCE STRATEGY

© 2013 SAP AG. All rights reserved. 7

ENABLE NEW RENEW

DESIGN SERVICES

SAP USER EXPERIENCE STRATEGY


SAP Fiori Responsive – Simple – Impactful – Coherent – Instant Value


My Leave Requests

My Timesheet

My Travel Requests

My Shopping Cart

Track Shopping Cart

Approvals

Insight

Approve Requests

Approve Leave Requests

Approve Timesheets

Approve Travel Requests

Approve Travel Expenses

Approve Shopping Carts

Approve Purchase Orders

Approve Requisitions

Approve Purchase Contracts

Purchasing

My Spend

Track Purchase Orders

Order from Requisitions

Requests

Insights

My Paystub

My Benefits

Purchasing Agent Manager Employee

Sales Transactions

Sales Insight

SAP Fiori

Sales Rep

Create Sales Orders

Change Sales Orders

Check Price and Availability

Track Sales Orders

Track Shipments

Track Invoices

25 SAP Fiori Apps available now They touch 87% of the users at an SAP Customer

© 2013 SAP AG. All rights reserved.


MRP Planner Supply Planner Supplier Program Manager / Project Team Member Production Worker / Supervisor Quality Engineer

Cash Manager Managers Collection Specialist Employee (T&E) G/L Analyst Finance

MFG SD

SAP

Fiori

Sales Representative Sales Manager

Sales Representative Inside Sales Representative

CRM – Sales

Includes Search, C’est Bon, Launch Pad, Smart Business, Collaboration, Factsheets, etc.

(Based on SFIN)

SAP Fiori 2 – Portfolio Overview ~150 scenarios planned with RTC at TechEd

© 2012 SAP AG. All rights reserved. 11 Internal

Responsive Simple Coherent Instant Value

All sizes, devices, versions, channels • Design with

mobile mindset

1-1-3 (1 user, 1 use case, 3 screens) • Solve the right

problem • Know and provide

the user context • Provide meaningful

data integration (Simple)

Apps that speak the same language • Provide coherence

for common activities

• Provide brand coherence

Low barrier to adoption • Enable

customers to adapt and users to personalize

• Deployable to users ideally in one day

Fiori: Design Principles

De-composition into task-base experience • Provide one entry

point for the user

Role-based


SAP Fiori Overall Offering

Fiori Launchpad

Transactional

Fiori

Analytical

Fiori

Smart Business

Scenarios /

KPI Cockpits

Business

Suite

Business

Suite runs on any DB runs on HANA

Fact

Sheets

© 2012 SAP AG. All rights reserved. 13 Internal

Key UI Technologies Big Picture

*: Harmonized in Run & Design Time with WebUIF

1: FloorPlan Manager

2: Flexible UI Designer

3: Business Object Layer / Business Object Processing Framework

Backends / Platforms

DYNPRO FPM1/

WDA SAP UI5

Gateway

Clie

nts

SAP NetWeaver Portal

SAP NetWeaver Business Client

SAP UI5 APPLICATION

DEVELOPMENT TOOLS FLUID2

SAP

Screen

Persona

s

SAP GUI

SA

P T

hem

e D

esig

ner

*

Fiori

LaunchPa

d

BOL / BOPF 3


Comparison of Key UI Technologies SAPUI5 and Floor Plan Manager

SAPUI5 - Pixel Perfect UI’s Floor Plan Manager for WebDynpro ABAP

• Fiori & Light weight apps

• Mobile & Desktop

• Stateless

• Mainly data consumption

• Full functional applications

• Desktop usage

• Transactional & stateful

• Data creation & maintenance


Key Capabilities:

Application / Control Development Environment

Theming and Branding framework

OData integration for timeless software.

Extensibility concepts for “custom controls”

Based on “Open Source” framework(s) and Web Standards

Benefits:

Native Look and Feel on any device

Mobile & Desktop, on-demand & on-premise

Huge amount of predefined modern UI Controls

Interactive and integrated Business Graphics

Pixel Perfect Design

SAP UI Development Toolkit for HTML5 (aka SAPUI5)


Component Availability Component Availability

FPM

As of SAP Netweaver 7.01 (latest version in NW 7.03)

NWBC 4.0 September 6, 2012 (UI Add-on 1.0 SP01 for SAP NetWeaver 7.0/7.01/7.02/7.03 or stand-alone via SMP)

WDA Page Builder

As of SAP Netweaver 7.02 (latest version in NW 7.03)

UI Add-On Quarterly Releases (UI Add-on 1.0 SPnn for SAP NetWeaver 7.0/7.01/7.02/7.03)

SAPUI5 V 1.6 V 1.8 V 1.10

Quarterly Updates since September 2012 (UI Add-on 1.0)

Visual Business V 1.1 V 2.0

Transportation Mgmt. 8.0 Transportation Mgmt. 9.0 (RTC 31.07.2012, GA planned for March 2013)

UI theme designer

As of UI Add-on 1.0 SP05 Portal SAP NetWeaver Portal 7.3 / SAP NetWeaver Cloud portal (supporting mobile portal scenarios)

SAP Screen Personas

As of December 7, 2012

Availability of UI Components

This is the current state of planning and may be changed by SAP at any time.

https://preview.cyrenea.com/appui/SAPPersonas-SAP/SAPPersonas/index.html

SAPUI5 Introduction


T I M E LE S S S O FTW ARE

SAP NetWeaver Gateway

S AP UX S TRATE G Y

consumer-grade UIs

(e.g. SAP Fiori Apps)

CRO S S

P LATFO RM

CRO S S DE V I CE

responsive design

UI development toolkit for HTML5 (SAPUI5) Overview

UI

Development

Toolkit for HTML5

(SAPUI5) SAP/

NON-SAP

PLATFORMS

DESKTOP

BACKEND

ACCESS /

ODATA

USER

EXPERIENCE

MOBILE

Productivity Services for

SAPUI5

Design-time Tools

SAPUI5 Tools in Eclipse,

Web based IDE

UI theme designer


UI development toolkit for HTML5 (SAPUI5) SAP’s HTML5 Toolkit for building lightweight business UIs on multiple platforms

SAPUI5 is a client-side HTML5 and JavaScript-based rendering library and programming model that is optimized for

consumption of SAP data. It combines new qualities like openness and flexibility with known SAP strengths like

enterprise readiness and product standard support.

Key capabilities

Rich control set including charts for all devices

Application development environment for all platforms

OData integration for timeless software

Extensibility concepts for “custom controls”

Modern theming and branding concepts

Embraces “open source” framework(s) and web standards

Targets developers with web development skills (HTML, CSS3, JS).

Benefits

Business agility through availability on any device & for any platform

User productivity and happiness through increased flexibility,

openness and pixel perfect design


UI development toolkit for HTML5 (SAPUI5) SAP’s HTML5 Toolkit for building lightweight business UIs on multiple platforms

Key Features and Benefits

Built with Leading Web Technologies

jQuery OData OpenAJAX LESS D3.js ARIA CSS3

Runs on Various SAP and Non-SAP Platforms

SAP HANA XS SAP NetWeaver AS ABAP

Open Source Platforms (testing)

SAP HANA Cloud

SAP NetWeaver AS Java / Portal SAP Mobile Platform (planned)

HTML5

Enterprise Readiness

Eclipse-Based Designtime

Openness and Flexibility Fast Release Cycles

Unmatched Extensibility

Powerful Theming & Branding

Any Screen on Any Device

Cutting-Edge Controls

Build on STANDARDS Foster INNOVATION Delight USERS

Efficiency and Performance Productivtiy Services Well-known and easy to learn

Timeless SAP Data Consumption

Read more: “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”: http://scn.sap.com/docs/DOC-31625

http://scn.sap.com/docs/DOC-31625




UI development toolkit for HTML5 (SAPUI5)

SAPUI5 Simplified Architecture

SAP UI5 runtime

and libraries Views with sap.m lib

Controllers

Models JSON, XML or OData

SAP NetWeaver AS ABAP

Resource Handler

CSS

JS

Views with sap.ui.commons lib

CSS

JS

SAP NetWeaver AS Java

Resource Handler

CSS

JS

CSS

JS

SAP NetWeaver Cloud

Resource Handler

CSS

JS

CSS

JS

SAP HANA Extended Application Services (XS Engine)

CSS

JS

CSS

JS

SAP NetWeaver Gateway

SAP Backend

Web Browser

Ap

plic

atio

n C

LIE

NT

A

pp

lic

atio

n

SE

RV

ER

DB

O D a t a


UI development toolkit for HTML5 (SAPUI5)

SAPUI5 Release Cycle and Support Strategy

Quarterly release cycles of SAPUI5 on all platforms There is a new SAPUI5 release every 3 months, changing the number to a new minor version (1.12.0,

1.14.0, 1.16.0)

New minor versions are always backwards compatible with the old versions within certain compatibility rules

Corrections for current releases are provided within patch releases (e.g. 1.14.1, 1.14.2)

As soon as a new version is released to customers, errors in older versions are only fixed in patch releases

of the new version ( error in 1.12.9 is fixed in 1.14.1 if 1.14.0 is already released)

SAP Fiori based on SAPUI5 Keeping Simple Things Simple


Responsive Simple Impactful Coherent Instant Value Responsive


All Sizes | Devices | Versions | Channels

One Code line

Let’s Build!

SAPUI5 is a UI Control Library with Eclipse- and soon Web Tools

SAPUI5 is optimized to make use of SAP meta data exposed in the OData stream

SAPUI5 helps you to efficiently build delightful responsive business applications based on HTML5 for all devices

SAPUI5 is available on all SAP platforms

SAPUI5 embraces Web Standards

SAPUI5 is the key technology for the next generation of SAP applications

SAPUI5 newly offers modification free extensibility capabilities

KEY LEARNINGS

THANK YOU FOR PARTICIPATING

Please provide feedback on this session by completing a short survey via the event mobile application.

SESSION CODE: 0504

For ongoing education on this area of focus, visit www.ASUG.com

THANK YOU


Further Information

SAP Education and Certification Opportunities

www.sap.com/education

sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

Watch SAP TechEd Online

www.sapteched.com/online

SAP Public Web

scn.sap.com

scn.sap.com/community/developer-center/front-end

www.sap.com

http://www.sap.com/education

https://sapui5.netweaver.ondemand.com/sdk/



http://www.sapteched.com/online

http://scn.sap.com/welcome

http://scn.sap.com/community/developer-center/front-end





http://www.sap.com/

0504 building sapui5 applications following the sap fiori approach on sap hana

Documents