Creating a WebDynpro ALV Application in 30 easy

steps
By Sameer Ram Pathak, Infosys

1.1                           Background

More and more Web based applications are being used for different business processes.
Enterprises use the web-based applications in order to expand their clientele and
suppliers in a cost-effective way. Even in the ERP space there has been a paradigm shift
from creating generic system based applications to creating more universal applications
to make it easy to maintain and for better interaction with other systems.

The SAP Web Dynpro is based on a model driven framework. It is platform independent and
defines a standard structure for UI of applications. Web Dynpro applications are based on
Model View Controller (MVC) design.

1.2                           Pre requisites:

To be able to use this document, one has to be familiar with WebDynpro for ABAP and must
have created an ALV application using Web Dynpro.

PURPOSE: SAP has come up with a lot of tutorials and e-learning documents to train
beginners in this new UI technology. Based on my experience, I am presenting herewith,
certain additions to those. There are code snippets and examples for functionalities, which are
usually desired by the clients in Web Dynpro reports.
 
The ALV application:
Create a web dynpro application with ALV component in it.
         
Step 1: Open transaction SE80 and from the drop down list select WebDynpro Component.
 
Step 2: Enter the application name (Here ZSAM_TEST).
 
Step 3: You will get a pop up as shown above. Click YES.
 
Step 4:  Enter the description on the next pop up as shown in the below screenshot.
Here the Window name can be changed. It is defaulted to the name of the application.
 
Step 5: A Web Dynpro component will then be created. A COMPONENT CONTROLLER,
WINDOW and INTERFACE COMPONENTS will be created automatically.
 
Step 6: Double click on the Component controller. You will see an empty context.
Right click on the CONTEXT and click on create > node.
 
Step 7: Enter the details on the pop up as shown below. (Create NODE_VBAK)

Step 8: Click on ‘Add Attribute from structure’ button. A pop up will be displayed on the
screen, which will show the fields of the table. (Here VBAK).
 

Now you have created a NODE called NODE_VBAK. This will be used for storing the values
of the input fields. i.e. the inputs given by the user. 

Step 9: Again right click on the context and create another Node called NODE_ALV. This
node will be used to store the records for displaying in the ALV output. 
Step 10: Again click on ‘Add attributes from structure’ and select the following fields.  
Step 11: Now save the component controller. Right click on the Component name
(ZSAM_TEST) and click on create > View. Enter the following details on the pop up. 
Step 12: We have now created a view where we will be displaying the input fields and which
will accept values from the user. Now the LAYOUT of the view will be displayed. Navigate to
the CONTEXT tab. You will see the following screen  

This screen shows different nodes created in the component controller.  

Step 13: Drag NODE_VBAK from the right panel to the Context on the left panes. A
confirmation message will follow, click yes on the pop up. Now the node NODE_VBAK is
mapped with the INPUT_VIEW and can be used in it. The context will look as the screen shot
above. 

Step 14: Navigate to the LAYOUT tab on the input view. Right click on the
ROOTELEMENTCONTAINER and click on create container form.  

Step 15: A pop up will appear with a CONTEXT button, click on it and select NODE_VBAK.

Input fields will be created and corresponding labels will be taken from the DDIC. So the
screen will look as follows.  

<  
 Step 16: Now create a button. To create it right click on the ROOTELEMENTCONTAINER
and add button as the button name and select BUTTON from the list as shown below. 

Step 17: In the properties of the button type FIND in front of the TEXT property. This will
appear as a caption on the button. 

Step 18: You can play around with different elements and their properties here. After
arranging the elements on the screen, the input view will look like this.

Step 19: In the properties on the button, there is a property called EVENTS. There will be a
create button next to it. Click on the create button. The following pop up will be displayed.

Enter the corresponding details. An action called ‘ACTION_FIND’ is now created and an EVENT
HANDLER method will also be created automatically to handle this.

Step 20: Now in the similar way create a view called ‘MAIN’. In this view create two elements
of the type ViewContainerUIelement. As shown in the picture below. 
  

Step 21: Click on the ROOTELEMENTCONTAINER of the MAIN view and change the layout
property to MATRIX LAYOUT.  

Step 22: Also click on each ViewConatinerUIElement and change the layout to MATRIX
HEAD DATA. You will get the layout like this. 
Step 23: Navigate to the CONTEXT tab. And MAP both the nodes created in the component
controller. (For mapping refer to Step 12). 

