Step 1: Create a webdynpro component as shown below.

Enter the component name and press enter. Assign the component to a package.

Step 2: In the Context node of the view controller, create a context node RADIO of cardinality 0..n and attributes to it as shown below.

Create an attribute for the node RADIO.

Step 3 : Go to the layout of the view controller and place the UI element Radio button group by index.

Bind the texts property of the radio button to our attribute.

Step 4: Now go to the WDDOINIT method to initialize the value for the radio buttons. Let us assume we are gonna provide colors red, blue and green as a option for the radio button.

Just set the context node along with your values to it.

Read the context node using code wizard. Select the icon and choose the context node. Select the radio button set and click the check box as table operation to set the node as a table.

Codes will be generated as below.

Now create a work area for the internal table generated by the code wizard. Hard code the values to the work area and append the values to the internal table.

Save and activate your whole component.

Step 5: Create an application to test your component.

Test your application.

Output:

So far we have only seen to set the radio buttons on the screen. Now let us see the action associated with the radio button on dynamically changing the buttons on the screen.

Step 6: Create a context attribute text of type string as shown below in the view controller.

Step 7: Go to the layout of the view controller and inset a UI element Label.

In the property of the lable UI element fill in the obligatory parameters marked with red.

Bind the lable for property to the text view which we are going to create now.

Step 8: Create a UI element text view.

Bind the property of the text view “TEXT” to the attribute text which we created earlier.

Assign the text view as the lable for property of the label.

Step 9 : In the properties of the Radio button UI element create an action.

Double click on the action On toggle and write the following codings.

Read the context node using the code wizard. (Note : Not as table operation ) .

Code will be generated as below.

Declare an attribute for index and get the radio button selected using the method get_lead_selection_index.

Now we have got the index number of which is being selected. To identify the value which is selected read the context node as a table operation and read the selected value using the index which we obtained.

Delete already declared variables from the genreated code Keep the code below.

Now the internal table contains all the records from which we can choose the selected one using Read statement with the index.

Then Get the value of which radio button is selected and set the attribute “text” to indicate which radio button has been selected.

Using code wizard set the attribute text as shown below.

Save and activate the whole component and test the application.

Output: