I want to change the text color based on a value. But the parameter is ignored, while other dynamic parameters work. Here's my code:
[{"id":"2a5ce2c065447e1e","type":"ui-template","z":"fbda4c5da56247cd","group":"73a5677f40da71fe","page":"","ui":"","name":"climate_table","order":1,"width":"6","height":"3","head":"","format":"<template>\n <table>\n <tr>\n <td>Temperature</td>\n <!-- <td class=\"{{msg.temper_out < 0 ? 'grn' : 'rot'}}\"> {{msg.temper_out}} °C</td> -->\n <td class = \"{{msg.temperature_text_color}}\"> {{msg.temperature}} °C</td>\n <td>{{msg.temperature_description}}</td>\n </tr>\n </table>\n</template>\n\n\n<style>\n body {\n //font-size: 12px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n font-weight: bold;\n }\n\n td,\n th {\n //font-size: 12px;\n }\n\n td {\n padding: 4px;\n text-align: right;\n border: 1px solid #ddd;\n }\n\n .hot {\n color: red;\n }\n\n .norm {\n color: green;\n }\n \n .cold {\n color: blue;\n }\n\n</style>\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":710,"y":400,"wires":[[]]},{"id":"07efd04b7b79a9e5","type":"function","z":"fbda4c5da56247cd","name":"RND temperature","func":"function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n msg.temperature = Math.floor(Math.random() * (max - min)) + min;\n }\ngetRandomInt(-10, 27);\n\nif (msg.temperature > 15) {\n msg.temperature_text_color = 'hot';\n msg.temperature_description = \"Overheat!\"\n} else if (msg.temperature < 0) {\n msg.temperature_text_color = 'cold';\n msg.temperature_description = \"Frozen\"\n} else {\n msg.temperature_text_color = 'norm';\n msg.temperature_description = \"Ok!\"\n}\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":320,"wires":[["26809d8b1a03b50a","2770b6e190dbf478","65fb2677ac39110e","2a5ce2c065447e1e"]]},{"id":"f1c765adacc6f07b","type":"inject","z":"fbda4c5da56247cd","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":310,"y":320,"wires":[["07efd04b7b79a9e5"]]},{"id":"26809d8b1a03b50a","type":"debug","z":"fbda4c5da56247cd","name":"msg.temperature","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"temperature","targetType":"msg","statusVal":"payload","statusType":"auto","x":730,"y":220,"wires":[]},{"id":"2770b6e190dbf478","type":"debug","z":"fbda4c5da56247cd","name":"msg.temperature_description","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"temperature_description","targetType":"msg","statusVal":"payload","statusType":"auto","x":760,"y":280,"wires":[]},{"id":"65fb2677ac39110e","type":"debug","z":"fbda4c5da56247cd","name":"msg.temperature_text_color","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"msg.temperature_text_color","targetType":"msg","statusVal":"payload","statusType":"auto","x":760,"y":340,"wires":[]},{"id":"73a5677f40da71fe","type":"ui-group","name":"climate","page":"a9b32250ebfa989b","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a9b32250ebfa989b","type":"ui-page","name":"climate","ui":"27d73580a0f044ca","path":"/templates","icon":"view-dashboard","layout":"flex","theme":"129e99574def90a3","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"27d73580a0f044ca","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#000000","primary":"#ff4000","bgPage":"#f0f0f0","groupBg":"#ffffff","groupOutline":"#d9d9d9"},"sizes":{"pagePadding":"9px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"6px"}},{"id":"87741e864851cb65","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]
Chrome browser page in Developer Tools mode
I highlighted the
{{msg.temperature_text_color}} parameter in red, it does not pass a variable.But other similar parameters passed variables, I've highlighted them in green.
<template>
<table>
<tr>
<td>Temperature</td>
<td class = "{{msg.temperature_text_color}}"> {{msg.temperature}} °C</td>
<td>{{msg.temperature_description}}</td>
</tr>
</table>
</template>
<style>
body {
//font-size: 12px;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-weight: bold;
}
td,
th {
//font-size: 12px;
}
td {
padding: 4px;
text-align: right;
border: 1px solid #ddd;
}
.hot {
color: red;
}
.norm {
color: green;
}
.cold {
color: blue;
}
</style>
Why isn't this working? How can I fix it correctly in my case?
