Premier Partners:

Supported by:

Produced by:

The UI Development Toolkit for HTML5

Thomas Jung SAP Labs, LLC (USA) (SAP Mentor)

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.

2012 SAP AG. All rights reserved.

Main Message

Growing demand for

business insight everywhere on any device business UIs following known End User Paradigms applications with native look & feel high client side interactivity and performance seemless integration of modern web standards and functionality (Social media, web 2.0, )

Mastering SAP Technologies 2013| 4

What Ill Cover

Introduction Key Capabilities Architecture Roadmap Demo UI Integration Services

Mastering SAP Technologies 2013| 5

Introduction

Introduction

HTML5 definition versus common understanding

The official definition of HTML5
is a markup language for structuring and presenting content for the World Wide Web, . It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997)

The commonly used definition

Integrated Multimedia support Graphics and Charts (Canvas / SVG) New JavaScript APIs (e.g. Web SQL, Web Storage, Web Workers, ) ARIA (accessibility) OpenAJAX (interoperability) JIT JavaScript compilation CSS3

2012 SAP AG. All rights reserved.

Key Capabilities

Key Capabilities

Features and Benefits Delight USERS

Any Screen on Any Device Cutting-Edge Controls Powerful Theming & Branding Efficiency & Performance

Foster INNOVATION
Unmatched Extensibility Great Productivity

Based on STANDARDS
Eclipse-Based Designtime Enterprise Readiness

Timeless SAP Data Consumption Well known and easy to learn Fast Release Cycles Openess & Flexibility

2012 SAP AG. All rights reserved.

Key Capabilities

Features and Benefits

Built with Leading Web Technologies
HTML5 jQuery CSS3 OData OpenAJAX LESS D3.js ARIA

Runs on Various SAP and Non-SAP Platforms

SAP NetWeaver Cloud Sybase Unwired Platform SAP HANA XS SAP NetWeaver AS ABAP SAP NetWeaver AS Java Open Source Platforms

2012 SAP AG. All rights reserved.

10

Key Capabilities

Development Environment
Homogeneous Set of Eclipse Tools and Editors
Small learning curve for web developer UI Screen & Application development HTML5 templates support Shipped via SAP release train for Eclipse (SRTE) NWDS support Outlook: WYSIWYG Design of HTML5 Applications Web based IDE

2012 SAP AG. All rights reserved.

11

Architecture Overview

Architecture Overview
SAPUI5 Components Optional server component Core JS Framework including jQuery Extension libraries Controls Themes Helper assets like e.g. Less Code minimizer

Themes

Mobile

Desktop

SAPUI5 Libraries

Controls

Mobile

Desktop

Data Binding

Control Base

Render Manager

jQuery.UI jQuery Mobile

UI

SAPUI5 Core

Event

Resources

Device

Utils

Logger

SAP jQuery Plug-ins jQuery

(Static) Web Server

2012 SAP AG. All rights reserved.

Resource Handler (optional)

13

Summary Positioning of SAPUI5 technology

User Types
Occasional User, Manager
Transactional Task Simplicity

Expert Usage
Data Complexity

Expert User Supervisor Business User Occasional User Manager Information Seeker
Casual Usage

Scenarios
limited transactional Highly interactive Collaboration , Feeds

Requirements
Analytical/BOBJ

Intuitive with low entry barrier multiple devices

2012 SAP AG. All rights reserved.

14

Shipment Roadmap

SAP UI Development Toolkit for HTML5

Shipment Timelines (plan)
February - June: Q3 2012:Released Oct. 2012: Nov/Dec 2012: more than 4300 downloads in SDN on NW Cloud and ABAP add-on for 7.0 -7.31 Release on NW NetWeaver Java 7.31 Release of SAPUI5 version 1.8 on HANA XS SP05, with Sybase SUP 2.2.1 Release of SAPUI5 on NW ABAP 7.40 SP2 and NW Java 7.30 SP 9, updates for all other platforms

