Creating a WebDynpro ALV Application in 30 easy steps
By Sameer Ram Pathak, Infosys
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)
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:
a web dynpro application with ALV component in it.
Open transaction SE80 and from the drop down list select WebDynpro Component.
Enter the application name (Here ZSAM_TEST).
You will get a pop up as shown above. Click YES.
Enter the description on the next pop up as shown in the below
Here the Window name can be changed. It is defaulted
to the name of the application.
A Web Dynpro component will then be created. A COMPONENT CONTROLLER, WINDOW
and INTERFACE COMPONENTS will be created automatically.
Double click on the Component controller. You will see an empty context.
Right click on the CONTEXT and click on create >
Enter the details on the pop up as shown below. (Create NODE_VBAK)
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).
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
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
Step 15: A pop up will appear with a
CONTEXT button, click on it and select NODE_VBAK.
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
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.
here to continue...