Introduction ABAP Web Dynpro ( WDA )

Web Dynpro ABAP Development is unlike other ABAP Object development such as report program, module pools, etc. in WDA Development is component based software component. WDA Development is to break the software down into smaller modules that are easier to understand and maintain individually called decomposition.

In this article we will show you how to create Simple Web Dynpro Application.

1.Go to SE80 and Create Web Dynpro Comp/Intf. In this example we will create Web Dynpro Comp with the name of ZTEST_WEBDYNPRO.

create webdynpro abap application

2.Open COMPONENTCONTROLLER by double clicking in the Component Controller underneath the WDA Component in the navigation of Web Dynpro Explorer.

create webdynpro abap application

3.Create CONTEXT by right clicking on top level node Context and select Create->Node in menu option. this will open up Create Node dialog box, enter the name of context USER_DATA and let’s the rest of fields as default values.

create webdynpro abap application

4. After Context node USER_DATA is created, you can continue to create context attributes, you can do this by right-clicking on USER_DATA context and select Create->Attribute.

create webdynpro abap application

5.Create Context Attribute USERNAME with type XUBNAME, this attributes was created is same with exporting parameter ADDRESS from BAPI_USER_GET_DETAIL. Continue to create other attributes. until you have attributes context as picture below.

create webdynpro abap application

6. Implementing your method GET_USER_DATA because WDA Component lead to the component controller, this is vital role. Go to Methods tab in Component Controller.

create webdynpro abap application

In this example we dont need to define any parameter because the data exhange will flow through the component controller context automatically ( using data binding and context mapping ) , next we need to add ABAP Code to call BAPI_USER_GET_DETAIL in GET_USER_DATA method , double click on that’s method.

7. Create view, ABAP Webdynpro will create MAIN as default view, double click on MAIN view. to open Layout Editor

create webdynpro abap application

Double click on ROOTUIELEMENTCONTAINER and select Gridlayout as layout, then right click on ROOTUIELEMENTCONTAINER and select menu Insert Element. this will open up dialog box to create UI Element. for this example enter the name LB_USERNAME.

Next we create InputField element as picture below.

create webdynpro abap application

8. Create Context View by Dragging from existing Context node, Go to Context in View.

create-webdynpro-abap-application-9

9. Next you need to bind this UI Element with context attribute , click Value and then select USERNAME from context.

create-webdynpro-abap-application-10

10. Set Label UI Element for INP_USERNAME Element View, as picture below.

create-webdynpro-abap-application-11

11. Next you need to create Button UI Element, and enter the name of button is BTN_SEARCH, You can refer to step 7 to create UI Element.

create-webdynpro-abap-application-12

12. Create new View, V_DETAIL and right click on ROOTUIELEMENTCONTAINER and create Container Form, and don’t forget to drag context element from your existing context node to context view. in this screen you need to click Context button, the select your parent node and after that create Back Button, this button to go back to first view.

create-webdynpro-abap-application-13

13. Create navigation from MAIN view to V_DETAIL view, go to MAIN view and create Outbound plug. and next create Inbound Plug in V_DETAIL view.

create-webdynpro-abap-application-14

14. Open Windows node and Embed View V_DETAIL to Windows. you can do this by right-clicking on ZTEST_WEBDYNPRO and select Embed View menu. click F4 Help on View to be Embedded, select

create-webdynpro-abap-application-15

Create navigation link for all of Outbound plug, you can do this by right clicking on TO_MAIN ( outbound plug ) in V_DETAIL view.

create-webdynpro-abap-application-16

15. Define Action and Event handler method in Button on MAIN View, double click on MAIN View and scroll down properties UI ELement Button, click New in onAction property. SAP System will create Action in Action Tab automatically.

create-webdynpro-abap-application-17

16. This action will open V_DETAIL view after user click button Get User Data from MAIN view, then you need to inject your method contain BAPI_USER_GET_DETAIL into FROM_MAIN Inbound Plug in V_DETAIL view.

To do this go to V_DETAIL view then open Method tab, double click on method HANDLEFROM_MAIN.

17.Last step you need to create Web Dynpro Application, to do this by right clicking on Web Dynpro Comp/Intf, click Test/Execute to run your Web Dynpro ABAP Application.

create-webdynpro-abap-application-18

create-webdynpro-abap-application-19

Incoming search terms:

Leave a Reply

Your email address will not be published. Required fields are marked *