On click of radio button input field should be visible to User

[Former Member]

Hi Everyone

I want display Radio button on view.

After Clicking on particular radio button corresponding input field should be visible to user on same view.

How should i proceed in this case?

[Former Member · Accepted solution]

Hallo Johnright,

You can create a context attribute of type wdui_visibility.

Bind this attribute to the input field visibility.

on action handler of your radio button

set the attribute to

CL_WD_INPUT_FIELD=>E_VISIBLE-NONE

or

CL_WD_INPUT_FIELD=>E_VISIBLE-VISIBLE

[sahai]

1. Go to transaction SE80 and select u201CWebDynpro Comp./Intfu201D.

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.

3. Now go to the Component Controller Context tab and create two nodes as shown below with the name u2018RADIO_NODE1u2019 and u2018RADIO_NODE2u2019 with Cardinality u20180..nu2019 and Selection u20180..1u2019.

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

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

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

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

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 u2018First Nameu2019 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

12. Now bind visible property of FIRST_NAME with context element FIRST_NAME_1, select the radio button u2018Bind to the Property of the Selected Attribute Propertyu2019 as u2018Visibleu2019 and press u2018enteru2019

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 u2018Last Nameu2019 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 u2018Bind to

the Property of the Selected Attribute Propertyu2019 as u2018Visibleu2019.

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

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

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 LASTNAME_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 u2018Bind to the Property of the Selected Attribute Propertyu2019 as u2018Enabledu2019, also select and change property visible to u2018Visibleu2019

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 u2018Bind to the Property of the Selected Attribute Propertyu2019 as u2018Enabledu2019, also select and change property visible to u2018Visibleu2019.

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

21. Double Click on SHOW_HIDE event, add a Importing Parameter as INDEX type u2018Iu2019

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

HOPE THIS MAY HELP YOU TO SOLVE THE PROBLEM.

THANKS AND REGARDS,

SAHAI.S

[Former Member]

Hi johnright ,

To make any field visible or invisible you have to use of attribute wdui_visibility.

It has got two values.

1 -- visible.

2 - invisible .

Now in you viewlayout use radio button group by index and use the input fields. Bind the visibility attribute of the input field with a the attribute of type WDUI_VISIBILITY, set deafult value 2.

You have to bind the text field of the ui element RADIOBUTTON GROUP BY INDEX with some attribute. Now set some values in that attribute.

Now in the on action method of your radiobutton get attribute value and according to that set the visibility of your input fields.

Reply in case of any issue.

Thank & Regards,

Monishankar C

[gill367]

As told above,

Just control the visibility of the input field by binding its property visibility to a context attribute of type WUI_visibility and

then in the eventhandler of the radio button set this attribute to '02' to make it visible.

thanks

sarbjeet