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.

Click here to continue...

Please send us your feedback/suggestions at webmaster@SAPTechnical.COM 

HomeContribute About Us Privacy Terms Of Use • Disclaimer • SafeCompanies: Advertise on SAPTechnical.COM | Post JobContact Us  

Graphic Design by Round the Bend Wizards

footer image footer image