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

Radio button Group by Key

 

The RadioButtonGroupByKey UI element groups the individual radio button UI elements in table form, and only one radio button can be selected within the UI element group.

 

clip_image002

 

Unlike radio button the radio Button group by Key has only the selected key property. The Radio button group by key gets the list of values from the attributed binded to the selected key property. The attribute must be of some data element with fixed range values. Radio button group by key displays the option for the fixed range values. Say for example if i bind the attribute of type BSYTP then the radio button displays all the fixed values assigned to it domain.

 

clip_image004

 

Domain fixed values for the data element BSTYP.

 

clip_image006

 

Scenario :  Let us create a radio button group by key UI element, and bind it to the fixed range values of the BSTYP. Then read and display the values in the radio button.

 

 

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

 

clip_image008

 

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

 

Step 2 : In the context tab of the view controller create a context node as shown below.

 

clip_image009 

 

 

 

 

 

 

Enter the node name and press enter.

 

clip_image011

 

 

Context node will be created as shown below.

 

clip_image013

 

  

Create an attribute for the context node of type BSTYP.

 

clip_image015

 

Enter the attribute name and type and press Enter.

 

clip_image017

 

 

clip_image019

 

 

Step 3 : In the layout tab of the view controller, Insert a radio button Group by key UI element as shown below.

 

clip_image021

 

 

Provide the ID and type for the UI element.

 

clip_image023

 

 

Bind the obligatory binding selected key of the radio button to the attribute key.

 

 

clip_image025

 

 

The list of radio button will contains all the fixed values in the  domain.

 

clip_image027

 

 

 

 

 

Step 4 : Insert a Button UI element and create a event handler method for that Button.

 

clip_image029

 

Set the property Text of the button ui element and create an event handler method for it as shown below.

 

clip_image031

 

Step 5 :

 

Create a context attribute text of type string to be binded to the text view UI element.

 

clip_image033

 

 

Insert a text view UI element and bind the text property of the text view UI element to the attribute text which we created.

 

clip_image035

 

clip_image037

 

 

 

 

 

clip_image039

 

 

Step 6 :

 

In the event handler method for the read value button, write the code to read the radio button selected and set the text attribute accordingly.

 

To know which radio button is selected the read the attribute which is binded to the selected key property of the radio button. The system will provide the value of which

radio button is selected in that attribute.

 

Using code wizard read the key attribute which is binded to the radio button and press enter.

 

clip_image041

 

System will genreate the code as below.

Note : I have removed the unwanted and dead codes.

 

clip_image043

The attribute lv_key will now contain the value of the radio button selected.

 

Set the context attribute text according to the radio button selected.

 

clip_image045

 

Code will be generated as below.

 

clip_image047

 

 

Modify the code as below to set the  text according to the radio button selected.

 

 clip_image048

clip_image049

clip_image050

 

 

 

Step 7 : Activate the whole component.

 

clip_image052

 

Step 8 : Create an application and test the component.

 

clip_image054

 

 

 

 

 

Output :

 

clip_image056

 

Select a radio button and click on read value.

 

clip_image058

 

 

About Arun

3 Comments:

  1. I am getting only a single digit value as output. why is it so?

    ReplyDelete
  2. Great document and its so clean....

    ReplyDelete
  3. Step 1 : Go to the Tcode SE80

    ReplyDelete

Powered by Blogger.