# Dashboard 2 (flowfuse) toggle background color

**URL:** https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906
**Category:** Dashboard
**Tags:** flowfuse, dashboard-2
**Created:** [24 June 2024 11:25 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906 "2024-06-24T11:25:21Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![bltDefender](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bltdefender/32/33722_2.png) [@bltDefender](https://discourse.nodered.org/u/bltDefender)
#### Post date: [24 June 2024 11:25 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/1 "2024-06-24T11:25:21Z")

</div>

Hi all, I want to use buttons with a switch behavior. I will have lots of buttons from which the user can select one or many to set the context for specific function. To indicate what buttons have been selected I want the background color to be changed. Clicking another time on an already selected button shall set the background back to origin. By pushing msg.class to the button on click it will end up with inactive and active classes to be appended. The last class wins reg background-color. Not the best as these classes will not disappear until I restart the db, right? Over time, there will be many appends and I would like to avoid this.  
Is there a way to replace a class, so change .btn-inactive with .btn-active?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [24 June 2024 12:16 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/2 "2024-06-24T12:16:43Z")

</div>

No (kinda\*). This was a choice at design time (and i kinda wish I had went down a different path).

On Dashboard 1.0 the static class was overwritten by the dynamic value. In dashboard 2.0, it is added (additional to). (in fairness, I might be remembering that wrong)

However, what this means you cannot remove statically applied classes in DB 2.0. At the time of design this seemed like the better option (you set regular classes on your thing and apply/add the dynamic ones on top, without needing to include the original static classes).

_kinda\*_  
However, what i should clarify here is, sending empty class value SHOULD remove the dynamically added classes. So, you could apply dynamic classes with higher specificity than the static classes and/or remove the dynamic classes to achieve what you need.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 June 2024 12:31 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/3 "2024-06-24T12:31:18Z")

</div>

But you can make your own toggle button easily using `v-btn-toggle`

```auto
[{"id":"300d521b3521ba1f","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","name":"toggle","order":1,"width":"1","height":"1","head":"","format":"<template>\n <v-btn-toggle class=\"toggler\" v-model=\"toggle\">\n <v-btn >{{label}}</v-btn>\n </v-btn-toggle>\n</template>\n\n<script>\n export default {\n data() {\n return {\n toggle: null,\n label:\"Toggle me\",\n fromServer:false \n }\n },\n watch: {\n msg:function(){\n if(this.msg.payload != undefined){\n this.fromServer = true\n if(this.msg.payload == true){\n this.toggle = 0;\n }\n else{\n this.toggle = undefined\n }\n }\n },\n toggle:function(){\n if(this.fromServer == true){\n this.fromServer = false\n return\n }\n if(this.toggle === 0){\n this.send({payload:true})\n }\n else{\n this.send({payload:false})\n }\n } \n },\n \n }\n</script>\n<style>\n .toggler .v-btn--active{\n background-color: rgb(var(--v-theme-primary));\n }\n .toggler .v-btn--flat{\n background-color:red;\n }\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":350,"y":240,"wires":[["eb9093815003693b"]]},{"id":"f231720fb894b88f","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":220,"wires":[["300d521b3521ba1f"]]},{"id":"512b266f378c69ce","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":190,"y":260,"wires":[["300d521b3521ba1f"]]},{"id":"eb9093815003693b","type":"debug","z":"e59576a114c1e493","name":"TOGGLE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":500,"y":240,"wires":[]},{"id":"6f47b8907c5da63a","type":"ui-group","name":"Sliders","page":"19eb6d108e9275e2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":2,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#338109","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

### Author: ![bltDefender](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bltdefender/32/33722_2.png) [@bltDefender](https://discourse.nodered.org/u/bltDefender)
#### Post date: [24 June 2024 17:58 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/4 "2024-06-24T17:58:44Z")

</div>

thanks both. @hotNipi I am not a front end developer, so "easy" is relative. would you be so kind to point out what I need to change so that I can add multiple buttons adding the right model to every each. 😬

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 June 2024 18:15 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/5 "2024-06-24T18:15:33Z")

</div>

So multiple buttons as one component where you can activate/deactivate many?

---

<div class="post-metadata">

### Author: ![bltDefender](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bltdefender/32/33722_2.png) [@bltDefender](https://discourse.nodered.org/u/bltDefender)
#### Post date: [24 June 2024 19:17 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/6 "2024-06-24T19:17:45Z")

</div>

exactley. Each button represents a specific setting (controls a global car). Finally, there is an approve button which starts a process to read all global vars that were true and then executes a function. After this, all buttons shall be set back to inactive state (indicated by background color change as well).

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 June 2024 19:30 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/7 "2024-06-24T19:30:51Z")

</div>

All that surrounded logic is up to you. Here's the group of buttons which all can be toggled.  
The `msg.payload` contains an `array` of currently active buttons. Same sort of payload accepted by widget so it activates buttons what are listed in `msg.payload`

```auto
[{"id":"300d521b3521ba1f","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","name":"toggle","order":1,"width":"3","height":"1","head":"","format":"<template>\n <v-btn-toggle class=\"toggler\" v-model=\"toggle\" multiple divided>\n <v-btn v-for=\"button in buttons\" :value=\"button\">{{button}}</v-btn>\n </v-btn-toggle>\n</template>\n\n<script>\n export default {\n data() {\n return {\n toggle: [],\n buttons:[\"First\",\"Second\",\"Third\"],\n fromServer:false \n }\n },\n watch: {\n msg:function(){\n if(this.msg.payload != undefined){\n this.fromServer = true\n if(Array.isArray(this.msg.payload) == true){\n this.toggle = this.msg.payload\n } \n }\n },\n toggle:function(){\n if(this.fromServer == true){\n this.fromServer = false\n return\n }\n this.send({payload:this.toggle}) \n } \n },\n \n }\n</script>\n<style>\n .toggler .v-btn--active{\n background-color: rgb(var(--v-theme-primary));\n }\n .toggler .v-btn--flat{\n background-color:red;\n }\n \n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":410,"y":420,"wires":[["eb9093815003693b"]]},{"id":"f231720fb894b88f","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"First\",\"Second\"]","payloadType":"json","x":200,"y":360,"wires":[["300d521b3521ba1f"]]},{"id":"512b266f378c69ce","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"Second\"]","payloadType":"json","x":220,"y":400,"wires":[["300d521b3521ba1f"]]},{"id":"eb9093815003693b","type":"debug","z":"e59576a114c1e493","name":"TOGGLE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":540,"y":420,"wires":[]},{"id":"0f4378f16d392933","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"First\",\"Third\"]]","payloadType":"json","x":200,"y":440,"wires":[["300d521b3521ba1f"]]},{"id":"2665273c9bc3f45e","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":230,"y":480,"wires":[["300d521b3521ba1f"]]},{"id":"6f47b8907c5da63a","type":"ui-group","name":"Sliders","page":"19eb6d108e9275e2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":2,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#338109","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

### Author: ![bltDefender](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bltdefender/32/33722_2.png) [@bltDefender](https://discourse.nodered.org/u/bltDefender)
#### Post date: [25 June 2024 06:53 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/8 "2024-06-25T06:53:11Z")

</div>

perfect, thank you very much @hotNipi, I can take it from here.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [9 July 2024 06:53 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-toggle-background-color/88906/9 "2024-07-09T06:53:36Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.