CD214 webdynpro.pdf

7/22/2019 CD214 webdynpro.pdf

1/59

1

SAP TechEd 07

CD214

Web Dynpro for ABAP

Overview


2/59

2

SAP TechEd 07

SAP AG 2007, SAP TechEd 07 / CD214 / 2

Learning Objectives

As a result of this workshop, you will be able to:

Understand the Web Dynpro programming model

See the important role Web Dynpro for ABAP plays in SAPs user

interface strategy


3/59

3

SAP TechEd 07

Web Dynpro Motivation

Web Dynpro ABAP Programming Model

Views and Controllers

Component Usage

Adobe Interactive Forms in WD

Portal Integration

Personalization

Enhancements in Web Dynpro

Summary


4/59

4

SAP TechEd 07


Objectives of Web Dynpro

Model-based UI development

Enforce clear separation between UI logic and business logic

Little coding, lots of design

Declarative UI development

Future Proof UI Declaration

Browser, Web Dynpro Client, Mobile Device,

Client technology independent UI definition

Central implementation of user interface standards

Accessibility support

Adobe Forms integration

Centrally provided UI elements

Internationalization support

Supports major platforms

Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)


5/59

5

SAP TechEd 07


Motivation 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

UI development should be independent of rendering technology:

developer should just think about UI design and not worry about HTTP request/response

cycles

No HTML or JavaScript code part of UI definition

no need to care about browser platform, not even if the client is a web browser at all

Whole UI definition (layout, eventing, data binding,...) stored in format

independent of client technology

allows rendering for different UI technologies: browsers, rich clients, future technologies

clients

in case of future UI technology paradigms (WWW forever?) the application UI should still be

usable without redesigning


6/59


7/59

7

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


8/59

8

SAP TechEd 07


Development completely

integrated into ABAP

Workbench

Graphical View Layout design

Declarative UI development

ABAP editor with forward

navigation

ABAP dictionary data types

directly available

Simple remote debugging

Functionality and services of

the ABAP environment

directly usable

ABAP lifecycle management

Transport

Translation

Enhancements

Web Dynpro Development in ABAP

Since the development of Web Dynpro for ABAP applications is completely

integratedinto the ABAP workbench, all the functionality and services known from

the ABAP development are directly usable within Web Dynpro projects.


9/59

9

SAP TechEd 07


Meta-model Declarations and Custom Coding

Meta-model Declarations

Guarantees common app. design

Good for graphical tool support

Screen Layout and Nesting

Navigation and Error Handling

Data Flow

Componentization

...

Custom Coding

Guarantees universality

Good for data-driven, dynamic apps

Implementation of business rules

Dynamic screen modifications

Access to services (files etc.)

Portal eventing

...

Web

Dynpro

Tools

Generated

Code

Generator

Meta-dataCompiler

RunableApp

Custom

Code

Metamodel Concept and Declarative Programming

A Web Dynpro application is developed using a declarative programming approach. Within the

ABAP Workbench there are special tools that allow you to build and abstract representation of

your application in the form of a Web Dynpro metamodel. The necessary source code is then

generated automatically and conforms to a standard architecture known as the Web Dynpro

Framework (WDF).

The WDF allows each controller within a component to have a set of standard hook methods. It is

within these hook methods that any required custom coding can be placed.

In addition to the events provided by the WDF, you can also define your own events for a Web

Dynpro application.

All Web Dynpro applications are constructed from the same basic units. However, through the use

of custom coding in the standard hook methods, the standard framework can be extended to

supply any required business functionality.

Not all implementation decisions need to be made at design time. It is perfectly possible to

implement a Web Dynpro application in which the appearance of the user interface is decided at

runtime. This allows a highly flexible application to be written without requiring the need to directly

write any HTML or JavaScript.


10/59

10

SAP TechEd 07


Original MVC design for decoupling presentation andapplication logic

Request

Response

User Interaction Layer

Business Interaction Layer

Binding Layer

Visualizes the application

data without caring how it

was generated.

Generates the application

data without caring how it

will be displayed.Binds the user and business

interaction layers together. All

intermediate processing is

performed here.

Model View Controller (MVC)

Model

View

Controller

The roots of Web Dynpro Model-View-Controller

SAPs Web Dynpro is built on the foundation of the Model-View-Controller (MVC)

design paradigm originally invented by the Norwegian software designer Trygve

Reenskaug (pronounced TRIG-vuh RAINS-cow) whilst working at Xerox PARC

in the late seventies. The first implementation of this design paradigm was with

the release of the Smalltalk-80 programming language.

MVC was a revolutionary design paradigm because it was the first to describe

