Radio button UI Element

Radio Button UI element is a Button that has two states on and off which enable the users to select option. This type of radio button UI element places the individual radio buttons on the screen like

We can also place n no of radio buttons and toggle between them if all the radio buttons are binded to the same context attributes.

How radio Button works?

The radio button UI element has two key properties.

Key to select
Selected Key

The radio button gets selected when the value in the key to select is same as the value in the selected key.

Both property Selected key and Key to select is bindable to the attribute of type string.

Whenever we are placing the individual radio button UI element on the screen we need to handle the toggle using a single method for each radio button.

The key to select attribute is fixed and Whenever the radio button is selected the system will return the value to the selected key property whatever is there in the key to select.

Say if the key to select value is ‘X’ and when I select the radio button1 the attribute binded to the selected key property also will hold ‘X’.

Now let us see a simple example on how to use the radio button UI element.

In this scenario I am going to place the two individual radio buttons and create an individual method for each radio button to toggle it. To know which radio button is selected I am going to read the context and display which radio button is selected in a text view.

Step 1 : Go to the Tcode SE11 and create a webdynpro component.

Enter the description and press enter.

Assign the component to a package or save it in a local object.

Step 2 : In the context tab of the view controller, create a context node with the three attributes.

Since I am going to created two radio button , I ll be needing an two attribute to bind the selected key property one for each and a common key to select attribute.

Create a context node ‘RADIO’ with three attribute key to select, radio1 and radio2 of type string.

Right click on the context node and choose create -> node.

Provide the node name the pop up and press enter.

Node will be created as below.

Right click on the node Radio and select create ->attribute to add the attributes.

Enter the name and type of the attributes and press enter.

Attribute for the node will be created as below.

In a similar way create two more attributes radio1 and radio2 of type string.

Step 3 : Go the layout tab of the view controller.

Right click on the rootcontainerui element and select insert element to insert the ui element of your choice.

Provide the id for the UI element and choose a type and press enter.

Bind the obligatory binding of the radio button ui element to the radio1 attribute.

In a similar way bind the key to select property to the key to select attribute.

Provide text for the radio button.

Create an event handler method for this radio button as shown below.

In a similar way create an another radio button and bind the radio2 attribute to the selected key property and key_to_select to the key to select property and create an event handler method to it.

Step 4 : Initialization of the radio button.

Remember the radio button gets selected when the selected key and key to select values are same.

Take an example if

Key to select = ‘X’

Radio 1 = ‘X’ (Selected Key property of radio button 1)

Radio 2 = ‘ ‘ (Selected Key property of radio button 2)

Then the radio button one will be selected as the key to select property and selected key value binded to the radio button are same where as it differs for the radio button two.

Now I am going to set the radio button 1 as selected in the do init method.

In the WDDOINIT method do the following.

Set the context node radio using the code wizard . Select the node radio and choose the radio option set and press enter.

Modify the code generated by the system as below.

In the event handler for the radio button 1 write the following code.

In the event handler for the radio button 2 do the following to set the radio button2 as selected.

So far, we have created methods to handle the toggling of radio button. Now let us create a button and a text view UI element. On selection of the button we will read and display which radio button is selected in the the text view.

Step 5 : Create a button UI element in the view layout.

The property of the Button UI element is as below.

Provide the text for the button UI element and create an event handler method for the button.

Step 6 : Create a context attribute to be binded to the textview UI element of type string.

Create a text view UI element and bind the attribute text to the text property of the text view.

Bind the property text of the text view to the attribute text.

Step 7 : In the event handler for the button do the following.

Read the context node radio from which you will come to know which radio button I selected with the flag ‘X’ and set the text view accordingly for the radio button selected.

Read the context node radio.