CHAPTER 9

ABAP Course
Chapter 9: Web Dynpro

Content
This chapter explains the main
concepts of Web Dynpros. The MVC
concept is applied throughout the
exercise.

Prerequisites
You should be familiar with ABAP, the
MVC concept and navigation in the
SAP system.

Motivation
This chapter explains how to create a
simple
Web Dynpro application.
Furthermore it shows how to set up
navigation between different Web
Dynpro views.

Lecture notes
A fundamental understanding of
programming language ABAP and the
SAP development environment is a
prerequisite for the students.

Product: All

Level: Beginner

Focus: Programming

Version: 1.0

Author: UCC Technische Universitt Mnchen

2010 SAP UCC Technische Universitt Mnchen

Page 1

CHAPTER 9
Task 1: Login into the SAP system
Short description: Use SAP Gui to login into the SAP system with your username
and password

Login

Start the SAP Gui and login into the development system using the provided
account and password. Please refer to chapter 1 for your username and your
password.
Task 2: Creating a Web Dynpro application
Short description: In this exercise you will create a Web Dynpro application that
shows flight information. You can search for flights by carrier, and all flights found
will be shown in a table. You are going to use a BAPI to access the flight
information.
Please start the Object Navigator from the SAP Easy Access Menu by using the
following path:

Menu path

Tools ABAP Workbench Overview Object Navigator.

You may also use the transaction code SE80 for direct access.

Web Dynpro Component Create

a new Web Dynpro Component named

ZY_##_FLIGHT_APP. Select Display. In the dialog
box that appears, select as type Web Dynpro
Component and enter Flight Application ## as description of the object.
Assign the component ZY_##_FLIGHT_APP to your package. The newly created
Web Dynpro component ZY_##_FLIGHT_APP can be viewed in the object tree.

View MAIN Click on the Web Dynpro component ZY_##_FLIGHT_APP in the

object tree and open the context menu to create a new view. Create a
view using MAIN as technical name. The Layout tab and the View Designer can
be accessed by clicking on the Button
. Save the view MAIN.
After saving the view, it is displayed in the object tree of the Web Dynpro
component under the entry Views.

Service Call You will use the function module BAPI_FLIGHT_GETLIST to access

the flight data. Therefore you will create a Service Call to call the
function module. To create a service call, you can use the wizard
within the Web Dynpro tools in the ABAP Workbench. At first, position
the cursor on the top node of the Web Dynpro component ZY_##_FLIGHT_APP.
Use the context menu to choose the entry Create and then the entry Service Call.

Press Continue.

2010 SAP UCC Technische Universitt Mnchen

Page 2

CHAPTER 9
In the following dialogue, you can choose whether the existing controller will be
used or whether a new controller is to be created for this purpose. As you are going
to use the existing component controller to call the function module, check the
radio button Use Existent Controller and enter COMPONENTCONTROLLER as
Controller.
Press Continue.
Select the radio button Function Module to determine the service type.
Press Continue.
Enter the Function Module BAPI_FLIGHT_GETLIST.
Press Continue.
Adapt the suggested context information as following: Change the ObjectType for
Parameter Airline and Flight_List to the value Context (Node/Attribute).

Press Continue.
Now you can specify the method name. You can use the suggested default values,
that should be as following:
Component:
Controller:
Method:

ZY_##_ FLIGHT_APP
COMPONENTCONTROLLER
EXCUTE_BAPI_FLIGHT_GETLIST*

Press Continue and Complete. The component controller context now displays
the corresponding context nodes used in the function module call. Furthermore, the
controller method EXECUTE_BAPI_FLIGHT_GETLIST is now existent. Switch to
the Methods tab of the component controller and display the source code of the
controller method EXECUTE_BAPI_FLIGHT_GETLIST. The method reads flight
data for a specified Airline and assigns the resulting table to the context node
FLIGHT_LIST.
Save your changes using the Save

Button

Context Mapping In a next step, you define the context mapping from the global

component controller context to the local view context. In the

view MAIN choose the tab Context. Map the context nodes
IMPORTING and FLIGHT_LIST to the view context of view
MAIN by drag and drop of the nodes from the component controller context to the
view context root node.