software components in terms of: The functional responsibilities each should fulfil.

The message protocols to which each component should respond.

SAP has modified and extended the original MVC specification in order to create

the Web Dynpro toolset.


11/59

11

SAP TechEd 07


Web Dynpro Component Architecture

Business Logic

(Models)

ComponentController

Model 1

Model 2

Contains Usage

declarations

Usage

declarations

W e b D y n p r o C o m p o n e n t

Components

Custom

Controller

Component Interface

Interface

ControllerInterface view

WindowWindowController

View

Layout

View

Controller

M

M

M

M

M

Interface view

SAP Web Dynpro uses principles of MVC paradigm

Controller handle the

user input and steer

the application

Views define the layout

Models hold and

provide the business

logic

Web Dynpros use of the MVC design paradigm

SAP has made several important changes to the standard MVC design paradigm:

Standard MVC allows a model to directly notify a view that it has changed. This has not been

implemented in Web Dynpro.

Standard MVC allows for nested view controllers. This is not permitted in Web Dynpro.

SAP has extended the design concept by adding an aggregation unit known as a component.

The component is both the unit of application development and application reuse.


12/59

12

SAP TechEd 07


Web Dynpro Components

Web Dynpro Component contains

Windows

Views

UI elements

Layout

Controllers

Context Data

Eventing

Methods

Attributes

Component Interface

Interface Contr.

Interface View

Component

Controller

Component

Window

View

ControllerView

View

ControllerView

The main entity of the Web Dynpro programming model is the Web Dynpro

Component.

UI Development projects are organized in one ore several WD components

A WD Component contains the other entities of a Web Dynpro UI:

Views and Windows which define the visible layout

Controllers which define the behavior of the UI


13/59

13

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


14/59

14

SAP TechEd 07


Window

View

Views and UI Elements

View

Is embedded into window

Defines the visible layout viapredefined UI elements

Does not contain any HTML orscripting

UI elements

Are the smallest UI buildingblocks (button, input field,)

Available as provided UIelement libraries

Have properties which steertheir behavior

Can be nested with Container UIelements

Are positioned in hierarchicalstructure

A View describes the layout of a visible part of the WD component. A component

typically contains several views.

The layout of a view is defined by placing UI elements on the view. The UI

elements are provided in UI Libraries.

UI developers declare the view layout with these provided UI elements only

without making any assumptions about the used rendering technology or client.

Especially there is no HTML or JavaScript possible


15/59

15

SAP TechEd 07


Defining View Layout

UI element

libraries

Properties of

selected UI

element

UI

element

tree of

view

View

layout

UI elements are provided in several UI element libraries on the left hand side

The hierarchy of the UI elements can be seen and changed in the UI element

hierarchy at the top right of the workbench.

A view layout is defined by placing UI elements on the view via drag and drop or

changing the UI element hierarchy directly.

Properties of a selected UI element can be defined at the lower right corner

Visible UI elements can be arranged by container UI elements (transparentcontainer, tray,) with specific layout properties (Matrix, Flow Layout,)


16/59

16

SAP TechEd 07


Each UI element object is represented as an abstract class that is independent

of any client presentation layer.

UI Element Categories

Various categories of UI elements are supported

e.g. Button, InputField,

Label

e.g. DateNavigator,

Table, Tree

e.g.

TransparentContainer,

Tray

OfficeControl

Gantt, Network

InteractiveForm

BusinessGraphics,

GeoMap

BI Application Frame

MessageArea

There are numerous user interface elements available for designing the user

interface of a Web Dynpro application.

All available user interface elements are divided into categories and can be

selected using buttons in the view designer.

Simple Standard elements are:

Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex,

DropDownByKey, FileDownload, FileUpload, HorizontalGutter, IFrame, Image,

InputField, InvisibleElement, Label, LintToAction, LinkToURL, ProgressIndicator,RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey, TextEdit,

TextView, TimedTrigger, ViewContainerUIElement

Complex Standard elements are:

DateNavigator, PhaseIndicator, RoadMap, TabStrip, Table, Tree

Container Standard Elements are:

Group, ScrollContainer, TransparentContainer, Tray


17/59

17

SAP TechEd 07


Controller and Context

Controller

Contains the logic of the UIlayer

Implements event handlers

Reads and writes context nodecontent

Each view has its own viewcontroller

Context

Hierarchy of nodes andattributes

Contains the data of the UI

Nodes and attributes can bebound to UI elements

Framework takes care ofupdating the values

View Controller

Context

Node N1

Node N2

Attribute CARR

Attribute DEP_AIRP

Root Node

methodWD_DO_INIT

node = wd_context->get_child_node(N1).

