Sunday, December 19, 2010

Displaying Text box and radio buttons using "Web Dynpro for ABAP"

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.

  1. 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.

  1. In the dialog box that appears, you can enter a description of the new object and select as type Web 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.

  1. 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

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

  1. Create a view MAINVIEW

  1. The View Editor will be started on the right side of the Workbench window. In order to open the Layout 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.

  1. Save the view MAINVIEW .

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

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

  1. Now open the view structure and move the view MAINVIEW inside the window structure on the right hand side by Drag and Drop.

  1. Open the window structure on the right hand side and you will see the embedded MAINVIEW.

  1. Save your changes.

Creating a View Context for MAINVIEW

  1. Open the View Editor for view MAINVIEW and switch to tab Context. Create a context node RADIOGROUP and ViewText in the View Controller by opening the corresponding context menu.

  1. Maintain the properties according to the screen shot below. Select EKKO as Dictionary Structure and “0…n” for the Cardinality.

Select button Add Attribute from Structure and select components of structure EBELN.

Press OK.

  1. Create context attribute name ViewText.

ViewText Type String

  1. The result should look like this:

You have now created a context node “RADIOGROUP” which refers to the data structure of table EKKO and which can contain 0 to n entries. and attribute “ViewText” which refers to the type string which can contain no entries. The context node has been created in the view context, since no data exchange with other views is planned. Therefore, the component controller context usage is not necessary.

  1. Save your changes of view MAINVIEW.

Creating a corresponding UI Element for the context node RADIOBROUP and Attribute VIEWTEXT.

  1. Switch to tab Layout of view MAINVIEW.
  2. Insert a new UI elements of type GROUP,CAPTION, RADIOBUTTONGROUPBYINDEX and Textview under ROOTUIELEMENTCONTAINER and assign the properties in the given below.

Enter UI Group element and set the below properties :

Design : sapcolor

Width : 100%

Captio : Sample Scenario

  1. 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 :”.

  1. Insert UI element RADIOBUTTONGROUPBYINDEX under Group :

  1. 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.

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

  1. 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.
  1. 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.

  1. Save your changes.

Creating a Web Dynpro Application...

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

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

  1. Save as local object

Activating and running your Application

  1. Activate all objects.

Select all relevant objects and press Continue (Enter).

  1. 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.



No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites