You are on page 1of 8

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 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. Click YES.Step 3: You will get a pop up as shown above.

Right click on the CONTEXT and click on create > node. (Here VBAK). which will show the fields of the table. A COMPONENT CONTROLLER. . Step 6: Double click on the Component controller. (Create NODE_VBAK) Step 8: Click on ‘Add Attribute from structure’ button. You will see an empty context. WINDOW and INTERFACE COMPONENTS will be created automatically. A pop up will be displayed on the screen.Step 5: A Web Dynpro component will then be created. Step 7: Enter the details on the pop up as shown below.

This node will be used to store the records for displaying in the ALV output. i.Now you have created a NODE called NODE_VBAK.e. the inputs given by the user. This will be used for storing the values of the input fields. Step 10: Again click on ‘Add attributes from structure’ and select the following fields. . Step 9: Again right click on the context and create another Node called NODE_ALV.

Right click on the Component name (ZSAM_TEST) and click on create > View. Enter the following details on the pop up.Step 11: Now save the component controller. .

Step 13: Drag NODE_VBAK from the right panel to the Context on the left panes. The context will look as the screen shot above. click yes on the pop up. Right click on the ROOTELEMENTCONTAINER and click on create container form. A confirmation message will follow. Step 15: A pop up will appear with a CONTEXT button. . So the screen will look as follows. Navigate to the CONTEXT tab. click on it and select NODE_VBAK. Step 14: Navigate to the LAYOUT tab on the input view. You will see the following screen This screen shows different nodes created in the component controller. Input fields will be created and corresponding labels will be taken from the DDIC. Now the LAYOUT of the view will be displayed. Now the node NODE_VBAK is mapped with the INPUT_VIEW and can be used in it.Step 12: We have now created a view where we will be displaying the input fields and which will accept values from the user.

There will be a create button next to it. . The following pop up will be displayed. the input view will look like this. there is a property called EVENTS. After arranging the elements on the screen. Step 17: In the properties of the button type FIND in front of the TEXT property. Step 19: In the properties on the button. Click on the create button. Step 18: You can play around with different elements and their properties here. This will appear as a caption on the button.< 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.

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. .