node->set_attribute( name = DEP_AIRP

value = Paris).

Method onAction_GOTO_NEXT


node->get_attribute( name = CARR

value = carrier ).

LH

Paris

Web Dynpro Controller principles Two types of controller exist within a Web Dynpro component: custom/component and view/window.

Custom/component controllers have no visual interface, whereas view controllers do.

All controllers are independent programs yet none function in isolation from the other controllers in thecomponent.

All controllers store their runtime data in a hierarchical data storage area known as the Context.

Unless an explicit controller usage is declared, all the data in a controllers context is private.

Context StructureAll controller contexts are constructed from a hierarchical arrangement of entities known as nodesand attributes. A context always has a parent node known as the Root Node. The root node iscreated automatically when the controller is initialised and always has the same properties.Important: The context root node may not be deleted or modified in any way!

NodesA context node is the main abstraction class used for runtime data storage within the Web DynproFramework. Context nodes are arranged hierarchically and are permitted to have children. Thenode may have attributes or other nodes as children.All the child entities of a node are aggregated into a unit known as an element. A node can thenbe thought of as a collection of such elements in the same way that a table is a collection of rows.The maximum and minimum number of elements permitted in a node collection is controlled bythe cardinality property.All nodes contain an element collection, even if the maximum number of elements within thecollection is limited to one.

AttributesAn attribute is a hierarchical entity within the context that is not permitted to have children. A

context attribute cannot exist without being the child of some parent node be it the context rootnode itself, or some other node.


18/59

18

SAP TechEd 07


View

Window

View Controller

View Controller and View Context

Node BP

Node N2

PART_NAME

PARTNER_ID

Context


node = wd_context->get_child_node(BP).

node->get_attribute( name = PART_NAME

value = part_name ).

T*

Controller

contains methods

and events for

user interactions

T*

Each view has its own view controller

The view controller has its context for the data which is used by the view

Context nodes and attributes can be bound to UI elements

The view controller contains the event handlers which steer the behavior of the

view, for example:

Initialization events which are called when a view is displayed for the first time

Action handlers which are triggered by UI elements like a button click or drop down list boxselection

In general the coding of the controller methods access the context data and not

the UI elements directly.


19/59

19

SAP TechEd 07


View ControllerView

Context Node Elements

Node 2

Context

Node 1 (Cardinality 0...n)

PARTNER_ID

PARTNER_NAME

COUNTRY

Node BP

PARTNER_ID

PARTNER_NAME

COUNTRY

method WD_DO_INIT

* BusPartners: internal table

...

node->bind_elements( partners ).

013

Laur..

FR

012

Asia

JP

011

TECU.

DE

Elements of a

context node

At design time context nodes can be declared as collections (Cardinality 0n)

e.g. for table data

A context node has n elements at runtime depending of the number of rows of

the internal table bound to the node


20/59

20

SAP TechEd 07


View and View Controller Summary

View

Contains the UI

elements

Defines the Layout

UI elements mapped to

context nodes and

attributes

View Controller

Stores data used inview in context

Methods access

context data

Actions for event

handling

Label

Label

View View Controller

Context

Node N1

Node N2

Attribute CARR

Attribute DEP_AIRP

Root Node

methodWD_DO_INIT


node->set_attribute( name = DEP_AIRPvalue = Paris).


node = wd_context->get_child_node(N1).node->get_attribute( name = CARR

value = carrier ).

LH


21/59

21

SAP TechEd 07


Component Controller and Context Mapping

Component Controller

Controller which is the backbone

of the component

Has its own Context

Contains the logic for interaction

with the model (ABAP class,

function modules, BAPIs, Web

Services)

Context Mapping Nodes of Component Controller

context can be mapped to nodes

of other contexts

Framework takes care of data

transport (references)



Context

Root Node

Node 1

Node 3

Node 2

Method show_flights

flights = BO->get

node1 = wd_context->

node1->bind_elements(

flights ).

Model

Class,

ABAP

ObjectsAPI,

BAPIs,

Other WD

Compo-

nent,

Each component has its own Component Controller

The Component Controller has its own context

Context nodes of the component controller can be mapped to nodes with similar structure of

other controller contexts e.g. view controllers

This allows the distribution of data between different views and controllers

Mapped nodes automatically contain the same data without copying because they hold

references to one source

The Component Controller also contains methods for central tasks of the

component, for example methods which encapsulate all interaction to the

underlying business logic

The model which represents the business logic can be a API based on ABAP

Objects, BAPIs, RFS or function modules

If an application consists of several WD components the interaction of one WD

component to a used sub component is also done via the Component Controller


22/59

22

SAP TechEd 07


Component ControllerComponent

Window

View Controller

Node 1


View


Context

Context

Node 1

Node 3

Node 2

Mapping ofcontext data

Context

Method show_bpartners

BPs = BO->get

node1 = wd_context->

node1->bind_elements(

BPs ).

Component

controller connects

to business logic

and gets/sets data

Model Class,

ABAP

Objects API,

BAPIs,

Other WD

Component,

In a typical example the Component Controller contains a method to retrieve data

from the model and context nodes which are filled by these methods

The context nodes of the Component Controller are mapped to the context nodes

of the view controller which are bound to visible UI elements


23/59

23

SAP TechEd 07


Window View Controller

Node 1

Views in Views

MAIN_VIEW

View Controller

Label

SORDER_VIEW

Context

Node 1

Node 2

Context

ViewContainer UI element Views can be structured with ViewContainer UI elements

How they are arranged within each other is declared in the window

ViewContainer

MAIN_VIEW

ViewCont.

SO_VIEW

The mapping of context nodes can also be used to transport data from one view

controller to another view controller.

In this case the context nodes of both view controllers are mapped to the same

context node of the component controller.


24/59

24

SAP TechEd 07


Component ControllerComponent

View Controller

ViewLabel

Press

Context

Root NodeNode 1

Node 2

Attribut1

Attribut2

Window

View Controller

Node BP

Interaction Between Views and Controllers

View

View Controller

Label

View

Context

Node SO


Context

Context

Node BP

Node 3

Node SO

TEC

Mapping of

context data

TEC

011 011

5..3

Context

Method get_sorders

SOs = BO->get

node = wd_cont->

node->bind_table(

SOs ).

OnLeadSelection

wd_comp_cont->

get_sorders()

5..3

The mapping of context nodes can also be used to transport data from one view

controller to another view controller.

In this case the context nodes of both view controllers are mapped to the same

context node of the component controller.


25/59

25

SAP TechEd 07


Context Node at Design Time

Declaration of Context

Nodes

Create metadata which

defines the structure of the

context

Two dimensional hierarchy

like files and folders

But each node can be a

collection

Min and max number ofelements in a node is

steered by Cardinality

(0..1)

(1..1)

(0..n)

(1..n)

SALES_ORDERS (0...n)

SO_ID

SELLER_COMP

CREATE_DATE

Context

ITEM_ID

PRODUCT_NAME

503

ITelo

052007

ITEMS (0n)

The Context at design time

At design time, you are creating the metadata structure within which the runtime

data will live. The diagram above gives the impression that the context structure

is a flat, two dimensional tree, much like the display of directories and files shown

in the Windows Explorer. However, all context nodes are collections, so there

could potentially be multiple instances of each child node and attribute within a

nodes collection.

The Cardinality PropertyEvery context node has a property called Cardinality. This property is composed

of two values that taken together, describe the maximum and minimum number

of elements the node collection may hold at runtime.

Cardinality Minimum: 0 or 1

Cardinality Maximum: 1 or n

Therefore, there are four possible cardinality values (specified as ..)

0..1 Zero or one elements permitted

0..n Zero or more elements permitted

1..1 One and only one element permitted

1..n One or more elements permitted


26/59

26

SAP TechEd 07


Complex Data in Context Node

Context at runtime

Nodes with cardinality (0..n)

can contain several

elements at runtime

Each element can have its

own set of sub nodes at

runtime which are again

collections of elements

Example: Sales Orders with

Items

Items of selected sales order

should be displayed in

second table on the same

view

Each sales order has its own

set of items

View Controller

SALES_ORDERS (0...n)

S_ORDER_ID

AMOUNT

DATE

Context

ITEM_ID

PRODUCT_NAME

501

123.03

051003

SR

Swiss

www

503

99.99

052709

502

403.0

051223

ITEMS

Three dimensional context

You can now see that the structure of the context at runtime will not be the flat,

two dimensional hierarchy seen at design time. Instead, a context node takes on

depth. If you think of the design time structure as occupying the x-y plane, then at

runtime each element in the node collection occupies a position in the z plane

(moving into and out of the page).

Lead Selection

A node's element collection can be accessed using a 1 based index value. It ispossible to flag multiple elements as being selected (controlled by the selection

cardinality property), but only one of the selected elements can be processed at

any one time. The element being processed is referred to as the lead selection

element.


27/59

27

SAP TechEd 07


Window

Navigation Between Views

To define the navigation between two views, you need to create exit

and entry points for each view using outbound and inbound plugs.

Only then you can specify the navigation flow using navigation links

Outbound plug

Navigation link

Inbound plug

Customer

Sales Orders

Customer

Details

Out In

