4a_ABAP_UI_WDA

Hans-Dieter Geyer, Klaus Keller, Michael Cuntz, Uwe Klinger, Thomas Jung December, 2012

Highlights and Latest Features of Web Dynpro for ABAP

© 2012 SAP AG. 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.


- Introduction

- Highlights of NetWeaver 7.0 EhP2 and EhP3

- Copy’n’Paste from Excel

- Drag’n’Drop

- HTML5 with HTML Islands

- Outlook

Agenda

EXERCISE

DEMO

EXERCISE

EXERCISE

Introduction


Motivation

Usage of Web Dynpro ABAP at SAP

Widely used in the SAP Business Suite

More than 1,400 FPM applications with EhP6

More than 60% of the FPM applications containing

a freestyle Web Dynpro ABAP component

Customer & Partner Perspective

Extend SAP Standard Applications

Build applications based on SAP Standard

technology

Learn about new features to develop freestyle Web Dynpro ABAP components.


SAP NetWeaver Application Server ABAP Empowering classic & new SAP products

• 50.000+ customers of ABAP-based products

• Millions of ABAP developers, SCN as community

• A thriving partner ecosystem

• Proven, robust and scalable

• Extends into HANA, Mobility and Cloud

• Evolves continuously w/o disruption

• Enables hybrid on-premise/on-demand scenarios

SAP NetWeaver Application Server ABAP, a strong pillar In SAP’s product strategy

HANA

MOBILITY

CLO

UD

SAP NetWeaver in 2013

SAP NetWeaver

Application

Server ABAP

Highlights of NetWeaver 7.0 EhP 2**

and EhP 3**

* used by Suite 7 EhP5 ** used by Suite 7 EhP6


New Features NetWeaver EhP2 and EhP3 (Link)

NetWeaver 7.0 EhP2 NetWeaver 7.0 EhP3

• Value Suggest

• Accordion

• FormLayout

• IconButton

• PanelStack/Panel

• TableMultiEditorCell

• SilverlightIsland

• Drag‘n‘Drop for MatrixLayout

• Delta Rendering enabled

• Enhancement of Configurations

• CTable

• LayoutContainer

• Input History

• Quick Views

• Copy ‘n’ paste from Excel, Lists

• Corbu Theme (SP04)

• HTML Standards Mode (SP05)

• HTML Island (SP05)

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5b/8c3842bb58f83ae10000000a1550b0/frameset.htm

Copy’n’Paste from Excel


Assign event handler

to Input Field

Copy’n’Paste from Excel – MultiValuePaste

1. Select data in Excel

2. Copy to clipboard (Ctrl+C)

Paste (Ctrl+V)

„TABLE“ data


Copy’n’Paste from Excel – Types

Generic paste for Tables MultiValuePaste Standard browser paste

• Works for Table and CTable

• InputField, DropDownBoxes

• WD built-in

• Fills only visible cells

• Example: CTable

• Works for InputField

• Application Coding

• Provides all pasted data

• Example: Select Options

• Works for InputField

• Browser built-in

• Paste a single value

Drag’n’Drop


Drag’n’Drop

match Drag:

- Drag Element

- DragSourceInfo

Drop: - Drop Element

- DropSourceInfo


[BackUp] Drag’n’Drop: Supported Elements

Drag Elements Drop Elements

• Table & CTable: row(s)

• CTable: column header

• Tree: node/leaf

• Caption: caption or as drag handle

• Image: image or as drag handle

• ItemListBox: items

• Accordion: item

• Grid-/MatrixLayout: cell (requires drag

handle)

• Panel: Panel

• PanelStack: Panel

• Table & CTable: before/after/at rows

• CTable: before/after column header

• DropTargetCellEditor: at (C)Table cells

• Tree: before/after/at nodes & leaves

• DropTarget: at arbitrary elements

• ItemListBox: before/after items

• Accordion: before/after/at itema

• Grid-/MatrixLayout: before/after cell

• Panel: at Panel

• PanelStack: before/after/at Panel

HTML5 with HTML Islands


HTML Islands: Overview

HTML

Island

Web Dynpro ABAP

Application

• Embedding HTML into a

Web Dynpro application

• Executing JavaScript from

Web Dynpro

• Sending data from context to client

• Use of 3rd party JS libraries possible

Note: Works only for Standards Mode


HTML Islands: UI Element API

HTML Island

Properties

Context

Binding

Script and Style

Sources from

MIME

Repositories

staticHtml can also be

created via ABAP API IF_WD_HTML_WRITER

to ensure proper

escaping


• Communication between Web Dynpro and HTML Island is done via JavaScript calls, that are created by: CL_WD_HTML_SCRIPT_CALL=>NEW_CALL( )

