Switch¶

The switch control is used to toggle two mutually exclusive states, On and Off.

Switch Properties¶

Property	Type	Required	Default
Caption	`string`	No
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
OnValueChange	ActionOrRule	No
Separator	`boolean`	No	`true`
Styles	`object`	No
Value	`boolean`	No	`false`
_Name	`string`	Yes
_Type	`const`	Yes

Caption¶

The key name of the property

type: string

HelperText¶

Helper text to be displayed if there is no validation view.

type: string

IsEditable¶

Disables or enables interaction

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

OnValueChange¶

Action or rule to perform after value changed

type: ActionOrRule
Formatter and Binding are not supported

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

type: boolean
default: true

Styles¶

Set styles for Background, Switch and Caption.

type: object with following properties.

Property	Type	Required
Background	string	No
Switch	string	No
Caption	string	No

Background¶

The string value is a style class name of Background.

Background style class

Switch¶

The string value is a style class name of Switch.

Switch style class

Caption¶

The string value is a style class name of Caption.

Caption style class

Value¶

Set the switch in on/off mode

type: boolean
default: false

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.FormCell.Switch"

Examples¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Switch",
        "_Name": "Switchcell",
        "Caption": "Confirmed",
        "Value": false,
        "IsEditable": true,
        "HelperText": "This is helper text",
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "Styles": {
          "Background": "SwitchFormCellBackground",
          "Switch": "SwitchFormCellSwitch",
          "Caption": "SwitchFormCellCaption"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* Switch Form Cell - Background */
.SwitchFormCellBackground {
  background-color: yellow;
}

/* Switch Form Cell - Switch */
.SwitchFormCellSwitch {
  background-color: red;
  padding: 5px;
}

/* Switch Form Cell - Caption */
.SwitchFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}