Outbound Plugs

Calling an outbound plug method causes a navigation event to be raised.

Navigation events are special, asynchronous events that are placed into a

navigation queue. Only when all the outbound plugs have been called by all the

views in the current view assembly, will the Web Dynpro Framework enter its

navigation processing phase. Outbound plugs should be named according to the

action that caused navigation away from the current view.

Inbound PlugsInbound plugs are special event handler methods that subscribe to navigation

events raised when outbound plugs are fired. Inbound plug methods are called

only when the navigation queue is processed. This will only take place once all

the views in the current view assembly have fired their outbound plugs and no

validation errors have occurred that would cause navigation to be cancelled.

Inbound plugs should be named according to the reason for which the view being

displayed.

Links

Outbound and inbound plugs are joined together using navigation links.


28/59

28

SAP TechEd 07


Window

View ControllerView

View Controller

CreateOutbound Plug

Plugs and Navigation

View

Create

Inbound Plug

Create

Action

EXIT_VIEW

SHOW_SO

OUT

IN

IN

OUT

SHOW_SORDERS

OnActionSHOW_SORDERS

wd_this->

fire_EXIT_VIEW_plg( ).

HandleSHOW_SO

Create

Navigation

Link


29/59

29

SAP TechEd 07


Component Controller and Navigation Summary


Comp. controller context

contains component data

Nodes can be mapped to

view controller context

nodes

Component methods and

events

Comp controller accesses

model layer

Navigation

Navigation steered by

Inbound and Outbound

Plugs of Views

Component

Controller

Component

View Controller

ViewLabel

Press

Context

Root NodeNode 1

Node 2

Attribut1Attribut2

Window

View Controller

Context

Node 1

View

View Controller

Label

View

Contexth

Root NodeNode 1

Comp. Contr.

ContextRoot Node

Node 1

Node 3

Node 2

Root Node

Label

Method DO


30/59

30

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


31/59

31

SAP TechEd 07


Web Dynpro Component Usage

Reuse of Web Dynpro

Components

Real business applications

usually consist of several WD

components

Reusable components for

dedicated often used tasks in

different applications

Customer address display

Order details

Generic components as part of

the Web Dynpro environment

ABAP List Viewer (ALV)

Select Options

Message Viewer

Inter

faceComp B

Context

Method B

Event E

Comp

Contr.

Context

Method A

Event E

Comp A

Component Usage

The Web Dynpro component is the unit of application reuse. Therefore, if you

want to make use of the functionality within another component, you can declare

the use of that component.


32/59

32

SAP TechEd 07


Web Dynpro Component Usage

Main Component

Sub Comp A Sub Comp B

Main component needs different

functionalities in a given view area View container provides place for

sub components

Several Component Usages to

different sub components with the

same Interface are defined

Which component is used is

decided at runtime

Several main components need

the same functionality Functionality is developed once in

reusable component

Main components declare

Component Usage of sub

component

Sub component is instantiated in

each main component at runtime

Main Comp A Main Comp B

Sub Component


33/59

33

SAP TechEd 07


Web Dynpro Component Reuse

Interface

Controller

Sub Component B

Window

View

Windows of a used component can

be embedded as Interface Views

into own windows or views

Methods, events and context nodes

can be declared as part of the

Interface

Access via Interface Controller with

Context node mapping

Method call, Events raised

Embedding of Interface View

Context

Node

Method B

Event E

Interface

Controller

Sub Component C

Context

Node

Method C

Event E

CompController

Context

Node

Method A

Event E

Main Component A

Window

View

Window

View

View

Subcomponents B C

Methods, events and context nodes, which are flagges as interface can be used by the

calling component

Maincomponent A

Declare a component usage to the subcomponent on the properties page of the current

component

Each controller, which wants to use the interface of the subcomponent has to declare its

usage

The interface view of the subcomponent may be used instead of a view


34/59

34

SAP TechEd 07


Interface Controller

Interface Contr.

Context

Root Node

Node 1

Method SET_AIRP.

Interface View

View ControllerViewLabelPressContextRoot NodeNode 1

Node 2

Attribut1Attribut2LabelLabel

Component

Controller

Concepts: Component Interface

Component Contr.

Context

Root Node

Node 1

Node 3

Node 2

Component

View Controller

ViewLabel

Press

ContextRoot Node

Node 1

Node 2

Attribut1Attribut2

Window

View Controller

Context

Node 1

View

View Controller

Label

View

ContexthRoot Node

Node 1

Node 2

Root Node

Label

method SET_AIRP

Method SORT_FLIGHT

method SET_AIRP

The Component Interface

The component interface consists of two visual parts and one programmatic part.

