step by step procedure for creating an webdynpro...

Prepared by: Gokul of 34

Step By Step Procedure for Creating

an WebDynpro Application

By

GokulNathan Jayaraman

Date: 17-Oct-2008


Background:

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.

Web Dynpro offers the following advantages for application developers: ● The use of declarative and graphical tools significantly reduces the implementation effort ● Web Dynpro supports a structured design process ● Strict separation between layout and business data ● Reuse and better maintainability by using components ● The layout and navigation is easily changed using the Web Dynpro tools ● Stateful applications are supported – that is, if the page is changed and the required data

remains intact so that you can access it at any time throughout the entire application context. Note that stateless applications are not possible.

● Automatic data transport using data binding ● Automatic input check ● User interface accessibility is supported ● Full integration in the reliable ABAP development environment

Pre requisites: To be able to use this Document one has to be familiar with the Object Oriented ABAP Concepts .


Creating an Basic Webdynpro Application:

The Basic Idea Of this Application is to select the Item Details from VBAP and Displaying in ALV.

Two Views are created:

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.

Lets see all these step by step.

1. Go to Transaction Code Se80.

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

it to create a New WebDynpro Application.

3. Select the Webdynpro Component Radio button and provide the Description to create an Application.


4. In case of Abap we use Variables to store variable for further reference, in case of Webdynpro we use Context Nodes to Store data.

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.


7. Please refer the below Picture to create a Node.


8. Enter the Node name, The Data Dictionary name and other Properties.

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.


11. Click Add Attribute from Structure to add the Fields to be included in the Node.

12. Similarly we can create a Node for VBAP.


13. The Next step is to create a View; The View named Input View is used to create a selection screen.


14. Provide the View name and the Description as in the Below Screen shot.


14. After entering the Username and Password in the above screen we can see the Graphical Editor for creating the Input View.

15. Drag and Drop the Container called Group Container into the Graphical Editor.


16 The Next step is Context mapping; the Input View has a Tab Context We need to map The Specific Context Nodes from Component Controller with the View Context.


Drag and Drop the T_VBAK Node from Right Context Which is Component Controller Context into the View Context which is in the Left Side. While Dropping We get a Pop-Up as shown below

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.


18. Select the Node T_VBAK to bind it to the View.


19. The Input Selection screen is created.


20. We can add a Button to Initiate the Input Data Validation and to fetch the Data to Display in the Output.

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.


22. By Default the Layout set is Flow Layout, but we can select Matrix Layout for better Display. Use a Horizontal Gutter to Bring the Button to the Right as shown below. We can move the Elements within the Screen as we wish using the Horizontal Gutter.

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.


24. The Navigation between Different Views is possible in Webdynpro using the Navigation Plugs. There are two Navigation Plugs called Inbound and Outbound Plug.

You can use one of the following options to control event handling when a plug is triggered:


• For an inbound plug, a method called onPlug<plug_name> is generated by default. This method is executed when the inbound plug is called using the outbound plug of the preceding view and a navigation link. Instead of this method, you can also call an existing method or have no event handling performed.

• For an outbound plug, a method called wdFirePlug<plug_name> is generated by default. You can call this method in the implementation at exactly the place where you want to navigate to the next view.

An Inbound Plug called TO_INPUT_VIEW is created in the Inbound Plug Tab.

An outbound Plug called TO_OUTPUT_VIEW is also created for calling the Output View.


25. The next step is to create an Output View to show the ALV output.

26. Insert a View Container UI Element in the Output View.


27. Select the View Container UI Element as shown below.

28. Create a Button in Output View to Navigate to the Input View.


29. The Next step is to bind the Context nodes from Component controller with the Context in the Output View. Drag and Drop both the Node T_VBAK and T_VBAP to the Context in the left hand side.

30. Create a TO_INPUT_VIEW outbound Plug to navigate to Input View in the Output view.


31. Now we need to Bring both the View inside the Window so double click over the Windows given in the Left side which will look like shown below screen shot.


32. Now drag and Drop both the Views from left hand side over the Window shown in the above picture on the Right hand side. After dropping both the views over the Window on the Right hand side the screen will look like as shown below.

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.


34. The Next step is to add the already existing component for creating ALV into our application for that Double click over the Component name shown below. Double click on the yellow highlighted name in the below screen shot.

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 .


37. Now double click on the Controller Usage button over the DATA node in the below screen shot which will open the pop-up as shown in the screen below. We need to select our component and tick Ok.

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.


39. The next step is to embed the Table view of the ALV_TABLE over the View container; we created in the output view. We can right click on the Container in the Window shown below and click Embed View and select the Table view shown in the next screen shot.

40. This is the screen which will be displayed after clicking Embed View.


41. Now click the F4 help button in the View to be Embedded Field. Now select the last row from the Pop-up which is the Table View.

42. The screen after selecting the View is shown below.


43. Now we can create a Method to do some validation on Input Value for VBELN. In the below screen Input_Validation is created for Validating the Input. All are the methods for Input View.

44. Now Its time for Coding…….

Double click on the Input_Validation it will take you to the Editor


where you can copy paste . The below code.

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. * navigate from <CONTEXT> to <T_VBAK> via lead selection node_vbakinfo = wd_context->get_child_node( name = `T_VBAK` ). * get element via lead selection elem_vbakinfo = node_vbakinfo->get_element( ). * get single attribute elem_vbakinfo->get_attribute( exporting name = `VBELN` importing value = item_vbeln ). * get message manager data: l_current_controller type ref to if_wd_controller, l_message_manager type ref to if_wd_message_manager. l_current_controller ?= wd_this->wd_get_api( ). if item_vbeln = '0000000000'. call method l_current_controller->get_message_manager receiving message_manager = l_message_manager . * 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( ). data: condition(72) type c,


itab_where like table of condition, 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, node_vbapinfo type ref to if_wd_context_node , elem_vbapinfo type ref to if_wd_context_element, itab_vbap type standard table of vbap . * navigate from <CONTEXT> to <T_VBAK> via lead selection node_vbakinfo = wd_context->get_child_node( name = `T_VBAK` ). * get element via lead selection elem_vbakinfo = node_vbakinfo->get_element( ). * get single attribute elem_vbakinfo->get_attribute( exporting name = `VBELN` importing value = item_vbeln ). * create where condition if not item_vbeln eq ''. concatenate 'VBELN = ''' item_vbeln '''' into condition. append condition to itab_where. endif. select * from vbap into corresponding fields of table itab_vbap where (itab_where). * navigate to <T_VBAP> node_vbapinfo = wd_context->get_child_node( name = `T_VBAP` ). * Bind table to context node <T_VBAP> node_vbapinfo->bind_table( itab_vbap ). *data:l_column1 type ref to cl_salv_wd_column, * l_value type ref to cl_salv_wd_config_table. * *l_column1 = l_value->if_salv_wd_column_settings~get_column( 'VBELN' ). *l_column1->set_cell_design_fieldname( value = 'CELLDESIGN' ). *l_value->if_salv_wd_column_settings~delete_column( id = 'CELLDESIGN' ). 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.


47. In the next step Enter the Description for the New Application and Click Ok.


48. The Application will be created and would be visible at the left side of the screen below as ZINFY_DYNPRO_BOK.

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.


References: http://help.sap.com

www.sdn.sap.com

step by step procedure for creating an webdynpro...

Documents