Professional Documents
Culture Documents
Step by Step Procedure For Creating An Webdynpro Application
Step by Step Procedure For Creating An Webdynpro Application
an WebDynpro Application
By
GokulNathan Jayaraman
Date: 17-Oct-2008
Web Dynpro ABAP is the SAP standard UI technology for developing Web applications in the ABAP
environment. It consists of a runtime environment and a graphical development environment with
special Web Dynpro tools that are integrated in the ABAP Workbench (SE80).
Web Dynpro technology is based on the Model View Controller paradigm, to ensure a clear division
between the definition of the user interface and the implementation of the application logic. Within
this concept, the model retrieves the application data from the back-end system. If you want to
define multiple models, the model must be bound to the relevant Web Dynpro component that the
model is to use.
Pre requisites:
To be able to use this Document one has to be familiar with the Object Oriented ABAP Concepts .
The Basic Idea Of this Application is to select the Item Details from VBAP and Displaying in ALV.
Input View : This View is to create a Selection screen with Vbeln from VBAK.
Output View: The Records selected from VBAP based on the Vbeln will be displayed in
. The Output View.
Both the View will be embedded into a Window and an Application is created for Execution.
2. Select the Webdynpro application from the Drop down list as shown below.
Enter the name of the Webdynpro Application and click the Specs button after
3. Select the Webdynpro Component Radio button and provide the Description to create an
Application.
5. Component Controller is the Place where we create the Context Nodes, The Context Nodes
Created here can be used any where in the Webdynpro Application.
9. Cardinality: Please refer to the Link for more details on Node Properties.
http://help.sap.com/saphelp_erp2005/helpdata/en/7a/787e40417c6d1de10000000a1550b0
/content.htm. To know more about cardinality. But as per my understanding if we create a
node with Cardinality 1…1, the node will be similar to that of a Work Area. If we create a
Node with Cardinality 0… N, The node will be similar to an Internal Table with Work area
and a node created with cardinality 1…N The node will be similar to that of an Internal
Table without header Line.
10. If We are creating a node to store only one row, it’s better to select the Cardinality 1…1.
And use cardinality 0...N for creating a Node to store any number of Records.
15. Drag and Drop the Container called Group Container into the Graphical Editor.
17 Map both the Nodes from the Component Controller into the View Context. After Mapping
we need to bind the Fields in the T_VBAK Node to the Container in the Input View.
In case the SAP Server is slow it takes time to Drag and Drop in that case we can insert
elements into the Graphical Editor like Below Screen Shot.
21. Select the Type as Button and Enter a Name for the Button.
23. Click the Note Pad symbol given next to the “on action” Property to raise an Event after
clicking the Button. An Event called GET_SALES_DATA is created.
You can use one of the following options to control event handling when a plug is triggered:
An outbound Plug called TO_OUTPUT_VIEW is also created for calling the Output View.
30. Create a TO_INPUT_VIEW outbound Plug to navigate to Input View in the Output view.
33. Now we can link the outbound plug of Input View with the Inbound Plug of output View.
Drag and Drop the TO_OUTPUT_VIEW of Input View over the TO_INPUT_VIEW of Output
View Then we will get a Pop-up and after pressing Ok button in the Pop-up we get a chain
symbol saying a link is created between the Plugs. Similarly we can create the Link with
which ever Plug of any view we want to link.
35. Next we can add the Component as shown in the below screen shot, give any name for the
component as “ALV_TABLE”.
36. The next step is to bind the Node T_VBAP of the Output View with the DATA node of the
ALV Component added to our Component. We need to double click on the yellow
highlighted interface controller in the Left hand side it will open the Context nodes of the
Imported Component and We need to map our T_VBAP node to the DATA node .The output
records from T_VBAP will be mapped to DATA Node later it will be displayed in the ALV .
38. After mapping the T_VBAP with the DATA node in the left side, to confirm it if we click on
the data Node, in the Bottom of the screen we can see a Mapping path property which
shows the Mapping of Data node with the T_VBAP.
40. This is the screen which will be displayed after clicking Embed View.
method input_validation .
data:
node_vbakinfo type ref to if_wd_context_node,
elem_vbakinfo type ref to if_wd_context_element,
stru_vbakinfo type if_input_view=>element_t_vbak ,
item_vbeln like stru_vbakinfo-vbeln.
l_current_controller ?= wd_this->wd_get_api( ).
if item_vbeln = '0000000000'.
* report message
call method l_message_manager->report_error_message
exporting
message_text = 'Please Fill the Sales Document Number.'.
endif.
endmethod.
45. After completing the coding for Input validation now we can code for ALV Output.
Double click the Event ONACTIONGET_SALES_DATA to write the Logic into it.
method onactionget_sales_data .
* Calling the Validation method here.
* Check user input
wd_this->input_validation( ).
* navigate to <T_VBAP>
node_vbapinfo = wd_context->get_child_node( name = `T_VBAP` ).
wd_this->fire_to_output_view_plg( ).
endmethod.
46. After writing this code We need to create an Application to Execute our Application.below
follow the steps below to create a Webdynpro Application.
49. After activating all the Objects if there are no errors we can see the Selection screen as
follows.
50. The Last step of the Whole battle can be seen from the below screen.
www.sdn.sap.com