How to disable/enable Select Options on Radiobutton: Application to enable/disable select options on Radio button action in Web Dynpro ABAP


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


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

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( ).

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.

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.

i_id                         = ‘P1’
i_value                      = lv_kunnr
i_read_only                  = wd_this->gv_read_kunnr

i_id                         = ‘P2’
i_value                      = lv_vbeln
i_read_only                  = wd_this->gv_read_vbeln


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( )”

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.

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( ).


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

METHOD onactionradio_select .
DATA lv_index TYPE i.

” get the index of radio button
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.
” Re-configure the selection screen
wd_this->config_sel_options( ).

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



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

New NetWeaver Information at SAP.com

Very Helpfull



User Rating: Be the first one !