Skip to content

Switch

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

Switch Properties

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

Caption

The key name of the property

  • 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


Styles

Set styles for Background, Switch and Caption.

  • type: object with following properties.
Property Type Required Default
Background string Optional
Switch string Optional
Caption string Optional

Background

The string value is a style class name for Background.

Switch

The string value is a style class name for Switch.

Caption

The string value is a style class name for Caption.


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,
        "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: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}