# Dashboard 2 (flowfuse) dynamic button

**URL:** <https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885>\
**Category:** Dashboard\
**Tags:** flowfuse, dashboard-2\
**Created:** [12 May 2024 06:26 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885 "2024-05-12T06:26:58Z")\
**Posts on this page:** 6\
**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:** [12 May 2024 06:26 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/1 "2024-05-12T06:26:58Z")

</div>

Hi all,  
coming from dashboard 1 I wanted to try out jumping on 2. I am currently failing at simple dynamic button backgrounds. I use buttons to control state of several devices. All buttons toggle power by triggering mqtt messages. according to the power states "ON" and "OFF" the button should indicate with green or red background. Also the icon changes. On dashboard 1 I simply sent a background style to the button coming from a switch node. In dashboard 2 it does not work. The class I send to the new button is set in the wrapping div of the button not to the button itself. This way (at least how I see it in the dev tools) the button classes override my own css class settings in terms of background-color. See below my example with the class dynamic-background-button-active:

```auto
<div id="nrdb-ui-widget-48ac968843b6271c" class="nrdb-ui-widget nrdb-ui-button dynamic-background-button-active" style="display: grid; grid-template-rows: repeat(1, minmax(45px, auto)); grid-row-end: span 1; grid-column-end: span 3;">
<button type="button" class="v-btn v-btn--block v-theme--nrdb v-btn--density-default v-btn--size-default v-btn--variant-flat" style="grid-row-end: span 1;">
<span class="v-btn__overlay"></span>
<span class="v-btn__underlay"></span>
<span class="v-btn__prepend"><i class="mdi-radiator mdi v-icon notranslate v-theme--nrdb v-icon--size-default" aria-hidden="true"></i></span>
<span class="v-btn__content" data-no-activator="">Heizung</span><!----><!----></button></div>

```

Here is an example flow

```auto
[{"id":"e9877d25696d97a4","type":"ui-template","z":"55f288a0a67d825c","group":"","page":"5294d297c3ed545d","ui":"","name":"dynamic button backgrounds","order":0,"width":0,"height":0,"head":"","format":".dynamic-background-button-active {\n background-color: greenyellow;\n}\n.dynamic-background-button-inactive {\n background-color: red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":990,"y":620,"wires":[[]]},{"id":"e323f6f36d499b4e","type":"inject","z":"55f288a0a67d825c","name":"class inject active","props":[{"p":"class","v":"dynamic-background-button-active","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":880,"y":700,"wires":[["8b4cbb03a6e415a1"]]},{"id":"8b4cbb03a6e415a1","type":"ui-button","z":"55f288a0a67d825c","group":"4ea89f51a16a52ad","name":"","label":"Heizung (sandbox flow)","order":0,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"radiator","iconPosition":"left","payload":"TOGGLE","payloadType":"str","topic":"topic","topicType":"msg","x":1090,"y":700,"wires":[["88f6a1738b86ba81"]]},{"id":"88f6a1738b86ba81","type":"mqtt out","z":"55f288a0a67d825c","name":"Heater","topic":"cmnd/office_mirco_pow_heater/POWER","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"c689a17e.a806a8","x":1270,"y":700,"wires":[]},{"id":"c27a5e6d0f72de6d","type":"inject","z":"55f288a0a67d825c","name":"class inject inactive","props":[{"p":"class","v":"dynamic-background-button-inactive","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":870,"y":740,"wires":[["8b4cbb03a6e415a1"]]},{"id":"5294d297c3ed545d","type":"ui-page","name":"Office Mirco","ui":"7bdb78d880f39b77","path":"/officemirco","icon":"home","layout":"notebook","theme":"129e99574def90a3","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"4ea89f51a16a52ad","type":"ui-group","name":"Control","page":"5294d297c3ed545d","width":"9","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"c689a17e.a806a8","type":"mqtt-broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"verifyservercert":true,"compatmode":true,"keepalive":"15","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":null,"birthPayload":"","willTopic":"","willQos":"0","willRetain":null,"willPayload":""},{"id":"7bdb78d880f39b77","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#000000","primary":"#ffd500","bgPage":"#a1a1a1","groupBg":"#b3b3b3","groupOutline":"#ffffff"},"sizes":{"pagePadding":"9px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"6px"}}]

```

Could not find anything in the docs when using ootb buttons, any help appreciated 🙂

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 May 2024 07:05 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/2 "2024-05-12T07:05:03Z")

</div>

Could you post a simple flow showing the problem please? A couple of inject nodes and the button.

---

<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:** [12 May 2024 07:27 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/3 "2024-05-12T07:27:30Z")

</div>

thank you Colin for looking at this. I edited my post so there is a flow included now.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 May 2024 07:52 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/4 "2024-05-12T07:52:28Z")

</div>

Do you have anywhere that you've defined the CSS-behaviour for `dynamic-background-button-inactive`? I can see the class being injected, but no CSS-definition that specific what styling should be applied?

This can be done in a `ui-template` node with a `type` of `CSS (Single Page)` or `CSS (All Pages)`. Your class definition can then access the relevant nested _thing_ to override:

```css
.dynamic-background-button-inactive .v-btn {
    background-color: green;
}

```

---

<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:** [12 May 2024 08:02 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/5 "2024-05-12T08:02:20Z")

</div>

ja, sry, that is pretty obvious, so I did not put the template in the flow. There is of course such a definition, I modified the flow above and I see from your example that I was missing the .v-btn in my class definition. Added this and it works well. Thank you 🙂

---

<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:** [26 May 2024 08:02 UTC](https://discourse.nodered.org/t/dashboard-2-flowfuse-dynamic-button/87885/6 "2024-05-26T08:02:50Z")

</div>

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