Skip to Content

Ever wondered how much of java code do we have to write for a simple Web  Dynpro? Try the sample explained here.


1. NetWeaver Developer Studio version 2.0.7

2. WAS j2EE 6.4 engine.

3. All necessary configs. SLD,JCO destination, etc are in place.


Get the Controlling area and Cost Center Group as input from user.  

Execute BAPI_COSTCENTERGROUP_GETDETAIL and display HIERARCHYNODES table in a  tabular format.

Steps Involved:

1. Create Project.

2. Create Component.

3. Create Model.

4. Create Controller.

5. Map the model elements with Controller elements.

6. Create UI elements.

7. Map the UI elements with Controller elements.

8. Create Application and deploy.

Lets do a example:

1. Start NetWeaver Developer Studio (NWDS).

2. Open Web Dynpro Perspective. (Window->Open Perspective->Web Dynpro)

Note: If you do not see the Web Dynpro menu under Open Perspective click  other to choose Web Dynpro.


3. Create New Web Dynpro project (file->new->project)

4. Choose Web Dynpro->Web Dynpro Project

5. Give it a name (CostCenterGroupDetail) and leave all the other options to  default and click finish.

Note: If you are not at Web Dynpro Explorer tab, switch to it.


6. You should see the project structure as below.


7. Right click on Web Dynpro Components and click create  Web Dynpro Component.

8. Enter the component name and package and leave all other to default and  click finish.


9. Click on the first tab in the diagram view.


10. Right click on the Used Models area and click Create Model (in the  diagram view).


11. Select the radio button  Import Adaptive RFC Model and click next .


12. Enter Model Name , Model package, Default logical system name for  model instances & Default system name for RFC meta data and click next .

Note: Default logical system name for model instances & Default system  name for RFC meta data => These are logical system name created in Web  Dynpro content administration which holds the underlying R/3 system & its logon info for runtime.


13. You will be prompted for log on to SAP system, enter user name ,  password, etc and click next.

      (This is to connect to SAP system to get the  RFC metadata)

14. In the next dialog box, enter the Function Name (BAPI_COSTCENTERGROUP_GETDETAIL) and click  search. Once the search is finished BAPI will be displayed in the detail area. Select the check  box and click next. In the next dialog box just click finish.


15. Right click on a open area in the Custom Controllers and click Apply  Template.


16 . In the dialog box that appears choose service controller and click next.


17. Select the model class and click next.


18. In the dialog box that appears select the check box against Hierarchynodes (Under Output Node), Controllingarea and Groupname. Click next and in the  dialog box that appears just click finish.


19. Now you should see the following in Diagram View.


20. Click on the create a data link icon and then click on CostCenterGroupDetailView drag the mouse and drop it on CostCenterGroupDetailCust controller. This will create the data link  between the View & Controller. And the following window will  appear.


Drag the Bapi_Costcentergroup_Getdetail_Input node under the Context node on  the right side and drop it on the context node on the left side. This will bring  up the following dialog box.


21. Select all the checkboxes and click OK. You will now see a dialog box  visually showing the context mapping like the below pic. Click finish.


22. Right Click on CostCenterGroupDetailView and choose Apply  Template.


23. Select Form template and click next.


24. In the next dialog box choose Controllingarea and Groupname. Click Next  and in the next dialog box just click finish.


25. Again right Click on CostCenterGroupDetailView and choose Apply Template.

26. This time choose ActionButton template. Give a name to the  Button and click next.


27. In the next window, select the Call Method check box and  choose your controller. This will default a method name for execution. Leave it  to default and click finish.


28. Again right Click on CostCenterGroupDetailView and choose Apply Template.

29. This time choose Table template and click next.

30. In the next dialog box select the Hierarchynodes check box. Click Next  and in the next dialog box just click finish.


31. Now Right Click on Application in your project tree (In Web  Dynpro Explorer) and choose Create Application.


32. In the dialog box that appears , give a name for the application and  package and click next.


33. In the next dialog box, choose Use existing component radio  button and click next.


34. In the next dialog box, leave everything to default and click finish.


35. Now the project is over and you can deploy it to the server and run.

(Note: You may sometimes get errors like this.


If so, just double click on the error message. It will take you to the  implementation where the code is written.

Right click inside the implementation area and choose Source->Organize  Imports.).


36. Save the project.

37. Right click on the application you have created and choose Deploy  New Archive and Run.


38. This will open up the browser with the following view.


39. Enter the CO Area and Group name  and click GetDetail to get the  cost center group details.

Note: Try  changing some properties of TABLE UI Element in NWDS, to get  a better view.

So, How Many lines of java code did we write?

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Brian McKellar
    Hallo Raja,
    The right question is more how many mouse clicks did you need:) Yes, this is probably the best thing about the Web Dynpro programming model. We can replace programming with mouse clicks! The benefit is a much stronger programming model where already at design time extensive checking can be done, etc. And I do so hate a mouse!
    bye, brian
      1. Eddy De Clercq
        I’ve seen the preview of the ABAP web dynpro at Teched at it’s not getting simplier. The amount of things one has to do get a simple form on screen is rather contraproductive to my feeling.
        I’m not saying that we dynpro is bad thing in the contrary.
  2. Fahad Saadah
    Hi Raja,

    I noticed the date on your blog. I’m a little behind, but I recently started working on a project that will be using Web Dynpro for Java.

    I followed your example and created exerything exactly as you explained (to the letter!) I ended up with everything except Java code in the executeBapi_Costcentergroup_Getdetail_Input and the action menthod onActionGetDetail! How is this going to work without one single line of code! I’m I missing something here?!


Leave a Reply