February 18, 2014 6 minute read

How to disable/enable Select Options on Radiobutton action in Web Dynpro ABAP

Purpose:

Application to enable/disable select options on Radio button action in Web Dynpro ABAP

Scenario:

I would like to explain the functionality of how to enable or disable select screen elements on radio button selection in Web dynpro ABAP

Example: I have considered the selection screen ui elements – Customer & Sales Document and radio buttons – Customer data & Sales data

Here, I have designed selection screen for 2 input fields viz Customer & Sales Document

Now, upon selection a radio button, the respective input field should be open for input and other to be as non-editable

Pre-requisite:

Basic knowledge of Webdynpro ABAP, Using Select Options in WDA & OO ABAP

Step by step Process

Step 1:

Go to t-code SE80 and create a Web Dynpro component as below

Step 2:

Go to the used components tabl of the WDA component and create a component usage for WDR_SELECT_OPTIONS component as below

Step 3:

Open the view and go to the properties tab and click on create button to create an instance of used component as below

Now, choose the component usage name “SELECT_OPTIONS” by doubl clicking on the entry as shown below

The instance of component usage is created in view V_MAIN as below

Step 4:

Go to the “Context” tab of view and Create a context node “RADIO_BUTTONS” as shown below

Step 5:

Create an attribute “TEXT” in the context node “RADIO_BUTTONS” as shown below

Step 6:

Go the view layout tab and create an ui element “RadioButtonGroupByIndex” as shown below

Bind the property “text” to context attribute and create an action and bind it to the event “OnSelect” as shown below

Step 7:

Create a view container ui element “VCU_SELECT_OPTIONS” to hold the selection screen component as below

Step 8:

Go to attributes tab and add the attributes as shown below

Step 9:

Go to methods tab and create a method “CONFIG_SEL_OPTIONS” to configure selection screen elements as below

Add the below code in method CONFIG_SEL_OPTIONS

CONFIG_SEL_SCREENS
METHOD config_sel_options . DATA lo_componentinterface TYPE REF TO if_wd_component_usage. lo_componentinterface = wd_this->wd_cpuse_select_options( ). IF lo_componentinterface->has_active_component( ) EQ abap_false. lo_componentinterface->create_component( ). ENDIF. wd_this->m_handler = wd_this->wd_cpifc_select_options( ). wd_this->m_sel_options = wd_this->m_handler->init_selection_screen( ). IF wd_this->m_sel_options IS NOT BOUND. RETURN. ENDIF. wd_this->m_sel_options->set_global_options( EXPORTING i_display_btn_cancel = abap_false ” Displays “Cancel” Button i_display_btn_check = abap_false ” Displays “Check” Button i_display_btn_reset = abap_false ” Displays “Reset” Button i_display_btn_execute = abap_false ” Displays “Apply” Button ). wd_this->m_sel_options->remove_all_sel_screen_items( ). DATA lv_kunnr TYPE REF TO data. DATA lv_vbeln TYPE REF TO data. CREATE DATA lv_kunnr TYPE kunnr. CREATE DATA lv_vbeln TYPE vbeln. wd_this->m_sel_options->add_parameter_field( EXPORTING i_id = ‘P1’ i_value = lv_kunnr i_read_only = wd_this->gv_read_kunnr ). wd_this->m_sel_options->add_parameter_field( EXPORTING i_id = ‘P2’ i_value = lv_vbeln i_read_only = wd_this->gv_read_vbeln ). ENDMETHOD.

CONFIG_SEL_SCREENS

METHOD config_sel_options .

DATA lo_componentinterface TYPE REF TO if_wd_component_usage.
lo_componentinterface = wd_this->wd_cpuse_select_options( ).
IF lo_componentinterface->has_active_component( ) EQ abap_false.
lo_componentinterface->create_component( ).
ENDIF.

wd_this->m_handler = wd_this->wd_cpifc_select_options( ).

wd_this->m_sel_options = wd_this->m_handler->init_selection_screen( ).

IF wd_this->m_sel_options IS NOT BOUND.
    RETURN.
ENDIF.

wd_this->m_sel_options->set_global_options(
    EXPORTING
      i_display_btn_cancel = abap_false    ” Displays “Cancel” Button
      i_display_btn_check   = abap_false   ” Displays “Check” Button
      i_display_btn_reset   = abap_false    ” Displays “Reset” Button
      i_display_btn_execute = abap_false    ” Displays “Apply” Button
).
wd_this->m_sel_options->remove_all_sel_screen_items( ).

