WebDynpro for ABAPTM

Building a simple application

Scenario: To create and run a simple WebDynpro Application. We would accept an input value from the user on first screen and display the value entered on the second screen.

Note: Please refer to the SAP® help for detailed information of the components used in this document. 

Procedure: 

1.      Go to transaction SE80. Please note that there is no separate transaction for creation of WebDynpro application other than SE80. 

2.      Select “WebDynpro Comp./Intf” from the list (as shown below)

 

3.      Create a new WebDynpro component by the name ZSAPTECHNICAL_DEMO. 

 Assign it to the local object. 

4.      Right click on the WebDynpro component “ZSAPTECHNICAL_DEMO” and create a view.

 

       

 

     

Save the application 

5.      Double-click on the COMPONENTCONTROLLER. 

6.      Check if the application is in change mode. 

7.      Create a node as shown below:

Contd.. 

WebDynpro for ABAPTM

Building a simple application

Previous..

8.      Create an attribute for the node as shown below:

  

 Save the application. 

9.      Double-click on the view, FIRST_VIEW, created earlier.

 In this step, we would be designing the first screen of our application with the following elements:

        Label for the input field

        Input field

        Button (for Submit) 

Drag and drop the element “Label” onto the layout. 

 

After dragging and dropping onto the layout, change the text of the “Label” to “Username” in the right side bottom of the window. 

 

Now drag and drop the “input field” onto the layout.

 

Now click on the Label element created earlier and set the property of “LabelFor” to “INPUT_FIELD”.

 

Finally, drag and drop the element “Button” on to the layout.

 

In the properties window of the Button, do the following: 

Change the text to “Submit”

 

Click on “Create” for the property “OnAction”.

 

Enter the Action and the Outbound Plug name.

 

Press “OK” for the creation prompt of Outbound Plug. 

Click on “Context”tab. Drag and drop the Node on the right side to the context on the left side.

Click on ‘YES’ for the prompt for the node to copied and mapped.

 Save the application. 

Click on Layout tab now.

Double-click on the “Input_field” and in the properties:

a)      For the property “Value”, select the attribute “Name” by clicking on the binding button.

We are done with designing of the first screen.

Contd.. 

WebDynpro for ABAPTM

Building a simple application

Previous...

10.  In this step, we would design the second screen of our application.

Right-Click on the WebDynpro component and create another view, SECOND_VIEW. 

Create a label, “Entered Name” as mentioned in the earlier step.

We would display the value entered on the first screen in an element called “text view”.

Drag and drop the element “Text View” onto the layout. 

Click on “Context” tab and map the nodes as in our earlier step.

 

Go to Tab “Inbound Plugs” and create an inbound plug as shown below:

Go back to the layout now.

Now double-click on the element “TextView” to open the properties. For the property “Text”, click on the binding button and select “Name” 

 

11.   In this step, we would embed the above created views in the window created in the first step.

a)      Double-click on the window “MAIN_WINDOW”.

b)      Right-click on the window name and select “EMBED VIEW”.

c)      Embed both the views created earlier. Do not select the view “EMPTYVIEW” which is created by default.

d)      Expand the tree. 

e)      Now right-click on “SUBMIT” and select “Create

Navigation”.   

f)        Select “SECOND_VIEW” for the dest.view. 

g)      Now select the FIRST_VIEW and make it as default.

 

Save and activate the application (When activating, select all the six components related to this webdynpro application. If all six components are activated, only then your application executes)

Now your application is ready to execute. Lets look at the method of testing this application.

Contd. 

WebDynpro for ABAPTM

Building a simple application

...Previous

Testing your WebDynpro Component

1.      Right-click on the WebDynpro Component and create WebDynpro Application.

    

2.      Without changing any values, press SAVE.

3.      Execute your WebDynpro application. 

Displaying text and radio button using WebDynpro for ABAP

By Raghava Vakada, Mouri Tech Solutions

Development Objectives: 

In this step-by-step documentation you will create a simple Web Dynpro component, which consists of one view. For the view, you will create a view context, which is linked to a Textview and RadioButtonGroupByIndex elements on the view layout and which contains the adding data. This RadioButtonGroupByIndex will be displayed in the browser at runtime. Furthermore, you will create a Web Dynpro application for this simple Web Dynpro component, which can be run in the browser. 

Procedure  

Creating a Web Dynpro Component 

1. Start ABAP Workbench (SE80) and select Web-Dynpro-Comp./Intf. from the available object list.

 

2. To create a new Web Dynpro component, enter the name ZWD_RB_DEMO for the new component in the selection dialog of the object list, and select Display.

 

3. In the dialog box that appears, you can enter a description of the new object and select as typeWeb Dynpro Component. In this dialog you also have the chance to maintain the name of the default window.

 Assign the component ZWD_RB_DEMO to package $TMP. 

