# Change Button Colour in a Function

**URL:** <https://discourse.nodered.org/t/change-button-colour-in-a-function/19836>\
**Category:** General\
**Created:** [2 January 2020 19:19 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836 "2020-01-02T19:19:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mario](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Mario](https://discourse.nodered.org/u/Mario)\
**Post date:** [2 January 2020 19:19 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/1 "2020-01-02T19:19:58Z")

</div>

Hello, I have a function in which the status of an output is displayed. Now I want to change the color of the button depending on the status. For example, if the output is open, color red, if it is closed, it is green. In between, it should show yellow. Only I can't do it. If I connect the function and the button, it is constantly polled and the output changes constantly.

Function:

```auto
m = msg.payload;
t = msg.topic;

if (m =='0')
{
    return {topic:t, payload:"Tor ist zu"};
}
else if (m =='1')
{
    return {topic:t, payload:"Tor ist auf"};
}
else
{
    return {topic:t, payload:"Tor fährt"};
}
return msg;

```

 ![Button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4b9003545133c3fde6d3ab665c179491430ed5be.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [3 January 2020 10:25 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/2 "2020-01-03T10:25:35Z")

</div>

What output do you see when you connect a debug node (output: complete msg object) to the "Status Tor" node ?

---

<div class="post-metadata">

**Author:** ![Mario](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Mario](https://discourse.nodered.org/u/Mario)\
**Post date:** [3 January 2020 14:04 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/3 "2020-01-03T14:04:48Z")

</div>

There is a 0 or 1, see the Code from the Function.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [3 January 2020 14:52 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/4 "2020-01-03T14:52:09Z")

</div>

Yes ? Is it a `1` or a `"1"` ?

---

<div class="post-metadata">

**Author:** ![Mario](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Mario](https://discourse.nodered.org/u/Mario)\
**Post date:** [3 January 2020 17:06 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/5 "2020-01-03T17:06:54Z")

</div>

![Payload](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/61146563ce6c8d0950320154014ffabaef7854d2.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [3 January 2020 18:31 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/6 "2020-01-03T18:31:06Z")

</div>

So you receive an array, and the array contains a number.

```auto
m = msg.payload[0]

if (m === 0) {
    msg.payload = "Tor ist zu"
} else if (m === 1) {
    msg.payload = "Tor ist auf"
} else {
    msg.payload = "Tor fährt"
}
return msg

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 January 2020 21:41 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/7 "2020-01-03T21:41:28Z")

</div>

To change the colors perhaps take a look here

> <https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md>

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [3 January 2020 22:01 UTC](https://discourse.nodered.org/t/change-button-colour-in-a-function/19836/8 "2020-01-03T22:01:52Z")

</div>

Have a look at this flow and see if it of any help.

```auto
[{"id":"11b5c675.c3f1ba","type":"function","z":"df652827.d02c3","name":"Push Button","func":"var state = context.get(\"STATE\")||0;\n\n// Look for a !X message to get values.\nif (msg.payload != \"X\") //Do this if the message is NOT \"X\"\n{\n //\n // Background colours first.\n //\n context.set(\"ABGC\", msg.colourA);\n context.set(\"BBGC\", msg.colourB);\n //\n // Now do text.\n //\n context.set(\"Atxt\", msg.txtA);\n context.set(\"Btxt\", msg.txtB);\n //\n // Font colours.\n //\n context.set(\"AFC\",msg.txtclrA);\n context.set(\"BFC\",msg.txtclrB);\n //\n // Payloads.\n //\n context.set(\"PayloadA\", msg.payloadA);\n context.set(\"PayloadB\", msg.payloadB);\n //\n // Topic.\n //\n if (msg.topicSET !== null)\n {\n context.set(\"Topic\",msg.topicSET);\n } else\n {\n context.set(\"Topic\",\"~\");\n }\n return;\n}\n// Now on to the real stuff.\nif (msg.payload == \"X\")\n{\n state = (state + 1)% 2;\n //node.warn(state);\n context.set(\"STATE\",state);\n}\nif (state === 0)\n{\n // Condition A\n msg.payload = context.get(\"PayloadA\");\n msg.colour = context.get(\"ABGC\");\n msg.txt = context.get(\"Atxt\");\n msg.fontclr = context.get(\"AFC\");\n} else\n{\n // Condition B\n msg.payload = context.get(\"PayloadB\");\n msg.colour = context.get(\"BBGC\");\n msg.txt = context.get(\"Btxt\");\n msg.fontclr = context.get(\"BFC\");\n}\nif (context.get(\"Topic\") == \"~\")\n{\n msg.topic = \"\";\n} else\n{\n msg.topic = context.get(\"Topic\");\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":540,"y":300,"wires":[["3c7dc256.8e3e46"]]},{"id":"3c7dc256.8e3e46","type":"ui_button","z":"df652827.d02c3","name":"RBE Button","group":"396240c9.2d409","order":5,"width":"1","height":"1","passthru":false,"label":"{{msg.txt}}","tooltip":"","color":"{{msg.fontclr}}","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":540,"y":250,"wires":[["11b5c675.c3f1ba"]]},{"id":"839b0fab.0972e8","type":"inject","z":"df652827.d02c3","name":"Setup","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"3","x":520,"y":160,"wires":[["c3514fad.809d8"]]},{"id":"80d7b072.b72b88","type":"comment","z":"df652827.d02c3","name":"Push Button Flow","info":"This has two states:\nA and B.\nAll future refrence is to these two state names.\n\nREQUIRED:\nInputs:\nButton background colour for state A. msg.colurA\nButton background colour for state B. msg.colourB\nButton text for state A. msg.txtA\nButton text for state B. msg.txtB\nFont colour for state A. msg.txtclrA\nFont colour for state B. msg.txtclrB\nPayload for state A. msg.payloadA\nPayload for state B. msg.payloadB\nTopic. msg.topicSET\n\nOutputs:\nmsg.payload - this is used to control what ever you need.\nmsg.topic - this is if it is needed for control of the next node.\nmsg.colour - this sets the colour of the button.\nmsg.txt - this is the text to be displayed in the button.\nmsg.fontclr - this is the colour of the text on the button.\n","x":520,"y":110,"wires":[]},{"id":"c3514fad.809d8","type":"function","z":"df652827.d02c3","name":"Setup","func":"msg = {\n \"colourA\": \"yellow\",\n \"colourB\": \"blue\",\n \"txtA\": \"SOM\",\n \"txtB\": \"SOM-EOM\",\n \"txtclrA\": \"black\",\n \"txtclrB\": \"white\",\n \"payloadA\": \"GO\",\n \"payloadB\": \"STOP\",\n \"topicSET\": \"CONTROL\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":210,"wires":[["11b5c675.c3f1ba"]]},{"id":"396240c9.2d409","type":"ui_group","z":"","name":"WAP","tab":"d54cd82e.537658","order":3,"disp":true,"width":"4","collapse":false},{"id":"d54cd82e.537658","type":"ui_tab","z":"","name":"Logging","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```