This document provides step by step procedure to create a check box in webdynpro.
Step 1:
Go to transaction code SE80 and select webdynpro component/interface as shown in below image.
After selecting webdynpro component/ interface give the name of the program you want to create here we will give the name of the program as “ZWD_P2_CHECKBOX” and press “ENTER” a pop up will appear asking to whether to create an object if the program with same name has not been created as show below
When u click on “YES” one more popup will appear asking for the details of the object , you just give the details and click on the tick mark.
Step 2:
Now go to VIEW and double click on it you will get a view controller on your right side window in view controller there are several tabs like ‘Properties’, ’Layout’, ’Inbound Plugs’, ‘Outbound Plugs’, ‘Context’, ‘Attributes’, ‘Action’ and ‘Methods.
Select Context tab as show below.
In context view we need to create two attributes, So to do so right click on the context, a menu appears in that choose Create and inside create choose Attribute.
CONTEXT ---> CREATE--->ATTRIBUTES.
When u click on Attribute a popup window will appear asking the details of the attribute
Give the attribute name here we have given it as CHECK_BOX and give its type as WDY_BOOLEAN after giving the details click on the tick button.
Repeat this attribute creation procedure to create one more attribute here we gave the name as TEXT for another attribute and gave its type as STRING.
Step 3:
Now go to Layout tab of view controller and right click on ‘ROOTUIELEMENT CONTAINER’ and select ‘Insert Element’ when you select it a popup window will appear asking for the element details here we gave ID as CHECK_BOX and choose type as checkbox as shown below.
Repeat this element creation procedure to create an element for text. Here for text we gave ID as ‘TEXT’ and choose type as ‘TEXTVIEW’ as shown below.
STEP 4:
Now bind the check box to the context attribute check box and context attribute text to text as shown below.
Binding Check Box.
Binding Text.
Now go to the properties of check box and create an event ‘ONTOGGLE’ as shown below
Step 5:
Now go to ACTION tab of the view controller and double click on ONTOGGLE event it will open a new window where you can generate the code for that particular action as shown below.
After double clicking the below window is opened.
In the above window there is an icon in the toolbar it is code generating wizard click on that to generate the code.
When you click on a popup window will appear in that first select Read radio button and click on CONTEXT another popup window will open in that select checkbox and click on icon as shown below.
After doing this procedure the following code will be generated inside the method ONACTIONTOGGLE.
method ONACTIONONTOGGLE .
method ONACTIONONTOGGLE .
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->Element_context.
DATA lv_check_box TYPE wd_this->Element_context-check_box.
* get element via lead selection
lo_el_context = wd_context->get_element( ).
* @TODO handle not set lead selection
IF lo_el_context IS INITIAL.
ENDIF.
* get single attribute
lo_el_context->get_attribute(
EXPORTING
name = `CHECK_BOX`
IMPORTING
value = lv_check_box ).
endmethod.
Repeat the procedure to generate code for text, but while generating the code for text choose the radio button ‘SET’ and follow the same procedure as for check box as shown below.
The following code is generated as shown below.
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->Element_context.
DATA lv_text TYPE wd_this->Element_context-text.
* get element via lead selection
lo_el_context = wd_context->get_element( ).
* @TODO handle not set lead selection
IF lo_el_context IS INITIAL.
ENDIF.
* @TODO fill attribute
* lv_text = 1.
* set single attribute
lo_el_context->set_attribute(
name = `TEXT`
value = lv_text ).
After generating the code for text modify the code. And the final code must appear as shown below
method ONACTIONONTOGGLE .
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->Element_context.
DATA lv_check_box TYPE wd_this->Element_context-check_box.
* get element via lead selection
lo_el_context = wd_context->get_element( ).
* @TODO handle not set lead selection
IF lo_el_context IS INITIAL.
ENDIF.
* get single attribute
lo_el_context->get_attribute(
EXPORTING
name = `CHECK_BOX`
IMPORTING
value = lv_check_box ).
* DATA lo_el_context TYPE REF TO if_wd_context_element.
* DATA ls_context TYPE wd_this->Element_context.
DATA lv_text TYPE wd_this->Element_context-text.
* get element via lead selection
lo_el_context = wd_context->get_element( ).
* @TODO handle not set lead selection
IF lo_el_context IS INITIAL.
ENDIF.
* @TODO fill attribute
* lv_text = 1.
IF lv_check_box = 'X'.
* set single attribute
lo_el_context->set_attribute(
name = `TEXT`
value = 'CHECK BOX SELECTED').
ELSE.
lo_el_context->set_attribute(
name = `TEXT`
value = 'CHECK BOX NOT SELECTED').
ENDIF.
endmethod.
Step 6:
Activate the webdynpro component by right clicking the webdynpro component name and clicking the Activate option as shown below.
Step 7:
After activating the webdynpro component create a webdynpro application to test the component. To create the webdynpro application right click on the webdynpro component name and choose create and in that select webdynpro application as shown below.
The above mentioned 7 steps explain the concept to create the checkbox using Webdynpro.
Below screenshots shows the output of the above explained procedure.
