# Toggle Button

# type: toggleButton

This Element allows to switch between two states.

Toggle-Button-Element

# Configuration Overview

{
  "id": "tb",
  "type": "toggleButton",
  "config": {
    "variable": "agg",
    "left": {
      "label": "Table",
      "value": {
        "sub1": "table",
        "sub2": "table"
      }
    },
    "right": {
      "label": "Highchart",
      "value": {
        "sub1": "highcharts",
        "sub2": "highcharts"
      }
    },
    "checked": false,
    "disabled": false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Properties

# id

Property: id

Type: string

Description: The unique ID assigned to the Element. This is defined by the Builder and used to refer to the Element in Layouts.

"id": "tb"
1

# type

Property: type

Type: string

Description: Type of the Element.

"type": "toggleButton"
1

# config.variables

Property: config.variable

Type: string

Description: Name of the Variable that should be changed.

"variable": "agg"
1

# config.left

Property: config.left

Type: object

Description: Properties of the Variable that will be changed when the button is toggled to the left.

"left": {
  "label": "Table",
  "value": {
    "sub1": "table",
    "sub2": "table"
  }
},
1
2
3
4
5
6
7

# config.right

Property: config.right

Type: object

Description: Properties of the Variable that will be changed when the button is toggled to the left.

"right": {
  "label": "Highchart",
  "value": {
    "sub1": "highcharts",
    "sub2": "highcharts"
  }
},
1
2
3
4
5
6
7

# config.(x).value

Property: config.(x).value

Type: object

Description: Used to assign values to a Variable when toggled to the left or right."sub1" and "sub2" are placeholder for the properties of the Variable that will be changed, while "table" is the value of the properties that will be assigned.

      "value": {
        "sub1": "table",
        "sub2": "table"
      }
1
2
3
4

# config.checked

Property: config.checked

Type: boolean

Description: Property to set the default state of the Toggle Button to the right state. The default value of this configuration is false.

"checked": true | false
1

# config.disabled

Property: config.disabled

Type: boolean

Description: Property to disable the Toggle Button. The default value is false.

"disabled": true | false
1