Step By Step Procedure for Creating an WebDynpro Application

By GokulNathan Jayaraman

Date: 17-Oct-2008

Prepared by: Gokul

Page 1 of 34

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 .

Prepared by: Gokul

Page 2 of 34

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.

Prepared by: Gokul

Page 3 of 34

Component Controller is the Place where we create the Context Nodes.4. in case of Webdynpro we use Context Nodes to Store data. Prepared by: Gokul Page 4 of 34 . 5. The Context Nodes Created here can be used any where in the Webdynpro Application. In case of Abap we use Variables to store variable for further reference.

7. Please refer the below Picture to create a Node. Prepared by: Gokul Page 5 of 34 .

8. 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. the node will be similar to that of a Work Area. http://help. 10. To know more about cardinality. Prepared by: Gokul Page 6 of 34 .com/saphelp_erp2005/helpdata/en/7a/787e40417c6d1de10000000a1550b0 /content. But as per my understanding if we create a node with Cardinality 1…1.. Enter the Node name. If We are creating a node to store only one row. Cardinality: Please refer to the Link for more details on Node Properties.. If we create a Node with Cardinality 0… N. And use cardinality 0. 9. it’s better to select the Cardinality 1…1.htm. The Data Dictionary name and other for creating a Node to store any number of Records.

Prepared by: Gokul Page 7 of 34 .11. Click Add Attribute from Structure to add the Fields to be included in the Node. Similarly we can create a Node for VBAP. 12.

Prepared by: Gokul Page 8 of 34 . The View named Input View is used to create a selection screen.13. The Next step is to create a View.

14. Provide the View name and the Description as in the Below Screen shot. Prepared by: Gokul Page 9 of 34 .

Prepared by: Gokul Page 10 of 34 .

15. After entering the Username and Password in the above screen we can see the Graphical Editor for creating the Input View. Prepared by: Gokul Page 11 of 34 .14. Drag and Drop the Container called Group Container into the Graphical Editor.

Prepared by: Gokul Page 12 of 34 . the Input View has a Tab Context We need to map The Specific Context Nodes from Component Controller with the View Context.16 The Next step is Context mapping.

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. After Mapping we need to bind the Fields in the T_VBAK Node to the Container in the Input View. While Dropping We get a Pop-Up as shown below 17 Map both the Nodes from the Component Controller into the View Context. Prepared by: Gokul Page 13 of 34 .

18. Prepared by: Gokul Page 14 of 34 . Select the Node T_VBAK to bind it to the View.

19. The Input Selection screen is created. Prepared by: Gokul Page 15 of 34 .

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. Select the Type as Button and Enter a Name for the Button. We can add a Button to Initiate the Input Data Validation and to fetch the Data to Display in the Output.20. 21. Prepared by: Gokul Page 16 of 34 .

An Event called GET_SALES_DATA is created. Click the Note Pad symbol given next to the “on action” Property to raise an Event after clicking the Button.22. but we can select Matrix Layout for better Display. Prepared by: Gokul Page 17 of 34 . By Default the Layout set is Flow Layout. 23. We can move the Elements within the Screen as we wish using the Horizontal Gutter. Use a Horizontal Gutter to Bring the Button to the Right as shown below.

24. The Navigation between Different Views is possible in Webdynpro using the Navigation Plugs. You can use one of the following options to control event handling when a plug is triggered: Prepared by: Gokul Page 18 of 34 . There are two Navigation Plugs called Inbound and Outbound Plug.

You can call this method in the implementation at exactly the place where you want to navigate to the next view. For an outbound plug. a method called wdFirePlug<plug_name> is generated by default. 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. you can also call an existing method or have no event handling performed.• For an inbound plug. Instead of this method. • 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. Prepared by: Gokul Page 19 of 34 .

The next step is to create an Output View to show the ALV output. Insert a View Container UI Element in the Output View.25. 26. Prepared by: Gokul Page 20 of 34 .

27. Create a Button in Output View to Navigate to the Input View. Prepared by: Gokul Page 21 of 34 . 28. Select the View Container UI Element as shown below.

Drag and Drop both the Node T_VBAK and T_VBAP to the Context in the left hand side. The Next step is to bind the Context nodes from Component controller with the Context in the Output View. 30. Prepared by: Gokul Page 22 of 34 .29. Create a TO_INPUT_VIEW outbound Plug to navigate to Input View in the Output view.

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.31. Prepared by: Gokul Page 23 of 34 .

Prepared by: Gokul Page 24 of 34 . Now drag and Drop both the Views from left hand side over the Window shown in the above picture on the Right hand side.32. 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. 33. Now we can link the outbound plug of Input View with the Inbound Plug of output View. Similarly we can create the Link with which ever Plug of any view we want to link. After dropping both the views over the Window on the Right hand side the screen will look like as shown below.

