# Msg.color stop updating Ui Template after 4.0.2 upgrade

**URL:** <https://discourse.nodered.org/t/msg-color-stop-updating-ui-template-after-4-0-2-upgrade/90113>\
**Category:** Dashboard\
**Created:** [11 August 2024 18:23 UTC](https://discourse.nodered.org/t/msg-color-stop-updating-ui-template-after-4-0-2-upgrade/90113 "2024-08-11T18:23:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [11 August 2024 18:23 UTC](https://discourse.nodered.org/t/msg-color-stop-updating-ui-template-after-4-0-2-upgrade/90113/1 "2024-08-11T18:23:50Z")

</div>

I wrote a flow on Node-RED 3.1.6 and in the flow I use iconify icons. To set the color I send color: '#00afff' to the Ui template. After upgrading to 4.0.2 msg.color does not update the icon. I can manually type in the code and the color changes.

If you inject the msg in to the Ui template  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e60f81ac018a0ec7e68617e520fef16f86c1ece.png)

it shows as

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/3261f7bb60b6c79f9574798440204ca1562f3c44.png)

Please see code below. The css for .rounded is not in the code but does not affect what I am trying to show for the issue.

```auto
[{"id":"b62c0ece7b685e1b","type":"ui_template","z":"48a885b4dd2efb86","g":"3290b1603c3ac396","group":"b914eca7a788b208","name":"Antenna","order":10,"width":"4","height":"1","format":"<script src=\"https://code.iconify.design/2/2.0.3/iconify.min.js\"></script>\n\n<fieldset class=\"filled touched smallfont {{msg.style}}\">\n <legend style=\"text-align: center\"> \n <span class=\"iconify\" style=\"color:{{msg.color}}; height:24px ; width:24px;\" data-icon=\"iconoir:antenna\"></span>\n </legend>\n <div class=\"mediumfont\" ; style=\"text-align: center\">\n {{msg.payload}}\n </div>\n</fieldset>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":780,"y":400,"wires":[["82d9b61f0456c567"]]},{"id":"71c60857da77a49a","type":"inject","z":"48a885b4dd2efb86","name":"","props":[{"p":"payload"},{"p":"color","v":"#00afff","vt":"str"},{"p":"style","v":"rounded","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"80 M Dipole","payloadType":"str","x":350,"y":620,"wires":[["b62c0ece7b685e1b"]]},{"id":"b914eca7a788b208","type":"ui_group","name":"Radios","tab":"d8a12855.a756b8","order":1,"disp":false,"width":"4","collapse":false,"className":""},{"id":"d8a12855.a756b8","type":"ui_tab","name":"Station","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)\
**Post date:** [11 August 2024 21:16 UTC](https://discourse.nodered.org/t/msg-color-stop-updating-ui-template-after-4-0-2-upgrade/90113/2 "2024-08-11T21:16:06Z")

</div>

I figured out how to do get it to work. I suspect the way I had done was not a 'best' practice. I had to add a jquery scope watch to get the msg to update the css. Here is the code:

```auto
<script>
  scope.$watch('msg', function(msg) {
$("#color").css("color",(msg.color));
;
});
</script

```

---

<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:** [25 August 2024 21:16 UTC](https://discourse.nodered.org/t/msg-color-stop-updating-ui-template-after-4-0-2-upgrade/90113/3 "2024-08-25T21:16:39Z")

</div>

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