1. For the on state, create an Oval and Rounded Rectangle with a green fill with the Oval on the right



2. Name the Oval "On1_Circle" and Rounded Rectangle "On1_Rectangle"

3. For the off state, create another Oval and Rounded Rectangle but fill with grey and Oval on the left



4. Name these objects "Off1_Circle" and "Off1_Rectangle"

5. For the off state buttons, move the Oval and Rounded Rectangle up one level so it is displayed over the on state objects

6. Create an invisible button and move it so it appears on top. It should appear as shown in the image below:


7. To handle data, the Form On Load method will intialize the button as "Form.Switch1"

Case of    : (Form event code=On Load)       Form.Switch1:=True    initToggleButtons("Switch1"; "Off1")    End case

8. To handle the visual state based on the data, the method "initToggleButtons" will simply show the Off state objects when Form.Switch1 is False and hide the Off state objects when Form.Switch1 is True.

// Method: initToggleButtons C_TEXT($1; $dataName_t) C_TEXT($2; $buttonName_t) $dataName_t:=$1 $buttonName_t:=$2 If (Form[$1])    OBJECT SET VISIBLE(*; $buttonName_t+"@"; False) End if

8. For the invisible button On Click event, it will contain the method "toggleButton" with two arguments: data name and object name

// Invisible button method toggleButton("Switch1"; "Off1")

9. The "toggleButton" method will toggle the data and visual state of the objects like so:

// Method: toggleButton C_TEXT($1; $DataName) C_TEXT($2; $GroupName) $DataName:=$1 $GroupName:=$2 If (Form[$DataName]=False)    Form[$DataName]:=True    OBJECT SET VISIBLE(*; $GroupName+"@"; False) Else    Form[$DataName]:=False    OBJECT SET VISIBLE(*; $GroupName+"@"; True) End if