Q1 2013:

Release independent and quarterly delivery (internal dates):

July 2012: SAPUI5 version 1.6 (adopted by BI ZEN, Business Suite, EPM, NW Cloud and many others) Oct 2012: SAPUI5 version 1.8 (mobile support with native look & feel - will be adopted by Sybase, BOBJ Explorer, SAP Drop Box) Feb 2013: SAPUI5 version 1.10 (More charts/controls, improved controls, WYSIWYG at least experimental)
2012 SAP AG. All rights reserved. 16

Demo

Hana UI Integration Services (UIS) Goal and Components Allow XS application developers to concentrate on the core functionality of their application, by providing UI services that enable the creation of multiple experiences
A part of the Hana Developer Workbench released to Customers with SPS 5:

An XS application HANA Repository Plug-Ins Eclipse Plug-Ins for Hana Studio

18

2012 SAP AG. All rights reserved.

Hana UI Integration Services Current Features

Page building
State-of-the-art design environment of the application layout and content

Property persistence and customization

Widget can define properties that are persisted enabling customization

Property personalization
Widget can define properties that are persisted on user level

Publish-Subscribe
Eventing mechanism that allows data interchange between widgets in the same application site

Context
All properties are reflected in the URL allowing bookmarking and sharing
19

2012 SAP AG. All rights reserved.

UIS Benefits for HANA App Developers

Easily build and reuse application components by utilizing UIS widgets Design the application UI quickly and easily UIS application site designer Create and manage all artifacts directly from Hana Studio and Hana repository Personalize and customize end-user preference Allow easy customer or partner application extensibility

Concentrate on the application core logic

2012 SAP AG. All rights reserved. 20

Detailed architecture fully integrated into Hana from index server to client
Legend:
Portal components HTML5 Portal Client HANA Studio

Portal UI component (layout, shell...)

R R

Portal Data Model

Client-side data Model

R

Client-side component model

R

SAP UI5 Components

(e.g. application/ page/gadget CRUD)

Connectivity & adaptation layer

REST/oData4SAP over HTTP(S) HANA XS Engine
R R

ICM
R

XS App Authentication & Authorization

R

Portal Services (XS App)

Component Model (e.g. Gadget Rendering )

R

Data Model (e.g. application/page/gadget CRUD)

XS Access Layer API

SQL/SQL Script Access

Repository Access

TrexNet Index server Portal SQL Scripts

Authentication & Authorization

Data Model CRUD

Content Provider

Users Privileges Roles

Personalization

Runtime Tables

Repository Objects (Design time)

Application

Page Personalization

Gadgets

Portal App Catalog Widget

2012 SAP AG. All rights reserved.

21

UIS Integration in HANA Studio

2012 SAP AG. All rights reserved.

22

UIS Web Based Application Site Designer

2012 SAP AG. All rights reserved.

23

Main stakeholders: EERM SAP Global Facility Management and SAP Operation Process Intelligence

2012 SAP AG. All rights reserved.

24

UIS 2013 Roadmap

2013 Planned Services

2013 Planned Content

Open Social Compliance Theming and Branding Navigation Authorization & Access Management Mobile Enablement

BI Visualization (Havana) Personal Task Inbox (POI) Embedded Search (InA) Widget templates (UI5 controls)

2012 SAP AG. All rights reserved.

25

Key takeaways
HTML5 is a specification for building highly interactive and flexible UI`s SAPUI5 bundles a UI Control Library and Tooling for building delightful UIs following web standards SAPUI5 is your best choice when developing enterprise ready lightweight business applications in the SAP context SAPUI5 will be available, bundled with several platforms and products in 2012
2012 SAP AG. All rights reserved. 26

Thomas Jung SAP HANA Product Management

Thomas.jung@sap.com +1 812.391.2444

How to contact me:

Premier Partners:

Supported by:

Produced by: