Basic Web Dynpro ABAP

Step by step guide

Objective of this document:

To give an understanding and knowledge on advanced technology to everyone who
wanted to have knowledge in the area of Basic Web Dynpro ABAP
 Ver 1.0

Agenda

What is Web Dynpro for ABAP?

Objectives of Web Dynpro
Web Dynpro Component Architecture
Web Dynpro Component Development

Web Dynpro is the SAP Netweaver programming model for user interfaces (UIs).

The Web Dynpro programming model is based on the Model View Controller paradigm,
and has the following features that build on the classic dynpro model:
 Clear separation of business logic and display logic
 Uniform Meta model for all types of user interfaces
 Execution on a number of client platforms
 Extensive platform independence of interfaces

What is Web Dynpro for ABAP?

Web Dynpro for ABAP (WD4A, WDA) is the SAP standard UI technology for
developing Web applications in the ABAP environment. It consists of a runtime
environment and a graphical development environment with special Web Dynpro tools
that are integrated in the ABAP Workbench (SE80).

Web Dynpro offers the following advantages for application developers:

 The use of declarative and graphical tools significantly reduces the
implementation effort
 Web Dynpro supports a structured design process
 Strict separation between layout and business data
 Reuse and better maintainability by using components
 The layout and navigation is easily changed using the Web Dynpro tools

 Stateful applications are supported – that is, if the page is changed and the
required data remains intact so that you can access it at any time throughout the
entire application context.

_______________________________________________________________________
_
Page 2 of 51
 Ver 1.0

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
Central implementation of user interface standards
 Accessibility support
 Adobe Forms integration
 Centrally provided UI elements
 Internationalization support
SAP Web Dynpro uses principles of MVC paradigm
Controller: handle the user input and steers the application
Views : define the layout
Model : holds and provides the business logic

See the MVC Architecture diagram:

Model View Controller (MVC)

_______________________________________________________________________
_
Page 3 of 51
 Ver 1.0

Web Dynpro Component Architecture

A Typical Web Dynpro Component diagram is

Web Dynpro Component contains

Windows
Views
 UI elements
 Layout
Controllers
 Context Data
 Event
 Methods
 Attributes

_______________________________________________________________________
_
Page 4 of 51
 Ver 1.0

Component Interface
 Interface Controller
 Interface View

View
 Is embedded into window
 Defines the visible layout via predefined UI elements
 Don’t contain any HTML or scripting
UI elements
 Are the smallest UI building blocks (button, input field)
 Available as provided UI element libraries
 Have properties which steer their behavior
 Can be nested with Container UI elements
 Are positioned in hierarchical structure

Controller
 Contains the logic of the UI layer
 Implements event handlers
 Implements action handlers
 Each view has its own view controller
Context
 Hierarchy of nodes and attributes
 Nodes and attributes can be bound to properties of UI elements
 Framework cares about updating the values
Each node can be a collection of elements.
Min and max number of elements in a node is steered by
Cardinality
(0...1) The node contains only one element instance, which must not be instantiated
(1...1) The node contains only one element instance, which is instantiated automatically
(0...n) The node can contain multiple element instances, of which none have to be
instantiated
(1...n) The node can contain multiple element instances, of which at least one must
always be instantiated (and is instantiated automatically)

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)

_______________________________________________________________________
_
Page 5 of 51
 Ver 1.0

Context Root Node

Node Elements

Step by step guide to work on Web Dynpro ABAP.

1. Log into SAP system.

2. Enter transaction code SE80 (As shown in the above screenshot) to launch the
Object Navigator, where you can create Web Dynpro Component or Web Dynpro
interface.

Taking an example of a Web Dynpro Component, I will explain you the step by step
procedure how to work on.

_______________________________________________________________________
_
Page 6 of 51
 Ver 1.0

The Expected behavior of the application is to be:

Enter the Flight (Airline Code – CARRID).

Enter Flight Connection Number-CONNID and
Enter Flight date-FLDATE in the initial screen.
Click on ‘Display Flights’ Button to see the List of available flights for given conditions.
The list of available flights needs to be displayed on the WD table in the next screen.

Select the ‘Web Dynpro component /

interface’ option from the dropdown
list as shown here.

3. Enter WD component name in ‘Z’ name space to create new one and press
‘ENTER’.

_______________________________________________________________________
_
Page 7 of 51
 Ver 1.0

Presses “Yes” on popup to create new WD component.

Enter the WD component description and press ‘OK’ button.

Note: When WD component is crated, one view and window will get created default.

_______________________________________________________________________
_
Page 8 of 51
 Ver 1.0

It will prompt to specify package and select “Local Object” button to store
under local objects (temporary-> non transportable)

Now, your new WD component has been created.

Activate the Created WD component to proceed with development.

_______________________________________________________________________
_
Page 9 of 51
 Ver 1.0

How to create a view: Follow the screenshots shown below to create a view.

_______________________________________________________________________
_
Page 10 of 51
 Ver 1.0

Views are embedded into windows and these actually displayed on the WD application
screen when executed.

_______________________________________________________________________
_
Page 11 of 51
 Ver 1.0

It will open a new popup to maintain the View name and description. Click on OK’
button.

Click on ‘SAVE’
‘VIEW’ will contain following methods which can be controlled at view level.
WDDOMODIFYVIEW - Method for Modifying the View before Rendering
WDDOINIT - Controller Initialization Method
WDDOBEFOREACTION - Method for Validation of User Input
WDDOAFTERACTION - Method for non-action specific operations before
Navigation
WDDOEXIT - Controller Clean-Up Method

_______________________________________________________________________
_
Page 12 of 51
 Ver 1.0

A view has exactly one view context, which contains the data required for the view.

Windows
In the Window maintenance screen, If you right-click on window ZWD_EXAMPLE, you
can choose ‘Embed View’ from the Context Menu. Embed the V_FLIGHT_DETAILS
View.
Note: View MAIN is already embedded in to the window, since it has assigned when
WD component was created.

_______________________________________________________________________
_
Page 13 of 51
 Ver 1.0

Select ‘Embed view’  it will open a popup to assign the view to be embedded Click
on F4 to display the number of views that created  select the view
V_FLIGHT_DETAILS.

Click on OK  then it will display the screen as shown below.

_______________________________________________________________________
_
Page 14 of 51
 Ver 1.0

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.
It means you must create an inbound plug for one view and an outbound plug for the
other view

Inbound plugs: define the possible starting points of a view

Outbound plugs: can be used to call a subsequent view.
Every view created in the WD component will have only one inbound plug and multiple
outbound plugs.
In contrast, an inbound plug can be controlled by several outbound plugs.

Select the view ‘MAIN’ to define the inbound plugs as shown in the below screenshots.
Inbound Plug is TARGET_PLUG_NAME

_______________________________________________________________________
_
Page 15 of 51
 Ver 1.0

Select the view V_FLIGHT_DETAILS to define the inbound plugs as shown in the
below screenshot.

Note: Outbound plugs can also be created here, but in our case we are creating the
outbound plugs when buttons are created.
Map the inbound plugs and outbound plugs to happen navigation between views as
shown in the below screenshot. (Click here to see how outbound plugs has created)

_______________________________________________________________________
_
Page 16 of 51
 Ver 1.0

Select the inbound plug (IN_FLIGHT_DET) of view V_FLIGHT_DETAILS and drag

drop at the outbound plug (DISP_FLIGHTS) of view MAIN to make navigation from
MAIN view to V_FLIGHT_DETAILS upon clicking ‘Display Flights’ button.
Select the inbound plug (IN_MAIN) of view MAIN and drag drop at the outbound plug
(BACK_TO_INIT) of view V_FLIGHT_DETAILS to make navigation back to MAIN
view from V_FLIGHT_DETAILS upon clicking ‘BACK” button.

Here, we will describe each and every tab displayed in the Web Dynpro component
controller.

Properties:
Properties will contain details such as description, created by, created on...Etc...You can
see them in the below screenshot.

_______________________________________________________________________
_
Page 17 of 51
 Ver 1.0

Context:
The data used in the component or in the view are stored in the context.
Each context has a root node, underneath which the individual data fields (attributes) are stored in a
tree structure.
This property of a node is known as its cardinality.

Context Programming
Global Interface methods that will be used to work with the contexts
IF_WD_CONTEXT – the context itself
IF_WD_CONTEXT_NODE – a context node
IF_WD_CONTEXT_ELEMENT – an element of a node
IF_WD_CONTEXT_NODE_INFO – context node info

_______________________________________________________________________
_
Page 18 of 51
 Ver 1.0

Follow below steps to create a context node in the current component.

Click on ‘node’

Mention all the details in the popup  click on button to

add the required elements to the current node.

_______________________________________________________________________
_
Page 19 of 51
 Ver 1.0

Select the required elements whichever is used in the initial screen.

Note: You can select as many as number of fields, but since we are going to use only
CARRID, CONNID and FLDATE, we have selected only those.
Click ‘OK’ button.

_______________________________________________________________________
_
Page 20 of 51
 Ver 1.0

Repeat the same steps to create another node (FLIGHT_DETAILS) which will display
flight details on the WD table.

Select the required fields whichever you wanted to show them on the
FLIGHT_DETAILS table.

_______________________________________________________________________
_
Page 21 of 51
 Ver 1.0

Now, we have two nodes created for the current component controller.

The nodes whichever has been created at the component controller level can be used only
at component controller level and the data stored in these nodes can be accessed only at
component controller level.
But, to make use of these nodes at view level, we have to map them irrespective of the
views created in the current WD component.
For that, we will call it as context mapping.

_______________________________________________________________________
_
Page 22 of 51
 Ver 1.0

Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts(views)
WD Framework cares about data transport (references)

Select a view ‘MAIN’  select ‘Context’ tab to do context mapping.

Select the context node from here

(right side) which you wanted to map
with current view drag and drop to
the view level (left side) context.
Here, we wanted to have a mapping
with context node ‘FLIGHT_INPUT’
since the view will be considered as an
initial screen.

See the below screenshot to find, how does it displays when context mapping has been
done to the current view.

_______________________________________________________________________
_
Page 23 of 51
 Ver 1.0

Now, select the second view V_FLIGHT_DETAILS where the flight details have been
displayed, do the context mapping as required.

_______________________________________________________________________
_
Page 24 of 51
 Ver 1.0

Attributes
The following screenshot have 3 attributes.
WD_CONTEXT Reference to Local Controller Context (IF_WD_CONTEXT_NODE)
WD_THIS  Self-Reference to Local Controller Interface
WD_ASSIST  Reference to the Instance of Assistance Class
We also can create our own attributes here depends on the requirement.

Events
Currently, we don’t have any events used
Methods

_______________________________________________________________________
_
Page 25 of 51
 Ver 1.0

These methods are called as hook methods, which comes default when WD component is
created successfully.

WDDOINIT is called automatically when a controller is initialized for the first time.

This method can contain the following steps, for example:

 Creating instances of help classes
 Initializing controller attributes
 Triggering authorization checks (recommended for help classes)
 Setting initial values of the controller context
 Instantiation of used component

As we know this method is used for initializing, send the reference of WD_CONTEXT
(reference of IF_WD_CONTEXT_NODE) to the assistance class.
Method WDDOINIT.
* ------------------------ Initialize Assistance Class --------------

wd_assist->initialize (io_context = wd_context).

endmethod.

WDDOEXIT is called by the runtime when exiting the controller and can be used for
releasing locks, for example.

_______________________________________________________________________
_
Page 26 of 51
 Ver 1.0

Depending on the controller settings, the local controller interface also contains the
methods WDDOBEFORENAVIGATION, WDDOPOSTPROCESSING.

Designing the Layout:

Select the MAIN view here, which acts as initial screen for entering the flight details.

Step1: Inserting element in to the layout.

_______________________________________________________________________
_
Page 27 of 51
 Ver 1.0

If you want to see the detailed documentation for the selected element type, follow the below
screen shot.

Transparent Container UI element allows you to arrange its inserted UI elements through
the specified layout. It makes you to manage the inserted elements very easily.

Repeat the same steps to design the MAIN view as shown here. (Step1 to insert an
element in to the view)

_______________________________________________________________________
_
Page 28 of 51
 Ver 1.0

Click on OK’ button.

_______________________________________________________________________
_
Page 29 of 51
 Ver 1.0

Repeat the same steps to design the view layout to be displayed as shown in the below
screenshot.

Alignment of fields displayed in the view

Select ‘ROOTUIELEMENTCONTAINER’ to maintain the layout properties.
Here, we have four different layouts.
 Flow Layout
 Grid Layout

