Saturday, December 18, 2010

Enable/Disable & Show/Hide UI Elements during runtime in Web Dynpro for ABAP

1. Go to transaction SE80 and select “WebDynpro Comp./Intf”.

2. Create a new WebDynpro component by the name ZZ_EXAMPLE (as shown below), give window name as MAIN_WINDOW and view as FIRST_VIEW. Save the Web Dynpro Application as local object as shown below:

3. Now go to the Component Controller Context tab and create two nodes as shown below with the name ‘RADIO_NODE1’ and ‘RADIO_NODE2’ with Cardinality ‘0..n’ and Selection ‘0..1’.

4. And now create one attributes under each node, here with the name RADIO_1 and RADIO_2, both type as CHAR10:

5. Now go to view context and map the attributes, which you want to use in your application under the view context from Component Controller Context by drag and drop as shown below:

6. Now create the attributes, which you want to use in your application under the view context, create an attribute name FIRST_NAME_1 type CHAR20 as shown below:

7. Repeat the same and create LAST_NAME_1, FIRST_NAME_2 and LAST_NAME_2, all of type CHAR20.



8. Now go to the layout of the main view, change the Layout as MatrixLayout in ROOTUIELEMENTCONTAINER and right click on it, go for Insert Element and create RADIO_GROUP1 as type RadioButtonGroupByIndex as shown below:

9. Change the property Layout Data in RADIO_GROUP1 as MatrixHeadData and bind the text property of it with context element RADIO_1 as shown below:

10. Create element FIRST_NAME_LABEL type Label and FIRST_NAME type InputField under ROOTUIELEMENTCONTAINER, change the property LayoutData as MatrixHeadData, LabelFor as FIRST_NAME and text as ‘First Name’ in element FIRST_NAME_LABEL and change the property LayoutData as MatrixData in element FIRST_NAME.

11. Now bind the value of Input field FIRST_NAME with context element FIRST_NAME_1 as show below:

12. Now bind visible property of FIRST_NAME with context element FIRST_NAME_1, select the radio button ‘Bind to the Property of the Selected Attribute Property’ as ‘Visible’ and press ‘enter’ as shown below:

13. Now repeat the same thing from step 10 and create LAST_NAME_LABEL type Label and LAST_NAME type InputField, change the property LayoutData as MatrixHeadData, LabelFor as LAST_NAME and text as ‘Last Name’ in element LAST_NAME_LABEL and change the property LayoutData as MatrixData in element LAST_NAME.

Bind the value of Input field LAST_NAME with context element

LAST_NAME_1 and same for visible, here also select the radio button ‘Bind to

the Property of the Selected Attribute Property’ as ‘Visible’.


14. Now create another Radio Button Group RADIO_GROUP2 type RadioButtonGroupByIndex, change its layout as MatrixHeadData and bind its text with context element RADIO_2 as shown below:



15. Now copy the element FIRST_NAME_LABEL by right clicking on it and select Copy Element, then right click on ROOTUIELEMENTCONTAINER and click Insert Copied Element as shown below:

16. Repeat the same with input field FIRST_NAME then with label LAST_NAME_LABEL and input field LAST_NAME.

Change the layout of FIRST_NAME_LABEL_CP as MatrixHeadData and select labelFor as FIRST_NAME_CP, do the same with LAST_NAME_LABEL _CP change layout to MatrixHeadData and select LabelFor as LAST_NAME_CP.

17. Change the binding for value of input field FIRST_NAME_CP with context element FIRST_NAME_2 and bind property enabled with FIRST_NAME_2 and select the radio button ‘Bind to the Property of the Selected Attribute Property’ as ‘Enabled’, also select and change property visible to ‘Visible’ as shown below:

18. Repeat the same with LAST_NAME_CP, bind value with LAST_NAME_2, property enabled with LAST_NAME_2 and select the radio button ‘Bind to the Property of the Selected Attribute Property’ as ‘Enabled’, also select and change property visible to ‘Visible’.

19. Now go to the Methods tab and double click on initialization method that is WDDOINIT:

Now write the below piece of code in it:

Method WDDOINIT.
*"--------------------------------------------------------------------*
* Code to display text as 'Show' and 'Hide' in application. *
*"--------------------------------------------------------------------*
DATA lo_nd_radio_node1 TYPE REF TO if_wd_context_node.
DATA ls_radio_node1 TYPE wd_this->element_radio_node1.
  DATA t_radio_node1     TYPE if_main_view=>elements_radio_node1.
  ls_radio_node1 = 'Show'.
append ls_radio_node1 to t_radio_node1.
  ls_radio_node1 = 'Hide'.