2010 SAP UCC Technische Universitt Mnchen

Page 3

CHAPTER 9

A pop-up window will ask you if you want to copy and map the selected node.
Press Yes for each node. Now you have finished the context mapping. Save your
changes.

Group In a next step, you define one input field Airline and one Search button in

the view. Switch to the Layout tab of the view MAIN. Insert a new group
element into the ROOTELEMENTCONTAINER named GROUP_1 using the
context menu. In the properties windows, enter a width of 100% for
GROUP_1 and enter Search flights as Caption text.

Container Form Create a new Container Form in the context menu of GROUP_1.
In the window displayed, choose Input field as Standard Cell
Editor. Click on the Context button and double click on the
context node IMPORTING. Press ENTER.

2010 SAP UCC Technische Universitt Mnchen

Page 4

CHAPTER 9

Button Additionally, create a button within GROUP_1, by right clicking the

GROUP_1 element below the ROOTUIELEMENTCONTAINER and select
Insert Element from the context menu. Choose the type Button and name it
BUTTON_SEARCH. The button will be placed in the group container. Set the
property Text of BUTTON_SEARCH to the value Search Flights.

Action Create an action SEARCH_FLIGHTS, which is triggered by the Web

Dynpro event onAction. Therefore select the event onAction in the
properties table of BUTTON_SEARCH. Click the icon
to define a new action.
Enter the action name and press ENTER.

Now
the
event
handler
for
the
action
SEARCH_FLIGHTS
(ONACTIONSEARCH_FLIGHTS) needs to be modified. Double click on the action
SEARCH_FLIGHTS in the properties window of BUTTON_SEARCH. You are now
directed to the generated event handler method ONACTIONSEARCH_FLIGHTS.
A call to the controller method EXECUTE_BAPI_FLIGHT_GETLIST has to be
inserted into this method. Therefore, click on the Web Dynpro Code Wizard
and choose the option Method Call in Used Controller. Select the component
Name
ZY_##_FLIGHT_APP
and
the
controller
method
EXECUTE_BAPI_FLIGHT_GETLIST.

Select Continue.

2010 SAP UCC Technische Universitt Mnchen

Page 5

CHAPTER 9
The generated coding should look as following:
method ONACTIONSEARCH_FLIGHTS .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_componentcontroller =
wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->execute_bapi_flight_getlist( ).
endmethod.

Table Now switch to the Layout tab of the view and create a table

TABLE_FLIGHTS.
Therefore
click
right
on
the
ROUTUIELEMENTCONTAINER and chose Insert element. Enter the
TABLE_FLIGHTS and chose the type table. Set Flights as caption text and a
width of 100%.
Create the data binding between the element TABLE_FLIGHTS and the context
node FLIGHT_LIST by using the Create Binding option in the tables context
menu.

Click on the Context button and double click on the context node FLIGHT_LIST.
Activate binding for all context attributes. Press Continue and save all changes.

Embedd view into window Now the view MAIN needs to be embedded into

Window ZY_##_FLIGHT_APP. Select the window

ZY_##_FLIGHT_APP in the object tree. Open the view
structure and drag and drop the view MAIN into the
window structure on the right hand side. Open the
window structure on the right hand side and check if the view MAIN view is
embedded in the window. Save your changes.

Activation and Testing Activate

all objects of Web Dynpro component

ZY_##_FLIGHT_APP. Create the Web Dynpro application
ZY_##_FLIGHT_APP, using the context menu of Web
Dynpro component ZY_##_FLIGHT_APP. Assign the Web
Dynpro application to your package.
Run your Web Dynpro application using the Test/Execute
Your now should be able to search for and display flights.

2010 SAP UCC Technische Universitt Mnchen

Button.

Page 6

CHAPTER 9

2010 SAP UCC Technische Universitt Mnchen

Page 7

CHAPTER 9

Task 3: Creating a Web Dynpro with navigation

Short description: Now you are going to extend the Web Dynpro application
created in Task 2. You will add another view that shows additional information for a
selected flight.

View ADD_INFO Click on the Web Dynpro component ZY_##_FLIGHT_APP in

the object tree and open the context menu to create a new view.
Create a view using ADD_INFO as technical name. Save the
view ADD_INFO.

