Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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

 

clip_image002

 

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.

 

clip_image004

 

How radio Button works?

 

The radio button UI element has two key properties.

  1. Key to select
  2. 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.

 

clip_image006

 

 

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.

 

clip_image008

 

 

Provide the node name the pop up and press enter.

 

clip_image010

 

Node will be created as below.


clip_image012

 

 

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

clip_image014

 

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

clip_image016

 

Attribute for the node will be created as below.

 

clip_image018

 

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

 

clip_image020

 

 

 

 

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.

 

clip_image022

 

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

 

clip_image024

 

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

 

clip_image026

 

 

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

 

clip_image028

 

Provide text for the radio button.

 

clip_image030

 

 

 

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

 

clip_image032

 

clip_image034

 

 

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.

 

clip_image036

 

 

 

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 clip_image038.  Select the node radio and choose the radio option set and press enter.

clip_image040

 

 

Modify the code generated by the system as below.

 

clip_image042

 

 

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

 

clip_image044

 

 

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

clip_image046

 

 

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.

 

clip_image048

 

The property of the Button UI element is as below.

 

clip_image050

 

 

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.

 

clip_image052

 

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

 

clip_image054

 

 

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

 

clip_image056

 

 

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.

clip_image058

 

Code will be generated as below.

 

Note : I have removed the dead and unwanted codes.

 

clip_image060

 

 

Set the text view according to the radio button selected.

 

clip_image062

 

 

 

 

 

Code will be generated as below. From the system generated code modify the code as below.

 

clip_image063

 

 

Step 8: Save and activate the whole component. Create an application for the component to test the component.

 

Activating the component

clip_image064

 

Create an application for the component.

 

 

clip_image066

 

 

 

 

 

 

Output :

 

clip_image068

 

Click on read value.

 

clip_image070

 

Select the radio button 2 and click read value.

 

clip_image072

About Arun

1 Comments:

Powered by Blogger.