_______________________________________________________________________
_
Page 30 of 51
 Ver 1.0

 Matrix Layout
 Row Layout

A standard Web Dynpro layout (for Matrix Layout) is used to arrange the UI elements on
the Web Dynpro view.

Recommended to use
‘Matrix Layout’

Select the ‘transparent container’ to set the layout property and recommended to use
‘Matrix layout’ across all the view elements.

_______________________________________________________________________
_
Page 31 of 51
 Ver 1.0

To display the proper

label beside the input
field, assign the proper
input field name to ‘label
for’ property

_______________________________________________________________________
_
Page 32 of 51
 Ver 1.0

Layout Data have two different

properties:
Matrix Data: View element will
align to be in the same line.
MatrixHeadData: To display
the view element in next line.
(As shown in this screenshot)

_______________________________________________________________________
_
Page 33 of 51
 Ver 1.0

Click on the value property displayed

to
Bind the node element to store the given
value in this input field. Upon clicking, it
will open a popup to bind the node element
as shown here.

Follow the same steps to bind the corresponding ‘node elements’ to the other ‘view
elements’.

_______________________________________________________________________
_
Page 34 of 51
 Ver 1.0

Create a button ‘Display Flights’. Upon clicking this button we will navigate to next
screen where we can see the list of available flights.

_______________________________________________________________________
_
Page 35 of 51
 Ver 1.0

The UI element Button represents the pushbutton on the screen. Create an event handler
to execute when button is pressed.
Click on ONACTION event  it will open a new popup  maintain the action name and
outbound plug as shown here in the below screenshot.

Click OK button  it will ask you to create an outbound plug  click YES.

_______________________________________________________________________
_
Page 36 of 51
 Ver 1.0

ONACTIONDISP_FLIGHTS event handler has been created in the view MAIN.

Use SOTR_EDIT transaction to create OTR text.

Click Create button to create a OTR text.  Click ‘SAVE’  OTR text is created

_______________________________________________________________________
_
Page 37 of 51
 Ver 1.0

Copy the Alias name from OTR text  Specify the text property for view element as
‘$OTR:$TMP/DISP_FLIGHTS’ as shown in the below screenshot (Red colored circle).

Now, Activate the WD component

_______________________________________________________________________
_
Page 38 of 51
 Ver 1.0

Select the view V_FLIGHT_DETAILS to design the layout.

Select the table element that created  right click on it select ‘create binding’ property
to create the table columns.

_______________________________________________________________________
_
Page 39 of 51
 Ver 1.0

Click on ‘Data source’

property to bind the
node, where the selected
elements from the node
can be displayed as table
columns.

Click OK button on the ‘Define context binding’ popup  now create binding to the
table element.

It displays an popup as shown in the below screenshot do as shown in the screenshot

check the checkboxes to make sure the number of columns displayed in the table.

_______________________________________________________________________
_
Page 40 of 51
 Ver 1.0

Now, the view will be displayed as shown in the below screenshot.

Do the same to create a BACK button in this view (follow the same how created ‘Display
Flights’ button created in the MAIN view)

_______________________________________________________________________
_
Page 41 of 51
 Ver 1.0

Click on this button 

will open a popup to
create an event for this
action.

Activate the WD component once again.

Working with the Assistance Class

For each Web Dynpro component, you can create a uniquely assigned assistance class.
This class should inherit from the abstract class

_______________________________________________________________________
_
Page 42 of 51
 Ver 1.0

CL_WD_COMPONENT_ASSISTANCE. The assistance class of a component provides

the following advantages:

You can store coding there that is required within the component, but is not linked
directly with the layout or with the function of a controller. This could be, for example, a
call of the application layer or UI-based editing of the data.
Method calls of the assistance class are much better from a performance point of view
than calls of methods of a Web Dynpro controller.

The second important function of the assistance class is the management of dynamic
texts. Texts that are combined at runtime only and/or contain variables can be stored in
the text pool of the assistance class as text symbols.
The assistance class is automatically instantiated when a component is called. The
instance is available to each controller of the component through the attribute
WD_ASSIST.

Select WD component (double click)  Give an assistance class name in the place of
input field. (Red Color circle from below screenshot)

