Switch¶

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

Switch Properties¶

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

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	Optional
Switch	string	Optional
Caption	string	Optional

Background¶

The string value is a style class name for Background.

Background style class

Switch¶

The string value is a style class name for Switch.

Switch style class

Caption¶

The string value is a style class name for 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 equal to:

"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;
}