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.

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.

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.

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

Add attribute to the context node as shown below.

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

Context node will be created as below.

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

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

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

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

Create an event handler method for the Button UI element.

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

Context node will look like.

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

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

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

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.