DATA lv_kunnr TYPE REF TO data.
DATA lv_vbeln TYPE REF TO data.

CREATE DATA lv_kunnr TYPE kunnr.
CREATE DATA lv_vbeln TYPE vbeln.

wd_this->m_sel_options->add_parameter_field(
    EXPORTING
      i_id                         = ‘P1’
      i_value                      = lv_kunnr
      i_read_only                  = wd_this->gv_read_kunnr
).

wd_this->m_sel_options->add_parameter_field(
    EXPORTING
      i_id                         = ‘P2’
      i_value                      = lv_vbeln
      i_read_only                  = wd_this->gv_read_vbeln
).

ENDMETHOD.

Step 10:

We need to fill the radio buttons texts and initialize the selection screen. Hence add the below code in view initialization method “WDDOINIT( )”

WDDOINIT
METHOD wddoinit . DATA lo_nd_radio_buttons TYPE REF TO if_wd_context_node. DATA lt_radio_buttons TYPE wd_this->elements_radio_buttons. DATA ls_radio LIKE LINE OF lt_radio_buttons. “get radio button node reference lo_nd_radio_buttons = wd_context->get_child_node( name = wd_this->wdctx_radio_buttons ). “================================ ” Prepare radio buttons “================================ CLEAR ls_radio. ls_radio-text = ‘Customer’. APPEND ls_radio TO lt_radio_buttons. CLEAR ls_radio. ls_radio-text = ‘Sales Order’. APPEND ls_radio TO lt_radio_buttons. lo_nd_radio_buttons->bind_table( new_items = lt_radio_buttons set_initial_elements = abap_true ). “================================ ” Initialize the view attributes “================================ wd_this->gv_read_kunnr = abap_false. wd_this->gv_read_vbeln = abap_true. “================================ ” Configure the selection screen “================================ wd_this->config_sel_options( ). ENDMETHOD.

WDDOINIT

METHOD wddoinit .
DATA lo_nd_radio_buttons TYPE REF TO if_wd_context_node.

DATA lt_radio_buttons TYPE wd_this->elements_radio_buttons.
DATA ls_radio LIKE LINE OF lt_radio_buttons.

“get radio button node reference
lo_nd_radio_buttons =
wd_context->get_child_node( name = wd_this->wdctx_radio_buttons ).

“================================
” Prepare radio buttons
“================================
CLEAR ls_radio.
ls_radio-text = ‘Customer’.
APPEND ls_radio TO lt_radio_buttons.

CLEAR ls_radio.
ls_radio-text = ‘Sales Order’.
APPEND ls_radio TO lt_radio_buttons.

lo_nd_radio_buttons->bind_table(
new_items = lt_radio_buttons
set_initial_elements = abap_true ).

“================================
” Initialize the view attributes
“================================
wd_this->gv_read_kunnr = abap_false.
wd_this->gv_read_vbeln = abap_true.

“================================
” Configure the selection screen
“================================
wd_this->config_sel_options( ).

ENDMETHOD.

Step 11:

On selection of radio buttons, we need to set the read_only property of selection screen elements. hence add the below code in event handler method ONACTIONRADIO_SELECT

ONACTIONRADIO_SELECT
METHOD onactionradio_select . DATA lv_index TYPE i. ” get the index of radio button wdevent->get_data( EXPORTING name = ‘INDEX’ IMPORTING value = lv_index ). CASE lv_index. WHEN 1.”kunnr wd_this->gv_read_kunnr = abap_false. wd_this->gv_read_vbeln = abap_true. WHEN 2.”vbeln wd_this->gv_read_kunnr = abap_true. wd_this->gv_read_vbeln = abap_false. ENDCASE. “========================== ” Re-configure the selection screen “========================== wd_this->config_sel_options( ). ENDMETHOD.

ONACTIONRADIO_SELECT

METHOD onactionradio_select .
DATA lv_index TYPE i.

” get the index of radio button
wdevent->get_data(
EXPORTING name = ‘INDEX’ IMPORTING value = lv_index ).

CASE lv_index.
    WHEN 1.”kunnr
      wd_this->gv_read_kunnr = abap_false.
      wd_this->gv_read_vbeln = abap_true.
    WHEN 2.”vbeln
      wd_this->gv_read_kunnr = abap_true.
      wd_this->gv_read_vbeln = abap_false.
