5 Easy Steps To Create A Web Dynpro ABAP Application

Step 1. Create Web Dynpro Component

1. Go to Transaction SE80, choose Web-Dynpro-Comp./Intf in the object list and provide a new name (Y_FIRST_WEBDYNPRO) and click on Display.
   
2. Confirm you want to create the object by clicking on Yes.
   
3. Enter the description and choose the Type radio button as Web Dynpro Component.
   

Step 2: Component Controller

1. Go to Component Controller and Right click on the CONTEXT, select Create and then select Node.
   

   Web dynpro ABAP 4 – Click To See Larger Image

2. Provide a Node Name as PA0002 and Dictionary Structure as PA0002 and then select Add Attribute from Structure.
   
3. Select the following attributes from the PA0002 structure.
   
   This is how the context should look like after you have completed Step 2.3.
   

   Web Dynpro ABAP 7 – Click To See A Larger Image

Step 3: Designing the View Layout

1. Click on MAIN View.
   
2. Go to the Context in the view and then drag and drop the PA0002 node which appears in Right side (Component Controller) of the View.
   

   Web dynpro ABAP 9 – Click For Larger Image

3. Now, go to the Layout Tab in View and right click the ROOTUIELEMENTCONTAINER and then choose Insert element.
   

   Web dynpro ABAP 10 – Click To See Larger Image

4. Provide ID and select type as Label.
   
5. Again right click the ROOTUIELEMENTCONTAINER and then choose Insert element. Select InputField UI element this time.
   
6. Now select the EMPLOYEE_NUMBER_LBL and provide the Text property as Employee Number in the Property Editor.
   
7. Now, we will bind the Value property of the InputField UI element to the context. This is done by clicking on the selected area and then selecting the context attribute PERNR.
   

   Web dynpro ABAP 14 – Click for A Larger Image

8. This is how the value property will look after binding it with the required Context Attribute.
   
9. Insert a Button UI element which will be used to fetch the data from the back-end. Bind the event property of the UI element with action SHOW_DETAILS.
    
10. Similarly, insert a Label and TextView UI elements for First Name, Last Name, Date of Birth and Nationality Output Fields.
    
11. This is how the ROOTELEMENTCONTAINER should look after all the required UI elements are inserted.
    

Step 4: Adding ABAP Code

1. Now we will insert Code to the actions that were created in Step 3. Here, we will fetch data from back-end for the employee number entered by the user. Click on the Actions Tab of the View.
   
2. Double click on SHOW_DETAILS Action
   
3. Below is a screenshot of the ABAP Code that goes between method and endmethod.
   
4. Click on Save and Activate all the inactive objects created in this tutorial.
   

Step 5: Creating Web Dynpro Application

1. Create Web Dynpro Application by right clicking the Web Dynpro.
   
2. Give your application a name and description.
   
3. Right click on the Web Dynpro component and activate it.
   
4. Output : Right click on the application and select Test to run your application.
   

Output In The Web Browser

Update: A follow on article is now available here: How To Use Inbound And Outbound Plugs In SAP Web Dynpro ABAP Programs