This is the snippet I’m using:
{
"snippetHeader": "Dashboard Studio Snippet",
"snippetType": "widget-snippet",
"snippetFormatVersion": 1,
"version": "1.8.3",
"source": {
"dashboardName": "Demo dash",
"page": 1,
"createdAt": "2026-05-03T17:23:40.106Z"
},
"master": {
"currentPage": 1
},
"widgets": {
"switch_175855588": {
"type": "switch",
"overrides": {
"x": 1030,
"y": 460,
"width": 110,
"height": 50,
"zIndex": 3,
"page": 1,
"buttonLabel": "Close",
"outputTopic": "local/showSettings2",
"onPayload": "false",
"metaName": "New Switch / Button",
"mode": "push",
"style": "image-only",
"typography": {
"buttonLabelOutside": {
"offsetY": 40,
"textTransform": "none",
"fontSize": 16
}
},
"borderColor": "@text",
"visible": false
},
"bindings": {
"visible": "local/showSettings2"
}
},
"empty_3874": {
"type": "empty",
"overrides": {
"x": 220,
"y": 30,
"width": 940,
"height": 510,
"zIndex": 2,
"page": 1,
"metaName": "New Container",
"visible": false
},
"bindings": {
"visible": "local/showSettings2"
}
},
"switch_2192": {
"type": "switch",
"overrides": {
"x": 20,
"y": 550,
"width": 180,
"height": 120,
"zIndex": 1,
"page": 1,
"state": true,
"buttonLabel": "Setting no State",
"outputTopic": "local/showSettings2",
"icons": {
"on": {
"source": "phosphor",
"builtin": "ph-gear",
"filled": true,
"customUrl": "",
"tintImage": false,
"hoverColor": "#6B5B3F",
"color": "@warning"
},
"off": {
"source": "phosphor",
"builtin": "ph-gear",
"filled": true,
"customUrl": "",
"tintImage": false
}
},
"metaName": "New Switch / Button",
"mode": "toggle",
"style": "image-only",
"typography": {
"buttonLabelOutside": {
"offsetY": 70,
"textTransform": "none",
"fontSize": 16
}
},
"borderColor": "@text",
"iconSize": 60,
"iconOffY": -30
},
"bindings": {
"state": ""
}
},
"switch_389786089": {
"type": "switch",
"overrides": {
"x": 20,
"y": 690,
"width": 180,
"height": 120,
"zIndex": 1,
"page": 1,
"buttonLabel": "Setting with State",
"outputTopic": "local/showSettings2",
"icons": {
"on": {
"source": "phosphor",
"builtin": "ph-gear",
"filled": true,
"customUrl": "",
"tintImage": false,
"hoverColor": "#6B5B3F",
"color": "@warning"
},
"off": {
"source": "phosphor",
"builtin": "ph-gear",
"filled": true,
"customUrl": "",
"tintImage": false
}
},
"metaName": "New Switch / Button",
"mode": "toggle",
"style": "image-only",
"typography": {
"buttonLabelOutside": {
"offsetY": 70,
"textTransform": "none",
"fontSize": 16
}
},
"borderColor": "@text",
"iconSize": 60,
"iconOffY": -30
},
"bindings": {
"state": "local/showSettings2"
}
},
"label_3173": {
"type": "label",
"overrides": {
"x": 240,
"y": 660,
"width": 260,
"height": 300,
"page": 1,
"text": "",
"metaName": "New Label"
},
"bindings": {
"text": "local/showSettings2"
}
}
}
}
The snippet contains 5 objects:
- Toggle switch without using field State on/off

- Same toggle switch, only with filled field State on/off

- Push button to hide Container and Close button itself
- Container (for example containing settings)
- label containing the variable “local/showSettings2”
Test A:
- Push the button (1): container (4) and Close (3) will show. Label (5) changes from false into true
- Push Close (3): Container(4) and button Close (3) are invisible, but button 1 icon is still On. Label (5) changes from true into false
Test B:
- Push the button (2): container (4) and Close (3) don’t get visible. Label (5) stays false.
- Return to the screen edit mode: container (4) en Close (3) get visible and label (5) switches from false into true