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

Check box group

 

The CheckBoxGroup allows users to select an element from a set of predefined options using the checkbox. The UI element CheckBoxGroup arranges the individual Check box in single-column or two-column tables.

 

clip_image002

 

The property text of the check box group UI element is binded to the attribute of a context node having an cardinality 0..n. The no of checkbox created in the screen depend upon the number of elements in the context node binded. Suppose if you are binding internal table having 5 records to the context node then 5 check boxes will be created in the screen.

 

Now let us take an example where I will create a check box group UI element and display the selected checkbox in a text view.

 

 

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

 

clip_image004

 

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 of cardinality 0..n as shown below.

 

clip_image006

 

Enter the node name, choose the cardinality as 0..n and press enter.

 

clip_image008

 

 

Add attribute to the context node as shown below.

clip_image010

 

Add the attribute name,choose a type and press enter.

 

clip_image012

 

Context node will be created as below.

clip_image014

 

 

Step 3 : Go to the layout tab of the view controller and insert a checkbox group UI element.

 

clip_image016

 

Provide the ID and choose the UI element type. Press Enter.

 clip_image018

 

Bind the text property of the check box UI element to the attribute value of context node checkbox.

 

clip_image020

 

Step 4 : Insert a button UI element and create an event handler method for the Button UI element.

 

clip_image022

 

 

Create an event handler method for the Button UI element.

clip_image024

 

 

Step 5 : Create an context attribute text of type string to be binded to the text view UI element.

 

clip_image026

 

Context node will look like.

 

clip_image028

Step 6: In the layout tab insert a text view UI element.

 

clip_image030

 

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

 

clip_image032

 

 

 

Step 6: Initialize the text for the checkbox in the DOINIT method.

 

 

clip_image034

 

Step 7 :  Do the following in the event handler method for the button.

 

First we need to know what are check boxes are ticked in the screen. To do that get the object reference of the context node and call the method GET_SELECTED_ELEMENTS using the object reference. This method will return the object reference for all the elements(Rows of internal table we binded) which are selected.

 

Then Using this objected reference the data in the row can be accessed. Concatenate all the elements which are selected and bind it to the text view UI element.

 

 

Write the code as below in the eventhandler method onread.

clip_image035

clip_image037

clip_image039

 

 

Step 8 : Save and activate the whole component.

clip_image041

 

Step 9 : Create an application and test the component.

 

clip_image043

 

 

 

Output :

 

clip_image045

 

 

Select the check boxes and click on read value.

 

clip_image047

About Arun

1 Comments:

Powered by Blogger.