Sunday, December 19, 2010

Usage of Modal Dialog Box in Web Dynpro Component


Web dynpro application to navigate and transfer data from main window to the modal pop up and back is explained in the below example. Application has 2 views created, one for input screen for entering customer number and other for modal pop up to display the sales order details for the chosen customer. Another window has to be created for embedding the sales details view as modal pop up.

on action of search sales orders from the main window, sales orders list will be displayed in the pop up and list of sales items will be displayed in the main window for the chosen sales order from the pop up.

The design and execution can be divided into two parts.

  1. Creating WebDynpro component
  2. Creating the application


  1. Create the web dynpro component interface

Transaction code: SE80

  • Mention the Name of Dynpro Component to be created

  • Let the Type Be Web Dynpro Component

  • Give The name of Window to Main Window as Shown

2. Create nodes for sold-to-party, VBAK (sales header) and VBAP (sales item) in the Component controller.

Define the nodes in the component controller for sold-to-party.

3. Define node for sales order data with dictionary structure VBAK with cardinality 0..n.

4. Choose fields for the VBAK node.

5. Create a node for sales order item details with dictionary structure with cardinality 0..n.

6. Create a window sales details for the modal pop up and declare it in the component controller.

7. Create view for entering sold to party

8. Copy and map the nodes of component controller for sold to party, sales order and sales item details.

After the Context mapping is done,

8. Pull sold to party onto layout from container form as input field.

9. Create a button with action of display sales orders for the sold to enter in the view.

10. Method On search to fetch sales order data for the entered sold to and also create and call a window.

11. Code to create a window as modal pop up. select sales orders from vbak and bind it to table.

12. Code to call the pop up

13. Create a table in the layout for the sales item details

14. Create another view for the pop up.

15. Copy the context nodes VBAK and VBAP.

16. Create a table view for the sales order header data.

17. On click of copy action, write the code to retrieve the sales item details for the chosen sales order.

18. Embed the first view for entering sold to in the main window

19. Embed the sales order data view in another window called sales details


20. Create Web Dynpro application.

21. Run the web Dynpro application, enter customer number and hit on search

22. Sales order related to the customer (sold to) will be listed in the modal popup

23. For the chosen sales order in the pop up , sales items will be displayed in the main window.

No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)


Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive