8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 1/21

Stefan Beck, Tim Back

Sept. 13th, 2013

CD119 

Building Responsive SAPUI5 ApplicationsFollowing the SAP Fiori Approach

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 2/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

Disclaimer

This presentation outlines our general product direction and should not be relied on

purchase decision. This presentation is not subject to your license agreement or anywith SAP. SAP has no obligation to pursue any course of business outlined in this pr

develop or release any functionality mentioned in this presentation. This presentatio

strategy and possible future developments are subject to change and may be chang

time for any reason without notice. This document is provided without a warranty of a

express or implied, including but not limited to, the implied warranties of merchantab

particular purpose, or non-infringement. SAP assumes no responsibility for errors or

document, except if such damages were caused by SAP intentionally or grossly neg

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 3/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

Agenda

SAPUI5 Introduction

Overview / Environment

What is SAPUI5

Key Features and benefits

Simplified architecture

Release cycle and support strategy

SAP Fiori based on SAPUI5

Fiori overview

Demo including an overview how to build/extend these apps

Summary

Key takeaways

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 4/21

SAPUI5 Introduction

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 5/21© 2013 SAP AG or an SAP affiliate company. All rights reserved.

T I M E L E S S

SAP NetWea

S A P U X

consume(e.g. SAP

CRO SS

P L A T F O R M

C R O S S D E V I C E

responsive design

UI development toolkit for HTML5 (SAPUI5)Overview

UI

Development

Toolkit for HTML5 (SAPUI5)SAP/

NON-SAP

PLATFORMS

DESKTOP

BACKEND

 ACCESS /

ODATA

USEREXPERIENCE

MOBILE

Productivity Serv

Design-time Tools

SAPUI5 Tools in Eclipse,Web based IDE

UI theme designer

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 6/21© 2013 SAP AG or an SAP affiliate company. All rights reserved.

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

SAPUI5 is a client-side HTML5 and JavaScript-based rendering library and programming model th

consumption of SAP data. It combines new qualities like openness and flexibility with known SAPenterprise 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

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 7/21© 2013 SAP AG or an SAP affiliate company. All rights reserved.

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

Key Features and Benefits

Built with Leading Web Technologies

 jQuery OData OpenAJAX LESS D3CSS3

Runs on Various SAP and Non-SAP Platforms

SAP HSAP NetWeaver AS ABAP

Open Source Platforms (testing)

SAP HANA Cloud

SAP NetWeaver AS Java / Portal SAP Mobile P

HTML5

Enterprise Re

Eclipse-Based

Openness andFast Release Cycles

Unmatched Extensibility

Powerful Theming & Branding

 Any Screen on Any Device

Cutting-Edge Controls

Build on STANDFoster INNOVATIONDelight USERS

Efficiency and Performance Productivtiy Services Well-known an

Timeless SAP Data Consumption

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

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 8/21© 2013 SAP AG or an SAP affiliate company. All rights reserved.

UI development toolkit for HTML5 (SAPUI5)

SAPUI5 Simplified Architecture

SAP UI5 runtime

and libraries Views with

sap.m lib 

Controllers

J

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 NetW

Gatew

SAP Ba

Web Browser

   A

  p  p   l   i  c  a   t   i  o  n 

   C   L

   I   E

   N

   T 

   A

  p  p   l   i  c  a   t   i  o  n 

   S

   E   R

   V   E

   R

 

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 9/21© 2013 SAP AG or an SAP affiliate company. All rights reserved.

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. New minor versions are always backwards compatible with the old versions within certain compat

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 patc

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

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 10/21

SAP Fiori based on SAPUI5Keeping Simple Things Simple

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 11/21

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 12/21

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 13/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

Responsive Simple Impactful Coherent Responsive

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 14/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

 AllSizes | Devices | Versions | Channels

OneCode line

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 15/21

Demo

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 16/21

Summary

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 17/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

Responsive SAPUI5 Applications Following the SAP Fio

Summary

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 SAPapplications

SAPUI5 newly offers modification free extensibility capabilities

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 18/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

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.comscn.sap.com/community/developer-center/front-end

www.sap.com 

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 19/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

SAP TechEd Virtual Hands-on Workshops and SAP TechContinue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops

 Access hands-on workshops post-event Available January – March 2014

Complementary with your SAP TechEd registration

SAP TechEd Online

 Access replays of keynotes, DemoLIVE interviews, select lecture ses

View content only available online

http://saptechedhandson.sap.com/  http://sapteched.com/o

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 20/21

FeedbackPlease complete your session evaluation for CD119.

Thanks for attending this SAP TechEd s

8/11/2019 CD119.pdf

http://slidepdf.com/reader/full/cd119pdf 21/21

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

 © 2013 SAP AG or an SAP affiliate company. All rights

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.

The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation

SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services

in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA

other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.