The interface controller is the programmatic interface that gives a parent component access

to the child components functionality. The parent component can call methods in the childs

interface controller, and these methods can react to events raised by the parent component.

The interface view is the standardized mechanism by which all view assemblies can be

presented through the generic Web Dynpro Framework. By means of the interface view, a

components visual interface becomes a reusable unit, thus allowing you to embed it into a

larger view set.

A component may have zero or more interface views.


35/59

35

SAP TechEd 07


Dynamic Component Usage

Main Component wants to use one

(or several) components of a

special type

Which component will be used is

not known at design time

Developer declares Component

Interface

Main component uses reference of

this interface

Which component is used isdecided at runtime

Other components with this

interface can be developed and

integrated later

Main Component

?

Main Comp

expects

Component

with special

Comp Interface

Concrete Component

Usage is determined at

runtime


36/59

36

SAP TechEd 07


WD Component

Context

Node

Model Class

(Assistance Class)

Structure of WD Applications

UI Layer

WD components contain

the views, buttons,

events,...

Typically WD

components use other

WD components

Model class adapts

backend data for display

Backend Logic

Core business logic

Pref. defined in ESR

WD Component

ContextNode

BackendBackend

Business

Data

Business API

(ABAP Objects, BAPIs,

Web Services, Business

Objects)

WD Component

ContextNode

EnterpriseService Repository

defin

es


37/59

37

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


38/59

38

SAP TechEd 07


Adobe Interactive Forms Integration

Business Scenarios

Online Interactive Form Scenario

SAP system access needed

Full integration into Web Dynpro framework

Context-sensitive value help, online checks

Offline Interactive Form Scenario

No SAP system access needed

Static value help, static checking,

simple arithmetic calculations

Self-contained PDF (XML data+layout)

Form Processing Scenario

Documents get printed, e-mailed,

archived or faxed

Browser with

Adobe Reader plug-in

SAPNWAp

plicationServer

Adobe Reader

offline

Archive

Down- /

Upload

Print

Email

Email /

HTTP

Interactive Form Scenario

For collaborative business processes, you can design Interactive Forms containing drop -

down menus, buttons, text fields and other elements that allow user entries. The form is

rendered in PDF format and you provide it to users in, for example, a browser. Users fill in the

form and save their entries inside the form in XML format. The SAP system extracts the data

saved in the form and stores it in the database for further processing.

In general, you can use such forms in two different scenarios:

- Online: The user is logged on to an SAP system while filling in the form.

- Offline: The user is not logged on to an SAP system while filling in the form. After completing the form, the user

sends the form back to the form provider, for example by e-mail. The providers SAP system then extracts the

data from the form.

Form Processing Scenario

PDF-based documents for mass printing, e-mailing, etc.

You can create PDF-based forms for printing, sending by e-mail or faxing by merging SAP

system data with a form template. You can rely on the proven principle of separation of data

collection and form layout, which provides the required flexibility in the case of changes to one

or the other.


39/59

39

SAP TechEd 07


SAP Application

Bill of Material, Material

properties, Q-Forms, ...

Prefilled according to

location and worker

Forms for Data Acquisition

Interactive Forms used when

Users are familiar with paper-based process

Paper-based forms are well known

Print outs needed locally

Online Interactive Form Scenario: Example

You can use Interactive Forms in scenarios where an employee typically needs to fill in a form in

order to start or advance a related business process.

Lets take the example of an assembly line worker. The worker needs to order new materials to

keep the work going.

In a traditional setup, he would fill in a paper form, sign it and send it on its way by in-house mail.

In the case of an Interactive Form, the worker can log onto the internal company portal and call up

the required form, which is displayed in PDF format in the browser.

The Interactive Form looks like the old paper-based form.

During the time that the form is displayed, the worker is logged on to the system where the

required information will be processed further.

When the form is displayed, it already contains all the relevant information on the worker, such as

his name and last name, the location and cost center he is assigned to, etc. This information was

determined based on the user logon, and automatically prefilled by the system.

Next, the worker fills in the required information on the form. When finished, he submits the form

back to the system using, for example, a button. The data is written to the system, and the

corresponding workflow moves the process to the next step.

Moreover the worker has the possibility to print out the Interactive Form locally.


40/59

40

SAP TechEd 07


What Does it Look Like ?

Paper-like layout

Self-explanatory

Natural look and

feel

User Handling

Save locally

Distribute via email / Portal

Digital signature (future)

Local printing

Background Services

Structured data in XML

Pre-filled application values

Pre-filled list boxes, help values,

Automatic data extraction

and integration in application

PDF forms look like your original paper form, and thus provide the familiar look