• That way we ensure a correct escaped JavaScript call

HTML Islands: Communication

org_chart.js ABAP Code

JavaScript Call

WD framework

generates

See Interface

Documentation


HTML Islands: Communication

• Communication from HTML Island to Web Dynpro is done via a JavaScript callback reference,

which can be passed to the HTML Island

JavaScript ABAP


HTML Islands: Life Cycle

Instantiation

• Show Web Dynpro View that

contains HTML Island

Runtime

• Interaction and communication

between Web Dynpro and HTML

Island (JavaScript calls)

• HTML Island stays „alive“ and keeps

its state,even if a roundtrip occurs or

it gets inivisible

Finalizing

• If Web Dynpro View component is

destroyed or HTML Island UI

element is removed, a registered

JavaScript call will be executed

• Clean up of JavaScript resources


ABAP API CL_WD_HTML_WRITER can be used to generate HTML code

Correct escaping is ensured.

HTML Islands: HTML Writer API

ABAP Coding HTML Browser Output

contains


HTML Integration Scenarios

HTMLIsland HTMLContainer IFrame

Use Case

Rich client side functionality

e.g. Charts

Add custom HTML from server;

Also around existing Web Dynpro

Controls

e.g. Custom Background Image,

Custom simple controls

Integration of content as isolated

document

Rendering

HTML to be produced on

Client Side; not touched by

WD framework

HTML to be produced on Server

Side; possibly re-rendered with each

roundtrip

Stable IFrame

Eventing JavaScript Event API for Web

Dynpro

JavaScript Event API for Web

Dynpro

JavaScript Portal Eventing

Embedding Within Web Dynpro DOM Within Web Dynpro DOM Isolated in IFrame

Outlook


The new SAP NetWeaver Theming Tools

Planned Features

HTML5 based Theme Editor

Two views: „Quick Theming“ and “Expert Theming”

Supports Web Dynpro, SAPUI5, NWBC

Runs on WebAS ABAP, Portal and plain web servers

External editing (open source theme format) and custom CSS

possible

Migration of existing portal themes, CSS3 support

Theme Editor

(IE9+/Firefox/Safari/Chrome)

SAP Enterprise

Portal

HTTP Server

(WebDAV)

SAP WebAS ABAP

LESS

Format

UI Extension

Theme

Repository

Web Resource

Repository

HTTP/WebDAV

Load

SaveImport

Old Theme

Format

File System

Web Dynpro SAPUI5 NWBC

HTTP


ABAP Development Tools for SAP NetWeaver Outlook – Web Dynpro ABAP Development Tools

Key Capabilities

WYSWYG UI Layout

Graphical context mapping

ABAP Code editor with code completion

and templates to code faster

Integrated debugging

More Information

ADT on SCN: http://scn.sap.com/community/abap/eclipse

ADT Trial Version: http://scn.sap.com/docs/DOC-29607

ADT on Youtube: http://youtu.be/BXg7xXrEAUw

Related Sessions

CD201: ADT Overview (1h)

CD164: ADT Hands-on (4h)

CD206: ADT SDK Preview (1h)

Web Dynpro ABAP Development Tools is planned to be available with ABAP in Eclipse in a future release

WYSIWYG UI Layout

http://scn.sap.com/community/abap/eclipse

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



http://youtu.be/BXg7xXrEAUw


Web Dynpro ABAP Outlook – Web Dynpro ABAP Runtime

Planned Developments

• ARIA Accessibility Support

• SAPUI5 Integration

• Windows 8 support

Future Outlook

• Client Side Rendering and Progressive

Enhancements

• Optimized UIs for HANA


Further Information

SAP Public Web

scn.sap.com/community/web-dynpro-abap, …/web-dynpro-abap/floorplan-manager

SAP Education and Certification Opportunities

www.sap.com/education

→ NET311 Advanced Web Dynpro for ABAP

→ NET313 Floorplan Manager for Web Dynpro ABAP

Watch SAP TechEd Online

www.sapteched.com/online

Related Sessions @ TechEd

CD167 : FPM Basics – From Feeder Classes to Live Applications (2h Hands-on)

CD268 : Adapting Floorplan Manager and Web Dynpro ABAP Based User Interfaces (2h Hands-On)

CD300 : FPM Basics – From Modeling to Applications (2h Lecture)

CD801 : SAP Browser Support and Strategy (Q&A Session)

TEC201: User Interface Strategy

http://scn.sap.com/community/web-dynpro-abap







http://scn.sap.com/community/web-dynpro-abap/floorplan-manager










http://www.sap.com/education

http://www.sapteched.com/online

Documents

4a_ABAP_UI_WDA