Step 24: Save MAIN view and double click on the Component name (ZSAM_TEST). 

Go to Properties tab of the component and declare the ALV component in it as shown below: 

Here ALV_TEST now stands for the ALV component that we are going to use in the
application.  

Step 25: Now go to ‘Component usages’ in the left side tree and expand ALV_TEST and
double click on the INTERFACECONTROLLER_USAGE.

 
  
 
Step 26: You will see the screen as in the given picture, click on the CONTROLLER USAGE
Button.
 

 
Now the component controller will open in the right side panel as shown above. Drag and drop
the NODE_ALV into the DATA node of the Interface Controller. This will declare a mapping.
Meaning we have just declared which node is going to be displayed in the ALV.
 
Step 27: SAVE everything. Double click the link, WINDOWS > ZSAM_TEST. Drag and drop
MAIN view onto the Window. Now click on the arrow next to MAIN, you will see the two View
containers, Right click on container 1 (CONT1) and click on EMBED VIEW. Embed the Input
View in the first container. Similarly right click on the second container and say Embed View.
Press F4 on the ‘View To Be Embedded’ input box and enter the TABLE view of the
ALV_TEST component. Refer to the screen shots below.
  
( After F4 )

Step 27: The Window will now look like this.

 

Step 28: Now save everything and right click on the Component (ZSAM_TEST).
Click the link Create > Application. Enter the following details.
 
Step 29: Now this is the most important step of all. CODING 
For coding, go to the Input View and click on METHODS, which is the last tab.
There you will find a method ONACTIONACTION_FIND already created. This is the event
handler method of the action FIND.
  

Double click on the method name; on the editor write the following code:
 
METHOD onactionaction_find .
 
  DATA: node_node_vbak           TYPE REF TO if_wd_context_node,
    elem_node_vbak                      TYPE REF TO if_wd_context_element,
    stru_node_vbak                        TYPE if_input_view=>element_node_vbak .
 
* navigate from <CONTEXT> to <NODE_VBAK> via lead selection
  node_node_vbak = wd_context->get_child_node( name =
if_input_view=>wdctx_node_vbak ).
 
 * get element via lead selection
  elem_node_vbak = node_node_vbak->get_element(  ).
 
* get all declared attributes
  elem_node_vbak->get_static_attributes(
    IMPORTING
      static_attributes = stru_node_vbak ).
 
 
  DATA: ls_where(72) TYPE c,
        lt_where LIKE TABLE OF ls_where,
        lt_vbak TYPE STANDARD TABLE OF zstr_vbak.
 
* create where condition
  IF NOT stru_node_vbak-vbeln EQ ''.
    CONCATENATE 'VBELN = ''' stru_node_vbak-vbeln '''' INTO ls_where.
    APPEND ls_where TO lt_where.
  ENDIF.
  IF NOT stru_node_vbak-erdat EQ '00000000'.
    CONCATENATE 'ERDAT = ''' stru_node_vbak-erdat '''' INTO ls_where.
    IF stru_node_vbak-vbeln NE ''.
      CONCATENATE 'AND' ls_where INTO ls_where SEPARATED BY space.
    ENDIF.
    APPEND ls_where TO lt_where.
  ENDIF.
 
  SELECT VBELN ERDAT ERZET ERNAM ANGDT BNDDT AUDAT VBTYP TRVOG AUART
         AUGRU GWLDT SUBMI LIFSK FAKSK NETWR WAERK VKORG VTWEG SPART
         VKGRP VKBUR GSBER GSKST GUEBG GUEEN KNUMV
  FROM vbak INTO TABLE lt_vbak WHERE (lt_where).
 
 
  DATA:
    node_node_alv                       TYPE REF TO if_wd_context_node,
    stru_node_alv                       TYPE if_input_view=>element_node_alv .
 
* navigate from <CONTEXT> to <NODE_ALV> via lead selection
  node_node_alv = wd_context->get_child_node( name = if_input_view=>wdctx_node_alv ).
 
 
* get all declared attributes
  node_node_alv->bind_table( lt_vbak ).
 
ENDMETHOD
 
Step 30: SAVE the application and activate the Component. 
 

Now run the application. Here’s the output 