ENDCASE.
“==========================
” Re-configure the selection screen
“==========================
wd_this->config_sel_options( ).
ENDMETHOD.

Step 12:

Open window W_MAIN and embed the view from select options component as below

Now, Activate the whole component

Step 13:

Create an application as shown below

Output:

Now, we are ready to see Output:

Initially, the output looks as below i.e. default Customer radio button is selected and Sales Document input field is non-editable

Onselect of “Sales Order” radio button, the input field “Customer” goes non-editable and making the “Sales Document” as editable as shown below

Hope this document would be useful for those looking for enabling/disabling selection screen elements based on some action

I appreciate your comments/feedback/suggestions

9 Comments

You must be Logged on to comment or reply to a post.

Ritish Banerjee

February 18, 2014 at 11:14 am

Very much helpful.
I was getting a short dump while changing the radio button selection and then I realised I forgot to add this:

wd_this->m_sel_options->remove_all_sel_screen_items( ).

Ramakrishnappa Gangappa

Blog Post Author

February 19, 2014 at 7:04 am

Thank you Ritish 🙂 ...Yes.. the method remove_all_sel_screen_items( ) is very much critical for this kind of requirement.

Regards,

Rama

Priyesh Shah

February 28, 2014 at 10:13 am

Hi,

Good One Clearly Explained..

Best Regards.

Priyesh Shah

Ramakrishnappa Gangappa

Blog Post Author

February 28, 2014 at 10:16 am

Thanks a lot Piyesh 🙂

I appreciate your feedback and it motivates me to go ahead:)

Regards,

Rama

rajesh m

April 9, 2014 at 2:44 am

hi @Ramakrishnappa Gangappa

how can i add a custom button in the select-options using the interface if_wd_Select_options

i try to use the method add_selection_Screen_item() not able to understand what to pass to it

as it is standard method

what is the use of the this empty method

when to use this empty methods

Regards

Prashanth

Ramakrishnappa Gangappa

Blog Post Author

April 22, 2014 at 2:31 am

Hi Prashanth,

We don't have provision to add custom buttons within the select options.

Here if_wd_select_options is an interface, hence there is no implementation exists, hence those are empty 🙂 ... these gets implemented when we use WDR_SELECT_OPTIONS wd component.

Regards,

Rama

Ramesh Natarajan

December 15, 2014 at 2:36 pm

Hi,

Useful Information . Thanks...

Regards,

Ramesh N

Ramakrishnappa Gangappa

Blog Post Author

December 16, 2014 at 2:36 am

Thank you Ramesh 🙂

Vivek Nair

December 17, 2014 at 9:58 am

Hi Ram,

Excellent Blog thank you so much for sharing it very much informative.

Associated with this I have a requirement in Webdynpro using Radio buttons, I would require your expertise in achieving it.

I have to create/change a planner group using webdynpro, in which I would be providing 4 fields from a webdynpro screen which would go and update the T024i table.

My requirement here is .

1. When the user click on the first radio button the fields under the second radio button should be greyed out.

2. All the fields should be mandatory filled(obligatory).

3. When the user clicks Submit it should open another window with a number range generated.

4. Create a link and send this link from webdynpro to users mail box

5. When user clicks the links open the webdynpro page and approve or reject the request, if approved call the fm to update t024i table.

As in to store the data I have created two structures which will capture all the data from screen and the number range too for create and change respectively.

So As of now I want the steps 1,2,3 to be achieved and I have webdynpro Components below is what I have created

I have created a component and a view with two nodes for each create and change and two attributes to map the two radio buttons.

I have mapped the Create new planner grp and change new planner grp with Radio_create and Radio_change attributes. after that I have mapped all the sel_screen attributes and sel_screen_on_change attributes respectively.

Also I have created 4 events for

Create Planner Radio button- on_create

Change planner radio button-on_change

Submit button - Onsubmit

Clear button - onclear.

I have also added the select options component interface so that to make editable and in editable respectively

Since I am new to webdynpro I am struck on where action button should be create(how this has to be coded so that I could get the selection screen as per my requirement.

Could you please help me out with this??

Thanks in advance.

Regards,

Vivek

How to disable/enable Select Options on Radiobutton action in Web Dynpro ABAP

Assigned Tags