and feel users need to execute business processes quickly. Visual integrity and

fidelity of a form increases user acceptance.

Special functions of Adobe Reader allow users, among other features, to save

PDF forms locally, to distribute them via e-mail or an enterprise portal, to print

them out, or (from SAP NetWeaver 2005) to sign them digitally before submitting

them to the system.

All user entries made in a PDF form are stored in XML format and can, thus,easily be transferred back into the SAP system. The integration of Adobe

technology into the SAP development environment also allows for prefilling form

fields with current system information, including context-sensitive list boxes

(value help) comparable to SAPs F4 help.

Upon form creation, the necessary data is automatically extracted from the

backend system. When the form is returned to the system by the user, the XML-

based data is automatically returned to the system.


41/59

41

SAP TechEd 07


Adobe Interactive Forms in WD ABAP

Basic Forms Functionality

Define Form in system

Layout (Adobe Designer)

Data structure

Form is generated

Function for generating PDF

API for setting/getting

data

Integration into Web Dynpro

Place Form in InteractiveFormUI container element

Map context data to forms API

Form is displayed at runtime

Printing

Interactive Form

Adobe Interactive Forms are included into the Web Dynpro development

environment

Interactive Form can be developed directly in the workbench

Interactive Form has Interface for data import and export

Interactive Form UI Container is placed onto view in Web Dynpro component with

the Form as template

The views context can be bound to the Interactive Forms Interface

At runtime the Form is displayed as PDF document in the Acrobat Reader in the

browser with the context data dynamically filled in

The user can fill out input fields in the PDF form document and submit it back to

the system

The context gets the data out of the PDF form

The data is processed by system


42/59

42

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


43/59

43

SAP TechEd 07


Web Dynpro and Enterprise Portal

Portal Integration

Generic iViews for

displaying Web Dynpro

Applications

Easy integration via

Web Dynpro iView

Wizard

Central User

management

Portal eventing support

Object Based

Navigation

Unified branding by

portal themes


44/59

44

SAP TechEd 07


Portal Integration

Web AS ABAP application system

is declared in portal

Server, port,

User mapping

Create iView for WD ABAP

application

iView points to logical backend

server, name space and WD

application

iView is assigned to portal role WD Application

WD Component

Window

View

Application Server Java

Application Server ABAP

Portal iView

SAP Portal


45/59

45

SAP TechEd 07


Portal Eventing

Flexible Interaction

Allows direct interaction

between independent

iViews

Event consumer

subscribes to event

Event raiser fires event

Loose Coupling

EP Client Manager based

(JavaScript Library) iViews can run on dif-

ferent systems

iViews can be implemented

via different technologies

(WD ABAP, WD Java,

BSPs, Portal Components,

JSPs, )

Event

raised in

first iView

Triggers

action in

second

application


46/59

46

SAP TechEd 07


Portal Eventing

Subscribe/Handle event

Get Portal Manager from API

Call SUBSCRIBE_EVENT

Namespace

Event name

Action name

Implement Action handler

Raise event

Get Portal Manager from API

Call FIRE

Namespace

Event name

Event Parameter

Portal iView

SAP Portal

Portal iView

method OnAction

CC = Contr->Get_API().

PM = CC->Get_Portal_Manager

PM->Fire(

namespace = ...

name = ADD_CD).

endmethod.

Method ONACTIONADD.

...

endmethod.

Method wddoinit.

CC = Contr->Get_API().PM = CC->Get_Portal_Manager

PM->Subscribe_Event(

name = ADD_CDaction = ADD).

endmethod.

Method wddoinit.



PM->Subscribe_Event(

name = ADD_CD

action = ADD).

endmethod.

method OnAction



PM->Fire(namespace = ...

name = ADD_CD).endmethod.

Method ONACTIONADD.

...

endmethod.


47/59

47

SAP TechEd 07


Object Based Navigation

OBN

Flexible Navigation scheme

between iViews within the

portal

Business Objects

Abstract representation of

business functionality, for

example Business Partner

Portal admin declaresconnection between iViews and

Operations of Business Object

(showDetails)

Web Dynpro triggers navigation

by calling BO Operation

Portal iView - Shopping Baske

SAP Portal

Portal iView Business Partner Details

B.PartnershowDetails


48/59

48

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


49/59

49

SAP TechEd 07


Personalization and Configuration

Personalization

Typically defines look and feelof application

Steered by user at runtime ofapplication

User and/or role based

Implicit Personalizationprovided out of the box

Explicit Personalization can beimplemented by WD component

Configuration Steers UI and application

behavior (customizing)

Defined by administratorcentrally with configurationeditor

Valid for wholeapplication/system/role