Go to the context view of the COMPONENTCONTROLLER and add a new sub

node ADDITIONAL_INFO as child of the FLIGHT_LIST node.

Enter ADDITIONAL_INFO as node name. Select 0..1 for the cardinality in the
properties of the node. The structure BAPISFLADD is the assigned dictionary
structure. Enter a supply function with the name get_add_info. Then click on Add
Attribute from Structure.

2010 SAP UCC Technische Universitt Mnchen

Page 8

CHAPTER 9
Select all fields and press continue. The new node ADDITIONAL_INFO should be
displayed as a sub node of the node FLIGHT_LIST and contain the selected
attributes. Double click on the supply function GET_ADD_INFO in the properties
panel. During runtime, the node ADDITIONAL_INFO will be filled with additional
flight data dependent on the parent nodes lead selection. The lead selection is
represented by the specific flight selected in the table of view MAIN.
The method GET_ADD_INFO therefore first has to determine the current data of
the parent node, that can be retrieved via the parent_element object. For retrieving
the additional information about a selected flight, the function module
BAPI_FLIGHT_GETDETAIL is used. Enter the following coding for method
GET_ADD_INFO:
method get_add_info .
data ls_parent_attributes type wd_this->element_flight_list.
parent_element->get_static_attributes(
importing
static_attributes = ls_parent_attributes ).
** data declaration
data ls_additional_info type wd_this->element_additional_info.
** service call
call function 'BAPI_FLIGHT_GETDETAIL'
exporting
airlineid
= ls_parent_attributes-airlineid
connectionid
= ls_parent_attributes-connectid
flightdate
= ls_parent_attributes-flightdate
importing
additional_info
= ls_additional_info.
.
** bind a single element
node->bind_structure(
new_item
= ls_additional_info
set_initial_elements = abap_true ).
endmethod.

Now open the context tab of view ADD_INFO. Navigate to the context node
ADDITIONAL_INFO of the component controller context and drag and drop it to the
local context of view ADD_INFO.
In the tab Layout of view ADD_INFO add a new group GROUP_2. In the
properties window, select GridLayout as Layout. Assign Additional Information
as Caption text.
Now add a Container Form to GROUP_2. Select ADDITIONAL_INFO as context
node and Input Field as Standard Cell Editor. Press continue.
Finally, add a Button to GROUP_2. Name the button BUTTON_BACK and enter
Back to search as text in the properties window.
Now you have to setup the navigation between the view, using inbound and
outbound plugs. Create an inbound plug DISPLAY_ADD_INFO on the Inbound
Plugs tab of view ADD_INFO. Furthermore, create an outbound plug
BACK_TO_SEARCH on the Outbound Plugs tab of view ADD_INFO.
Now go to the layout tab of view ADD_INFO and select the Button
BUTTON_BACK. In the properties window, create an new action BACK for even
onAction. Enter BACK_TO_SEARCH as Outbound Plug.

2010 SAP UCC Technische Universitt Mnchen

Page 9

CHAPTER 9

Save your changes.

Now go to view MAIN and create an inbound plug SEARCH on the Inbound Plugs
tab and an outbound plug SHOW_ADD_INFO on the Outbound Plugs tab of the
view.
On the layout tab of view MAIN, create a new Button BUTTON_ADD_INFO for root
element ROOTUIELEMENTCONTAINER. The button should be shown below the
flight table. Enter Show additional information as text in the properties window.
Furthermore, create an new action ADDITIONAL_INFO for even onAction of this
button. Enter SHOW_ADD_INFO as Outbound Plug.
Finally, you have to link the outbound and inbound plugs of the two views in the
window structure. First, add the view ADD_INFO to the window
ZY_##_FLIGHT_APP by drag and drop.
In a next step, create navigation links between view MAIN and view ADD_INFO
using the context menu of the outbound links.

The navigation links created should look as shown below.

2010 SAP UCC Technische Universitt Mnchen

10

Page

CHAPTER 9

Run your Web Dynpro application using the Test/Execute

Button.
You now should be able to show additional information for a selected flight.

2010 SAP UCC Technische Universitt Mnchen

11

Page