4. As a result, you can now see the newly created Web Dynpro component ZWD_RB_DEMO object tree, which contains the objects component controller, component interface (which contains the entries interface controller and interface views) and windows. You can access the objects using double-click.

 

 

Creating a new View and Assigning the View to the Window 

5. Click on the Web Dynpro component ZWD_RB_DEMO in the object tree and open the context menu to create a new view.

 

6. Create a view MAINVIEW

 

7. The View Editor will be started on the right side of the Workbench window. In order to open theLayout tab and the View Designer, a popup appears asking for user and password for the SAP Web Application Server. Use the same user/password which you used for logon to the SAP system.

 

8. Save the view MAINVIEW .

 

After saving the view MAINVIEW, it appears in the object tree of the Web Dynpro component under entry Views. 

isplaying text and radio button using WebDynpro for ABAP

...Previous      

20. Insert UI element TextView  Under GROUP :

 

Enter the name of the TextView as TEXT_VIEW. 

 

And Insert UI element Caption Under GROUP.

Set the Text properties as “Selected Item Name :”. 

21. Insert UI element RADIOBUTTONGROUPBYINDEX under Group :

 

22. The result should look like this:

 

Creating data binding from Layout tab UI Elements to context node RADIOBROUP and Attribute VIEWTEXT. 

Enter UI Text_View element and set the below properties :

Text                  :  Binding with the MainView Context VIEWTEXT attribute 

 

Enter UI RBGBINDEX element properties :

TEXT                 :  Binding with the MAINVIEW context node of  RADIOGROUP

    

Create an Action In properties Events under OnSelect  click on New Button and Enter name of the Action “SELECTITEM” 

 

Press Continue Button. 

Supply data to context node RADIORGROUP and attribute VIEWTEXT at runtime. 

23. Switch to tab Methods of view MAINVIEW and double-click method WDDOINIT. Enter the given coding.

 

24. On initialization of view MAINVIEW, the content  is loaded into an internal table and assigned to the data structure of context node  RADIOGROUP.

method WDDOINIT . Data : v_Element type ref to If_Wd_Context_Element, Items_node type ref to If_Wd_Context_node, v_Index type i, v_Text type string, itemList type STANDARD TABLE OF IF_MAINVIEW=>ELEMENT_radiogroup, w_list LIKE LINE OF itemList.* Appending elements to "itemList"w_list-ebeln = 'Blue'. append w_list to itemList.

w_list-ebeln = 'Yellow'. append w_list to itemList.w_list-ebeln = 'Red'. append w_list to itemList.w_list-ebeln = 'Magenta'. append w_list to itemList.w_list-ebeln = 'White'. append w_list to itemList.w_list-ebeln = 'Black'. append w_list to itemList.Items_node = wd_Context->get_Child_Node( Name = `RADIOGROUP` ).Items_node->bind_table( itemList ).Items_node->SET_LEAD_SELECTION_INDEX( 3 ).v_Index = Items_node->GET_LEAD_SELECTION_INDEX( ).clear w_list.read table itemList into w_list index v_Index.v_Text = w_list-ebeln.wd_Context->set_Attribute( exporting value = v_Text NAME = 'VIEWTEXT' ).endmethod.

To continue click here.. 

Displaying text and radio button using WebDynpro for ABAP

...Previous        

25. Switch to tab ACTIONS of view MAINVIEW and double-click method SELECTITEM. Enter the given coding.

method ONACTIONSELECTITEM .

  Data : v_Element type ref to If_Wd_Context_Element,         Items_node type ref to If_Wd_Context_node,         v_Index type i,         v_Text type string,         itemList type STANDARD TABLE OF IF_MAINVIEW=>ELEMENT_radiogroup,         w_list LIKE LINE OF itemList.

Items_node = wd_Context->get_Child_Node( Name = `RADIOGROUP` ).items_node->GET_STATIC_ATTRIBUTES_TABLE( importing table = itemList ).v_Index = Items_node->GET_LEAD_SELECTION_INDEX( ).clear w_list.read table itemList into w_list index v_Index.v_Text = w_list-ebeln.wd_Context->set_Attribute( exporting value = v_Text  NAME = 'VIEWTEXT'  ).

endmethod.

26. Save your changes.

 Creating a Web Dynpro Application...  

27. Click on the Web Dynpro component ZWD_RB_DEMO in the object tree and open the context menu to create a new application.

 

28. Enter a name (or accept the proposed name) and press Continue (Enter).

 

29. Save as local object

Activating and running your Application  

30. Activate all objects.

Select all relevant objects and press Continue (Enter). 

 

31. To start the application, right click on your WebDynpro application entry and select context menu entry Test

 

A browser will be started to run the WebDypro application. Log on using the same credentials as before.

The result page should look like this: 

 

SAP Online Help

More information on Web Dynpro for ABAP can be found at the SAP Help Portal.

 

9. Now open window ZWD_RB_DEMO by clicking on Windows and double-clicking on ZWD_RB_DEMO. Switch to change mode. 

To continue click here..