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 Index

This tutorial explains how to create radio button group by index.

 

Step 1: Create a webdynpro component as shown below.

 

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

 

clip_image002

 

clip_image004

 

  

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.


clip_image006

 

Create an attribute for the node RADIO.

 

clip_image008

 

clip_image010

 

 

clip_image012

 

 

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

 

clip_image014

 

 

clip_image016

 

 

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

 

clip_image018

 

clip_image020

 

clip_image022

 

 

 

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

 

clip_image024

 

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

 

 

 

 

Read the context node using code wizard. Select the icon clip_image026 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.

 

clip_image028

 

Codes will be generated as below.

 

clip_image030

 

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.

 

clip_image032

 

Save and activate your whole component.

 

 

Step 5: Create an application to test your component.

 

clip_image034

 

 

Test your application.

 

clip_image036

 

 

Output:

clip_image038

 

 

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.

 

clip_image040

 

clip_image042

 

clip_image044

 

 

 

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

 

clip_image046

 

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

clip_image048

 

clip_image050

 

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

 

Step 8: Create a UI element text view.

 

clip_image052

 

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

 

clip_image054

 

 

clip_image056

 

clip_image058

 

 

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.

 

clip_image060 

clip_image062

 

clip_image064

 

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

 

clip_image066

 

 

 

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

 

Code will be generated as below.

 

clip_image068

 

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.

clip_image070

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

 

clip_image072

 

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.

clip_image074

 

 

 

Save and activate the whole component and test the application.

 

Output:

 

clip_image076

 

clip_image078

About Arun

0 Comments:

Post a Comment

Powered by Blogger.