User Interface Strategy

Thomas Jung– SAP NetWeaver Solution Management Rollout

Legal Disclaimer

The information in this document is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. 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 document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation 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 on this document is not a commitment, promise or legal obligation to deliver any material, code or functionality. 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. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.

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.

UI

Services

UI

Clients

UI

Infrastructure

UI

Services

UI

InfrastructurePortal Runtime

Visual

ComposerWeb Dynpro / FPM

/ CRM UI F

Roles PersonalizationNavigation

CollaborationDocument Page Building

…

Search

Mobile &

Voice

Duet &

Alloy

SAP GUI

UI Clients & Access Channels

Web BrowserDesktopAdobe Forms

Enterprise

Search Access

Web Dynpro

Islands

SAP NetWeaver Founation

SRMSCMPLMCRMERP

SAP Business SuiteNon SAP Enterprise

Application

Business UserExpert User

Enable

Enrich

Access

Three Dimensions of User Interaction -

Empowering and Connecting People

UI

Services

SAP NetWeaver UI

The Three Dimensions

UI

Clients Interactive

Forms

Business

ClientWD Islands

Ajax FWK

Page

Mobile

UI

InfrastructureWD ABAP

WD JavaVC /

WD4VC

Enrich

Access

Enable

© SAP 2009 / Page 3

Portal

Infrastructure

Personali-

zation

Web Page

Composer

Content / Knowledge

Mgmt.

Portal (Browser)

Wikis,

Forums

Web Dynpro AJAX Client Succeeds HTML Client

Web Dynpro AJAX Client

Drag&Drop, Suggestion, Page Rearrangement

Use of XMLHTTPRequestObject

Validation of Simple Data Types

Extensive Keyboard Support

hot keys, access keys, function keys

In-place editing, fluid animations

Enhanced client/server communication supporting

on-demand JavaScript

New Web Dynpro UI theme SAP Tradeshow Plus

New Lightspeed rendering engine with support for

inline CSS, JavaScript load on demand and other

performance enhancements

© SAP 2007 / Page 4

© SAP 2009 / Page 5

Lightspeed Rendering

Performance improvements by new “Lightspeed” rendering

Only stylesheet data and client scripting is loaded that really is required for the current screen

Reduction of client side rendering time leading to overall performance improvements

More stable rendering framework

Some changes in look and feel of existing applications (e.g. no paginator for tables any

longer)

Prerequisite for Signature design (WDTHEMEROOT=sap_tradeshow_plus)

New UI elements require Lightspeed

Switched on by default

UI Development on ABAP

© SAP 2009 / Page 6

UI development for SAP Business Applications and Extensions

Web Dynpro ABAP & Floor Plan Manager

Web Dynpro ABAP is the standard technology for new User Interfaces in the SAP Business Suite

CRM UI Framework for CRM only!

Deliver state-of-the-art Web 2.0 experience by including RIA and rich client technologies, where specific use

cases require higher interactivity

Declarative approach: Model-based configuration of applications with full live-cycle support

Accelerate UI standardization and harmonization through SAP’s unified rendering

Access to data in the local ABAP system via native ABAP coding

Targeting all types of ABAP developers to create new and enhance existing applications

CRM UI Framework (restricted use only!)

© SAP 2009 Page 7

Floorplan Manager

Easy and highly productive configuration of applications

The Floorplan Manager is the preferred and mandatory tool for the creation

of new Web Dynpro ABAP applications in the SAP Business Suite

Consistency across Web Dynpro ABAP

applications

Easy configuration of predefined building

blocks

Compliance with

all SAP User Interface guidelines

APIs provided for standard functionality

like event handling and dynamic behavior

Modification free

customers adaptations of Web Dynpro

applications

Full integration in standard SAP Lifecycle

Management

Available for customers: NW 7.0 EHP 1

© SAP 2008 / SAP TechEd 08 / COMP277 Page 8

OIF (Object Instance Floorplan)

Floorplan - provided by FPM

- only configuration

- dynamic behavior is possible

- no coding necessary

Content View- developed by application

- WD Abap coding

Content Area

Different UI Technologies &

FrameworksDynpro

Web Dynpro / FPM

CRM UI Framework

…

Different User Experience

The past …

SAP UI Harmonization Roadmap

Development perspective

Different UI Technologies and

Frameworks.

SAP Signature Design as

common denominator

Common look – first step to

common User Experience

2008

Different UI Technologies

Harmonized Development Env.

Unified UI Guidelines

Enhanced Interoperability

Common look & feel -Harmonized User Experience

2009 ++

UI Development on JAVA

© SAP 2007 / Page 10

UI development in open environments and enabling UI composition

Model-based, visual development

Highly productive UI development based on Model-View-Controller paradigm

Open and integrated toolset with full live-cycle support

Utilizing Java standards as well as SAP specific extensions

Targeting all types of developers – SAP, partners, ISVs and customers

Same tools build Web, Desktop, mobile, and embedded user interfaces

SAP Composition Environment 7.2 with major improvements in openness, Web 2.0 capabilities and productivity

Web Dynpro Java

Visual Composer /

Web Dynpro for VC

Java Server Faces

© SAP 2009 / Page 11