append ls_radio_node1 to t_radio_node1.
* navigate from  to  via lead selection
lo_nd_radio_node1 = wd_context->get_child_node( name = wd_this->wdctx_radio_node1 ).
* Call method bind table and pass the table t_radio_node1 to display text
CALL METHOD lo_nd_radio_node1->bind_table
EXPORTING
new_items = t_radio_node1.
*"--------------------------------------------------------------------*
*" Code to display text as 'Show' and 'Hide' in application. *
*"--------------------------------------------------------------------*
DATA lo_nd_radio_node2 TYPE REF TO if_wd_context_node.
DATA ls_radio_node2 TYPE wd_this->element_radio_node2.
  DATA t_radio_node2     TYPE if_main_view=>elements_radio_node2.
  ls_radio_node2 = 'Enable'.
append ls_radio_node2 to t_radio_node2.
  ls_radio_node2 = 'Disable'.
append ls_radio_node2 to t_radio_node2.
* navigate from  to  via lead selection
lo_nd_radio_node2 = wd_context->get_child_node( name = wd_this->wdctx_radio_node2 ).
* Call method bind table and pass the table t_radio_node1 to display text
CALL METHOD lo_nd_radio_node2->bind_table
EXPORTING


new_items = t_radio_node2.
Endmethod.

20. Now go back to the Layout tab of your main view, click on RADIO_GROUP1 and create an event as SHOW_HIDE as shown below:



21. Double Click on SHOW_HIDE event, add a Importing Parameter as INDEX type ‘I’

and write the below piece of code in ONACTIONSHOW_HIDE.

Method ONACTIONSHOW_HIDE.
  DATA lo_nd_radio_node1   TYPE REF TO if_wd_context_node.
DATA lo_el_radio_node1 TYPE REF TO if_wd_context_element.
DATA lw_index TYPE I.
DATA lo_el_radio_node1_1 TYPE ref to if_wd_context_element.
* navigate from  to  via lead selection
lo_nd_radio_node1 = wd_context->get_child_node( name = wd_this->wdctx_radio_node1 ).
* call method get lead selection index to get index
CALL METHOD lo_nd_radio_node1->get_lead_selection_index
receiving
index = lw_index.
  lo_el_radio_node1_1 = wd_context->get_element(  ).  
  If lw_index = 1.  
* call method set attribute property and pass value as 'X' to show
call method lo_el_radio_node1_1->set_attribute_property
exporting
attribute_name = 'FIRST_NAME_1'
property = 1
value = 'X'.
* call method set attribute property and pass value as 'X' to show
call method lo_el_radio_node1_1->set_attribute_property
exporting
attribute_name = 'LAST_NAME_1'
property = 1
value = 'X'.
  Else.
* call method set attribute property and pass value as SPACE to HIDE
call method lo_el_radio_node1_1->set_attribute_property
exporting
attribute_name = 'FIRST_NAME_1'
property = 1
value = space.
* call method set attribute property and pass value as SPACE to HIDE
call method lo_el_radio_node1_1->set_attribute_property
exporting
attribute_name = 'LAST_NAME_1'
property = 1
value = space.
  Endif.                              
endmethod.

22. Now again go back to the Layout tab of your main view, click on RADIO_GROUP2 and create an event as ENABLE_DISABLE and add a Importing Parameter as INDEX type ‘I’ and write the below piece of code in ONACTIONSHOW_HIDE.

Method ONACTIONENABLE_DISABLE.
  DATA lo_nd_radio_node2 TYPE REF TO if_wd_context_node.
DATA lo_el_radio_node2 TYPE REF TO if_wd_context_element.
  DATA lw_index            TYPE I.
DATA lo_el_radio_node2_1 TYPE ref to if_wd_context_element.
* navigate from  to  via lead selection
lo_nd_radio_node2 = wd_context->get_child_node( name = wd_this->wdctx_radio_node2 ).
* call method get lead selection index to get index
CALL METHOD lo_nd_radio_node2->get_lead_selection_index
receiving
index = lw_index.
  lo_el_radio_node2_1 = wd_context->get_element(  ).  
  If lw_index = 1.  
* call method set attribute property and pass value as 'X' to ENABLE
call method lo_el_radio_node2_1->set_attribute_property
exporting
attribute_name = 'FIRST_NAME_2'
property = 4
value = 'X'.
* call method set attribute property and pass value as 'X' to ENABLE
call method lo_el_radio_node2_1->set_attribute_property
exporting
attribute_name = 'LAST_NAME_2'
property = 4
value = 'X'.
  ELSE.
* call method set attribute property and pass value as SPACE to DISABLE
call method lo_el_radio_node2_1->set_attribute_property
exporting
attribute_name = 'FIRST_NAME_2'
property = 4
value = space.
* call method set attribute property and pass value as SPACE to DISABLE
call method lo_el_radio_node2_1->set_attribute_property
exporting
attribute_name = 'LAST_NAME_2'
property = 4
value = space.
Endif.
Endmethod.

23. Now create a Web Dynpro Application as shown below:

24. Now SAVE and Activate your Application. Test your Application after creating a web dynpro application.

25.Final Output:-

Click on “HIDE” radio-button.

Click on “DISABLE” radio-button.

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