Check Box

With a check box UI element we can implement a single on or off switch. The check mark in the box indicates the option is selected and the value is true.

The Check Box UI element has an obligatory binding property checked which is to be binded to an attribute of type WDY_BOOLEAN.

By default the value of the check box UI element is set as False which means the UI element will not have check mark. However this property can be changed by initialzing the value in the doinit method and display the check box with check mark at the time of display.

Now let us take an simple example on how to display a check box with switch on and switch off option.

Let us create an check box ui element on selection of check box we will display the text activated in the in the text view and deactivation on removing the tick in check box.

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 two context attribute.

One context attribute of type wdy_boolean to be binded to the check box UI element and other of type string to be binded to the text property of the check box UI element.

Attribute for the check box UI element.

Attribute for the Text property of the UI element.

Context node will look like.

Step 3 : Go to the layout of the view container and insert a check box UI element.

Provide the ID and type in the Popup and press enter.

Bind the obligatory binding on the check box to the attribute checkbox as shown below.

Bind the attribute textview to the text property of the check box UI element.

Create an event handler method ontoggle to handle the event on selection of the check box.

Properties of the check box UI element.

Step 4 : In the event handler method for the check box ontoggle write the code to handle the occurrence on selection of check box.

Set the text property of the check box as activated in case of the check box is selected and deactivated in case of the check box is not selected. To know whether the check box is selected or not read the attribute binded to the checked property of the check box. The attribute will return the value X (True) in case of the check box is selected and ‘ ‘(False) in case of check box is not selected.

Using code wizard Read the attribute checkbox to know whether the check box is selected or not.

The code will be generated as below.

Note : I have removed the commented lines and dead codes

The variable lv_checkbox will now contains the value x or space according to the selection. Based on this set the attribute textview.

The code will be generated as below by the code wizard.

I have removed the variables that have been declared already and the commented lines and kept the remaining.

Modify the code in the event handler method on toggle as shown below.

Note : This method will be triggered only when the check box is selected then only the text view will be set. If you want the text view to hold activated or deactivated by the time of appearance on the screen then you have to set the attribute accordingly in the doinit method.

Step 5 : Save and activate the whole component.