# Help with button node

**URL:** <https://discourse.nodered.org/t/help-with-button-node/87867>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [10 May 2024 17:03 UTC](https://discourse.nodered.org/t/help-with-button-node/87867 "2024-05-10T17:03:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ak68](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@ak68](https://discourse.nodered.org/u/ak68)\
**Post date:** [10 May 2024 17:03 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/1 "2024-05-10T17:03:09Z")

</div>

I´m using the basic funktions of ui\_button node.  
Now, I would like to change the colours, depending on the payload (number)

I set {{msg.color}} for backround at node-settings and

if (msg.payload === "1")  
{  
msg.color = "red"  
}  
else  
{  
msg.color = "green"  
}  
return msg;

...but it doesen´t work, nothing happens ....

Who can help me ? Thank you 🙂

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [10 May 2024 17:29 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/2 "2024-05-10T17:29:57Z")

</div>

You can use `{{msg.payload === "1" ? "red" : "green"}}` in the input field.  
e.g.

```auto
[{"id":"100cd33cf6549c9d","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"str","x":190,"y":4520,"wires":[["fe614182e7e4e3c5"]]},{"id":"6dc91614bdaefc3c","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"str","x":190,"y":4580,"wires":[["fe614182e7e4e3c5"]]},{"id":"fe614182e7e4e3c5","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"4f791fdc1745d3d9","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"{{msg.payload === \"1\" ? \"red\" : \"green\"}}","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":350,"y":4540,"wires":[[]]},{"id":"4f791fdc1745d3d9","type":"ui_group","name":"micro","tab":"c954274bbed7292e","order":1,"disp":false,"width":"18","collapse":false,"className":""},{"id":"c954274bbed7292e","type":"ui_tab","name":"Solar","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_10 May 2024 18_24_18 BST](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf57209e2170be4667d05818c753caa1f79ed612.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 May 2024 17:41 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/3 "2024-05-10T17:41:36Z")

</div>

hi @ak68 , welcome to the forum.

I assume you are using node-red-dashboard, AKA Dashboard 1 rather than @flowfuse/node-red-dashboard AKA Dashboard 2?

> [@ak68](#):
>
> change the colours, depending on the payload (number)

Is the payload a number or a string?

> [@ak68](#):
>
> if (msg.payload === "1")

Because this tests if it is the string "1" _not_ the number 1

You can use a debug node to test which it is and maybe share the output with us.

Another debug node to show what value msg.color has coming out of your function node would be useful too.

> [@ak68](#):
>
> I set {{msg.color}} for background at node-settings

According to the button node documentation, you can set the background colour with {{color}} not {{msg.color}}  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbef85ee22b2c93d005e621b6639edf9c8eb6eea.png)

Is this what you have?

Edit - I like @E1cid's little snippet, but you still need to be sure if the payload is a string or a number.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [10 May 2024 17:59 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/4 "2024-05-10T17:59:14Z")

</div>

> [@jbudd](#):
>
> I like @E1cid's little snippet, but you still need to be sure if the payload is a string or a number.

Unless you use `==` instead.  
`{{msg.payload == "1" ? "red" : "green"}}`

---

<div class="post-metadata">

**Author:** ![ak68](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@ak68](https://discourse.nodered.org/u/ak68)\
**Post date:** [11 May 2024 05:34 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/5 "2024-05-11T05:34:57Z")

</div>

Thank you very much,  
it seems to be a number and works now on this way:

{{msg.payload === 1 ? "red" : "green"}}

---

<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:** [10 June 2024 05:35 UTC](https://discourse.nodered.org/t/help-with-button-node/87867/6 "2024-06-10T05:35:01Z")

</div>

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