Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

Author: Pritam Ghosh
Submitted: 02 March,2009
 
This tutorial shows how to change properties of UI Elements during runtime  in WEB DYNPRO ABAP.

1.      Go to transaction SE80 and select "WebDynpro Comp.

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 <CONTEXT> to <RADIO_NODE1> 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 <CONTEXT> to <RADIO_NODE2> 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 <CONTEXT> to <RADIO_NODE1> 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 inONACTIONSHOW_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 <CONTEXT> to <RADIO_NODE2> 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.


2 Comments

  1. Guest

    Hi,

    It is no problem to define property binding of a UI element statically as you show in your example.

    But, how can I define property binding for a UI element which I create at runtime? I can't find any statement to tell the UI element (for example CL_WD_INPUT_FIELD) that it should use property binding.

    Any ideas?

  2. Guest

    I'm trying to hide some elements, but the problem I have is that the property does not hide the elements, only the disabled, and I've checked everything, context, layout and code and everything I'm doing as it should

    which could be the problem, using the enabled and visible property, make absolutely the same?