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

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.

 

clip_image002

 

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.

 

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 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.

 

clip_image006

 

Attribute for the check box UI element.

 

clip_image008

 

 

Attribute for the Text property of the UI element.

 

 

clip_image010

 

Context node will look like.

 

clip_image012

 

 

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

 

clip_image014

 

 

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

 

clip_image016

 

 

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

 

clip_image018

 

 

  

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

clip_image020

 

 

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

 

clip_image022

 

 

 

Properties of the check box UI element.

 

clip_image024

 

 

 

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.

 

 

clip_image026

 

 

 

The code will be generated as below.

 

Note  : I have removed the commented lines and dead codes

 

clip_image028

 

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

 

clip_image030

 

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.

 

clip_image032

 

 

 

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

 

clip_image034

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.

 

clip_image036

 

 

Step 6 : Create an application for the component and test the application.

 

clip_image038

 

 

Output:

 

clip_image040

 

Select the check box.

 

clip_image042

 

Remove the tick

 

clip_image044

About Arun

0 Comments:

Post a Comment

Powered by Blogger.