The output records from T_VBAP will be mapped to DATA Node later it will be displayed in the ALV . Double click on the yellow highlighted name in the below screen shot. give any name for the component as “ALV_TABLE”.34. 35. 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. Prepared by: Gokul Page 25 of 34 . 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 . Next we can add the Component as shown in the below screen shot. 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. 36.

We need to select our component and tick Ok. 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. After mapping the T_VBAP with the DATA node in the left side. to confirm it if we click on the data Node. Prepared by: Gokul Page 26 of 34 .37. in the Bottom of the screen we can see a Mapping path property which shows the Mapping of Data node with the T_VBAP. 38.

we created in the output view. Prepared by: Gokul Page 27 of 34 . 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.39. 40. This is the screen which will be displayed after clicking Embed View. The next step is to embed the Table view of the ALV_TABLE over the View container.

Now select the last row from the Pop-up which is the Table View. The screen after selecting the View is shown below. 42.41. Now click the F4 help button in the View to be Embedded Field. Prepared by: Gokul Page 28 of 34 .

All are the methods for Input View. In the below screen Input_Validation is created for Validating the Input. 44. Double click on the Input_Validation it will take you to the Editor Prepared by: Gokul Page 29 of 34 . Now Its time for Coding……. Now we can create a Method to do some validation on Input Value for VBELN.43.

endmethod. Prepared by: Gokul Page 30 of 34 . * navigate from <CONTEXT> to <T_VBAK> via lead selection node_vbakinfo = wd_context->get_child_node( name = `T_VBAK` ). method onactionget_sales_data . ref to if_wd_context_element. l_message_manager type ref to if_wd_message_manager. endif.where you can copy paste method input_validation . data: node_vbakinfo elem_vbakinfo stru_vbakinfo item_vbeln . type type type like ref to if_wd_context_node. * get message manager data: l_current_controller type ref to if_wd_controller. if_input_view=>element_t_vbak . 45. The below code. * 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 ). ). Double click the Event ONACTIONGET_SALES_DATA to write the Logic into it.'. After completing the coding for Input validation now we can code for ALV Output. if item_vbeln = '0000000000'. call method l_current_controller->get_message_manager receiving message_manager = l_message_manager . l_current_controller ?= wd_this->wd_get_api( ). data: condition(72) type c. * Calling the Validation method here. stru_vbakinfo-vbeln. * report message call method l_message_manager->report_error_message exporting message_text = 'Please Fill the Sales Document Number. * Check user input wd_this->input_validation( ).

elem_vbapinfo if_wd_context_element. * l_value type ref to cl_salv_wd_config_table. *data:l_column1 type ref to cl_salv_wd_column. stru_vbakinfo if_input_view=>element_t_vbak . *l_column1->set_cell_design_fieldname( value = 'CELLDESIGN' ). After writing this code We need to create an Application to Execute our Application. concatenate 'VBELN = ''' item_vbeln '''' into condition. select * from vbap into corresponding fields of table itab_vbap where (itab_where). append condition to itab_where. wd_this->fire_to_output_view_plg( ). * *l_column1 = l_value->if_salv_wd_column_settings~get_column( 'VBELN' ). * Bind table to context node <T_VBAP> node_vbapinfo->bind_table( itab_vbap ). *l_value->if_salv_wd_column_settings~delete_column( id = 'CELLDESIGN' ). itab_vbap type ref to type like stru_vbakinfo-vbeln. Prepared by: Gokul Page 31 of 34 .below follow the steps below to create a Webdynpro Application. endif. type ref to if_wd_context_node type ref to type standard table of vbap . node_vbakinfo type ref to if_wd_context_node . * navigate to <T_VBAP> node_vbapinfo = wd_context->get_child_node( name = `T_VBAP` ). endmethod. * create where condition if not item_vbeln eq ''. elem_vbakinfo if_wd_context_element.itab_where like table of condition. * 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 ). * navigate from <CONTEXT> to <T_VBAK> via lead selection node_vbakinfo = wd_context->get_child_node( name = `T_VBAK` ). 46. item_vbeln node_vbapinfo . ).

Prepared by: Gokul Page 32 of 34 . In the next step Enter the Description for the New Application and Click Ok.47.

The Last step of the Whole battle can be seen from the below screen. The Application will be created and would be visible at the left side of the screen below as ZINFY_DYNPRO_BOK. 49. 50.48. After activating all the Objects if there are no errors we can see the Selection screen as follows. Prepared by: Gokul Page 33 of 34 .

com Prepared by: Gokul Page 34 of 34 www.References: http://help.

Sign up to vote on this title
UsefulNot useful