Step-by-step web dynpro 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 application5.Double-click on the COMPONENTCONTROLLER.6.Check if the application is in change mode.7.Create a node as shown below:

Contd..WebDynpro for ABAPTMBuilding a simple applicationPrevious..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 fieldInput fieldButton (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 SubmitClick 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 Contexttab. 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 ABAPTMBuilding a simple applicationPrevious...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 Name11.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 ABAPTMBuilding a simple application...PreviousTesting your WebDynpro Component1.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 ABAPBy Raghava Vakada, Mouri Tech SolutionsDevelopment 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 Component1. Start ABAP Workbench (SE80) and selectWeb-Dynpro-Comp./Intf.from the available object list.2. To create a new Web Dynpro component, enter the nameZWD_RB_DEMOfor the new component in the selection dialog of the object list, and selectDisplay.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 Window5. 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 MAINVIEW7. TheView Editorwill be started on the right side of the Workbench window. In order to open theLayouttab and theView 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 entryViews.

isplaying text and radio button using WebDynpro for ABAP...Previous20. Insert UI element TextViewUnder 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 attributeEnter UI RBGBINDEX element properties :TEXT:Binding with the MAINVIEW context node ofRADIOGROUPCreate an Action In properties Events under OnSelectclick on New Button and Enter name of the Action SELECTITEMPress Continue Button.Supply data to context node RADIORGROUP and attribute VIEWTEXT at runtime.23. Switch to tabMethodsof view MAINVIEW and double-click methodWDDOINIT. Enter the given coding.24. On initialization of view MAINVIEW, the contentis loaded into an internal table and assigned to the data structure of context nodeRADIOGROUP.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...Previous25. Switch to tab ACTIONSof view MAINVIEW and double-click method SELECTITEM. Enter the given coding.methodONACTIONSELECTITEM.

Data:v_ElementtypereftoIf_Wd_Context_Element,Items_nodetypereftoIf_Wd_Context_node,v_Indextypei,v_Texttypestring,itemListtypeSTANDARDTABLEOFIF_MAINVIEW=>ELEMENT_radiogroup,w_listLIKELINEOFitemList.

Items_node=wd_Context->get_Child_Node(Name=`RADIOGROUP`).items_node->GET_STATIC_ATTRIBUTES_TABLE(importingtable=itemList).v_Index=Items_node->GET_LEAD_SELECTION_INDEX().clearw_list.readtableitemListintow_listindexv_Index.v_Text=w_list-ebeln.wd_Context->set_Attribute(exportingvalue=v_TextNAME='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 pressContinue (Enter).29. Save as local object

Activating and running your Application30. 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 entryTestA 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 HelpMore 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..