Press ‘ENTER’ button  it will ask you to create an assistance class for this
component click YES  Save as local object  save the WD component and activate.
Now we can work with assistance class.
Create 2 methods in the assistance class.
GET_FLIGHT_DETAILS is to get the list of flight details and
INITIALIZE is to initialize the assistance class

_______________________________________________________________________
_
Page 43 of 51
 Ver 1.0

Write the following code in method INITIALIZE with one importing parameter
(see below screenshot)
Method INITIALIZE.
mo_context = io_context.
Endmethod.

Write the following code in method GET_FLIGHT_DETAILS (see below

screenshot)
METHOD get_flight_details.

TYPES: BEGIN OF ty_flight,

carrid TYPE s_carr_id,
connid TYPE s_conn_id,
fldate TYPE s_date,
price TYPE s_price,
currency TYPE s_currcode,
planetype TYPE s_planetye,
seatsmax TYPE s_seatsmax,
seatsocc TYPE s_seatsocc,
paymentsum TYPE s_sum,

_______________________________________________________________________
_
Page 44 of 51
 Ver 1.0

END OF ty_flight.
DATA: lo_nd_flight_input TYPE REF TO if_wd_context_node,
lo_el_flight_input TYPE REF TO if_wd_context_element,
lo_nd_flight_det TYPE REF TO if_wd_context_node, "FLIGHT_DET
node reference
lo_el_flight_det TYPE REF TO if_wd_context_element,
ls_flight_input TYPE ty_flight,
lt_flight_det TYPE STANDARD TABLE OF ty_flight.

***get the reference of node 'FLIGHT_INPUT'

lo_nd_flight_input = mo_context->get_child_node( name = 'FLIGHT_INPUT'
).
lo_el_flight_input = lo_nd_flight_input->get_element( ).
CALL METHOD lo_el_flight_input->get_static_attributes
IMPORTING
static_attributes = ls_flight_input.

IF ls_flight_input IS NOT INITIAL.

SELECT carrid
connid
fldate
price
currency
planetype
seatsmax
seatsocc
paymentsum
FROM sflight
INTO TABLE lt_flight_det WHERE carrid = ls_flight_input-carrid OR
connid = ls_flight_input-connid OR
fldate = ls_flight_input-fldate.

ELSE.
***Raise an error message, if there are no input given in the main scre
en
RETURN.
ENDIF.
***get the reference of node 'FLIGHT_DETAILS'
lo_nd_flight_det = mo_context->get_child_node( name = 'FLIGHT_DETAILS'
).
***Bind the internal table to the node 'FLIGHT_DETAILS' to display in t
he next screen
***which has list of flights available for the given conditions
CALL METHOD lo_nd_flight_det->bind_table
EXPORTING
new_items = lt_flight_det.

ENDMETHOD.

_______________________________________________________________________
_
Page 45 of 51
 Ver 1.0

Click on the ‘pattern’ button to read the method from interface

IF_WD_CONTEXT_ELEMENT.

Upon clicking the ‘Display Flights’ button we have to get the list of flights available for
the given filter criteria  call the method GET_FLIGHT_DETAILS.
Since method can only be called (Reference of Assistance class (wd_assist) is not
available at view level) from component controller method create a method at component
controller level and then this method will be executed and then we can see the list of
available flights in the next screen.

Write code as shown below at view ‘MAIN’ (see below screenshot)

At component controller level, there is a call given to the assistance class.

_______________________________________________________________________
_
Page 46 of 51
 Ver 1.0

When this method is executed, it will

return all the available flights for the
given filter criteria.

Create an Application to execute and see the output

Select the WD component rights click on it  create WD application

_______________________________________________________________________
_
Page 47 of 51
 Ver 1.0

Click OK  Save it as local object  we see below screen  activate

_______________________________________________________________________
_
Page 48 of 51
 Ver 1.0

If you don’t see the below screen, probably you can refresh or launch the WD
component once again.

Now, Execute the WD application  Do as shown in the screenshot to test it.

_______________________________________________________________________
_
Page 49 of 51
 Ver 1.0

You can see the initial screen, where you will have to enter the filter criteria  click on
‘Display Flights’ button.

_______________________________________________________________________
_
Page 50 of 51
 Ver 1.0

Here, you can see the list of available flights for the given filter criteria.

_______________________________________________________________________
_
Page 51 of 51