UI Design in Web Dynpro – Advantages and

Limitations

Dozens of UI elements provided, like buttons, checkboxes,

trees, or roadmaps, with specific properties and events

- Adding custom properties/events to existing elements or

adding custom UI elements is not possible

Perfect for most business requirements

Islands as supplements for Web Dynpro

, but maybe not for all.

Layout managers like Flow Layout or Matrix Layout for an easy

arrangement of UI elements

- No pixel perfect layout, no direct manipulation of

HTML/JavaScript

User interaction like F4 help or drag & drop

- Often roundtrips required, no RIA behavior

Web Dynpro Islands (ABAP & JAVA)

Breaking the rules of Web Dynpro

Utilize commonly accepted Web Standards as part of your

Web Dynpro application

Support rich user interaction with Controls

utilizing transition effects, drag & drop, sliders,

tooltips etc.

Available in ABAP and Java

SAP internal governance!

Fully integrated in SAP development environment and

lifecycle.

Supplement to traditional Web Dynpro programming

model – but NOT a replacement for Web Dynpro

Provide first class user interfaces

for each type of end-user

Web Dynpro Islands – Extend Web Dynpro to

match peculiar end-user needs

© SAP 2009 / Page 13

What Is an Island for Web Dynpro?

Data

interchange

possible

Regular programming model known for Web Dynpro

Web Dynpro

Island (displayed in plugin player)

© SAP 2009 / page 14

Island Technology

High Level Roadmap

Based on Adobe Flex / Flash components

Available with CE 7.1 EHP 1 (Java)

Available with NetWeaver 7.0 EHP 1 (ABAP)

Adobe Flash Islands

Based on Microsoft .NET components

Planned for NetWeaver 7.0 EHP 2 / 7.2 (ABAP & Java)

Microsoft Silverlight Islands

SAP internal use only!

Available with NetWeaver 7.0 EHP 1 (ABAP only)

Microsoft ActiveX Islands

Free HTML / Java-Script running inside Web Dynpro

In discussion for NetWeaver 7.2 (Java only)

Web Widgets (HTML Islands)

© SAP 2009 / Page 15

Points to Consider When Using Islands

Highly graphical, rich & responsive user interaction

More freedom and capabilities than native browser rendering

More development and maintenance effort will be needed

Specific UI programming skills needed for Adobe Flex or Silverlight (for control

developers only)

Debugging complexity increases

Meeting SAP accessibility and I18N standards is not automatic

Accessibility

Co-implementation of an alternative, e. g. based on Web Dynpro native

Internationalization

Provide translated texts on the server side and transport them to the client

Performance

Avoid using more than 3 Adobe Flash Islands on the screen

Avoid data aggregation on client side

Provide suitable paging of data

© SAP 2009 / Page 16

Points to Consider When Using Islands (cont’d)

Some standard Web Dynpro features are not provided and must be added

Value help and field help (can be implemented as usual outside the island, however)

Configuration and personalization

Users might realize that two different technologies are at work

Different styles

RIAs (Rich Internet Applications) behave differently from SSR (Server Side Rendering)

applications

Two development infrastructures are required

IDE not integrated into SE80

SAP versioning and transport mechanisms not before upload of application into MIME

Repository (yet, there is an SAP internal build service based on NWDI)

Application Clients

Access your application over different channels

© SAP 2007 / Page 17

Targeting professional user

Accelerated desktop integration

Deep SAPGUI /Dynpro integration

SAP Signature branding and interaction model

Desktop client

Targeting occasional user

Zero footprint – browser based

Simplified navigation and application screens

SAP Signature branding and interaction model

Web client

SAP NetWeaver Business Client

Overview

SAP NetWeaver Business Client for the Business Suite

Shipped with SAP ERP 6.0 EHP2

Tabbed browser-based client supporting SAP GUI integration

SAP NetWeaver Business Client for Business ByDesign

Shipped with SAP Business ByDesign

Multi-window-based with a new smart client rendering engine

for Web Dynpro applications

SAP NetWeaver Business Client

Planned shipment with SAP NetWeaver 7.0 EhP2 and SAP NetWeaver 7.2

Multi-window-based with a smart client rendering engine for Web

Dynpro applications and support of SAP GUI integration

Motivation for Development of Web Dynpro

Web Dynpro

UI definition independent of

client technology

As much abstract declaration as

possible

Different rendering engines for different

(future) UI technologies without

adapting application coding

Web Dynpro

Rendering

Engine

Rendering

Engine

Rendering

Engine

Web

Browser

Smart

Clientother?

???

???

http://.....

XML, deltahttp://.....

HTML, JS

Meta Data<xml>

<wd:xxx>

</xml>

Key Take Aways

SAP provides both web clients and desktop clients to boost

user productivity depending on use case and scenario

Openess towards partners and standards allow for the

flexible extension in a customer environment

Intuitive user interfaces allow for the delegation to

business users for content creation and adaptation

An excellent user experience is the key focus for the UI roadmap

Further Information

SAP Public Web:

SAP Developer Network (SDN):

https://www.sdn.sap.com/irj/sdn/nw-userproductivity

https://www.sdn.sap.com/irj/sdn/nw-ui

https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration

© SAP 2008 / 21

Questions?