50/59

50

SAP TechEd 07


Personalization and Configuration

Implicit Personalization

and Configuration

UI elements provide

standard personal-

ization capabilities

Visibility and order of

columns in table

Personalization screen

for UI elem./view Data stored per user

Directly available out of

the box without coding

Can be limited


51/59

51

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


52/59


53/59

53

SAP TechEd 07




Component Usage


Portal Integration

Personalization


Summary


54/59

54

SAP TechEd 07


Summary

Web Dynpro is SAPs UI strategy

Declarative, MVC based UIprogramming model

UI definition independent ofrendering technology

Web Dynpro for ABAP availablewith SAP NetWeaver 7.0

Programming model similar toWeb Dynpro for Java

Completely Integrated into theSAP NetWeaver ApplicationServer ABAP


55/59

55

SAP TechEd 07


Further Information

SAP Public Web:SAP Developer Network (SDN): www.sdn.sap.com

Web Dynpro ABAP Forum and ABAP Developer Area

Related Workshops/Lectures at SAP TechEd 2007CD255, Developing User Interfaces with Web Dynpro for ABAP,

Hands On Session

Related SAP Education and Certification Opportunities

http://www.sap.com/education/

NET310 Fundamentals of Web Dynpro for ABAP

NET311 Advanced Web Dynpro for ABAP


56/59

56

SAP TechEd 07


THANK YOU FOR YOUR

ATTENTION !

QUESTIONS SUGGESTIONS DISCUSSION

Q & A


57/59

57

SAP TechEd 07


Please complete your session evaluation.

Be courteous deposit your trash,

and do not take the handouts for the following session.

Feedback

Thank You


58/59

58

SAP TechEd 07SAP TechEd 07


SAP Certifications Related to SAP TechEd Topics

Topic Exam Level Certificate Title Solution Basis

ABAP Professional SAP Certified Development Professional - ABAP System Interfaces with

SAP NetWeaver 7.0

SAP NetWeaver 7.0

ABAP Professional SAP Certified Development Professional - ABAP System Interfaces with

SAP NetWeaver 7.0

SAP NetWeaver 7.0

ABAP Associate SAP Certified Development Consultant ABAP Dev with NetWeaver 2004 SAP NetWeaver 2004

ABAP Associate SAP Certified Development Associate ABAP with SAP NetWeaver 7.0 SAP NetWeaver 7.0

ADM Professional SAP Certified Technology Professional NetWeaver 7.0 Platform SAP NetWeaver 7.0

ADM Professional SAP Certified Technology Professional NetWeaver 7.0 Security SAP NetWeaver 7.0

ADM Associate SAP Certified Technology Associate SAP Web AS Platform with Oracle SAP NetWeaver 2004

ADM Associate SAP Certified Technology Consultant NetWeaver 7.0 SysAd with Oracle SAP NetWeaver 7.0

BI Associate Solution Consultant SAP NetWeaver 04s SAP BI SAP NetWeaver 7.0

E2E Associate SAP Certified E2E Application Management Expert Change Control Mgmt SAP NetWeaver 7 .0

E2E Associate SAP Certified E2E Application Management Expert R oot Cause Analysis SAP NetWeaver 7 .0

Java Professional SAP Certified Development Professional JAVA with NetWeaver 7.0 SAP NetWeaver 7.0

Java Associate SAP Certified Development Associate JAVA with NetWeaver 7.0 SAP NetWeaver 7.0

MDM Associate SAP Certified Application Associate M aster Data Management 5.5 (SP04) SAP NetWeaver 2 004

SM Associate Solution Consultant SAP Solution Manager 4.0 Implementation Tools SAP NetWeaver 7.0

SOA Associate SAP Certified Associate Enterprise Architect Enterprise SOA

XI Associate Certification Development Consultant SAP NetWeaver 2004s SAP NetWeaver 7.0

For a complete listing of certifications, please go to

www.sap.com/services/education/certification


59/59

SAP TechEd 07


Copyright 2007 SAP AG. All Rights Reserved

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 bechanged without prior notice.

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

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, System i, System i5, System p,System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC aretrademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registeredtrademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentionedare the trademarks of their respective companies.Data contained in this document serves informational purposes only. National product specifications may vary.

The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express priorwritten permission of SAP AG.

This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments,and functionalities of the SAP product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that thisdocument is subject to change and may be changed by SAP at any time without notice.

SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other itemscontained within this material. 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 shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. Thislimitation shall not apply in cases of intent or gross negligence.

The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained inthese materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.

Date post:	10-Feb-2018
Category:	Documents
Upload:	chetonas
View:	218 times
Download:	0 times