How to use flow variable to format a template node

#1

Hello,

I'm trying to change the visual appearance of a template node with a flow.var while displaying the msg.payload. Basically I have three different status for a particulate item on my network. It can be Warning, Degraded, Online and I'm using flow.var to track the status. I would like for the template node to have different colors based on the status. i.e. online = green background | degraded = yellow background | warning = red background . In addition to the status (indicated by formatting), I would like the description to be the text. i.e the text of the template node as shown on the dashboard would be
"out of paper" with a red background | "low paper" with a yellow background | "Online" with a green background.

MY current work around is to have a template node with text to match the payload with another text node that gives the description. I would rather have the description along with the formatting all in the same template nod.

Here's a working example with my work around. node-red-contrib-string loaded in flow

[
    {
        "id": "7d3eaf0c.844da",
        "type": "string",
        "z": "69d20979.37c01",
        "name": "Parse Error",
        "methods": [
            {
                "name": "between",
                "params": [
                    {
                        "type": "str",
                        "value": "Alarm Description : </td><td>"
                    },
                    {
                        "type": "str",
                        "value": "</td>"
                    }
                ]
            }
        ],
        "prop": "payload",
        "propout": "payload",
        "object": "msg",
        "objectout": "msg",
        "x": 434.000057220459,
        "y": 2493.0315589904785,
        "wires": [
            [
                "d6ca305a.25c6b",
                "252e7c87.858f24",
                "52dea50a.3c71cc"
            ]
        ]
    },
    {
        "id": "18641d92.f38df2",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set Degraded",
        "rules": [
            {
                "t": "set",
                "p": "rExitAlert",
                "pt": "flow",
                "to": "Degraded",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "Degraded",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1108.0001544952393,
        "y": 2511.031925201416,
        "wires": [
            [
                "582a514c.bc457",
                "76bc6438.1c970c"
            ]
        ]
    },
    {
        "id": "209b8f1b.5f097",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set Warning",
        "rules": [
            {
                "t": "set",
                "p": "rExitAlert",
                "pt": "flow",
                "to": "Warning",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "Warning",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1096.0000286102295,
        "y": 2465.031615257263,
        "wires": [
            [
                "582a514c.bc457",
                "76bc6438.1c970c"
            ]
        ]
    },
    {
        "id": "cc373f82.3beef",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "if Active",
        "property": "rEntryStatus",
        "propertyType": "flow",
        "rules": [
            {
                "t": "cont",
                "v": "Active",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 929.749906539917,
        "y": 2512.0470008850098,
        "wires": [
            [
                "18641d92.f38df2"
            ]
        ]
    },
    {
        "id": "96ea380a.2706c8",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "if Active",
        "property": "rEntryStatus",
        "propertyType": "flow",
        "rules": [
            {
                "t": "cont",
                "v": "Active",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 931.9999675750732,
        "y": 2466.0308837890625,
        "wires": [
            [
                "209b8f1b.5f097"
            ]
        ]
    },
    {
        "id": "468770d2.f1709",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "if Clear",
        "property": "rEntryStatus",
        "propertyType": "flow",
        "rules": [
            {
                "t": "cont",
                "v": "Clear",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 933.999885559082,
        "y": 2593.0310192108154,
        "wires": [
            [
                "5bbddeb2.d911"
            ]
        ]
    },
    {
        "id": "5bbddeb2.d911",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set Online",
        "rules": [
            {
                "t": "set",
                "p": "rExitAlert",
                "pt": "flow",
                "to": "Online",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "Online",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1095.0000896453857,
        "y": 2592.0311317443848,
        "wires": [
            [
                "4715c350.34342c",
                "582a514c.bc457"
            ]
        ]
    },
    {
        "id": "76bc6438.1c970c",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "get rExitDescription",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "rExitDescription",
                "tot": "flow"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1232.789888381958,
        "y": 2551.0233192443848,
        "wires": [
            [
                "ee81132.d734bf"
            ]
        ]
    },
    {
        "id": "4715c350.34342c",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set clear",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "Online",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1274.789270401001,
        "y": 2591.0237464904785,
        "wires": [
            [
                "ee81132.d734bf"
            ]
        ]
    },
    {
        "id": "4e6def6f.3754",
        "type": "ui_text",
        "z": "69d20979.37c01",
        "group": "85ff8710.052358",
        "order": 10,
        "width": 0,
        "height": 0,
        "name": "Left Exit",
        "label": "",
        "format": "<font size=\"+2\">Left Exit",
        "layout": "col-center",
        "x": 1458.0390586853027,
        "y": 2493.7110023498535,
        "wires": []
    },
    {
        "id": "ee81132.d734bf",
        "type": "ui_text",
        "z": "69d20979.37c01",
        "group": "85ff8710.052358",
        "order": 12,
        "width": 0,
        "height": 0,
        "name": "Left Exit Description",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "col-center",
        "x": 1486.288932800293,
        "y": 2586.0235023498535,
        "wires": []
    },
    {
        "id": "582a514c.bc457",
        "type": "ui_template",
        "z": "69d20979.37c01",
        "group": "85ff8710.052358",
        "name": "Dynamic Status Left Exit",
        "order": 11,
        "width": "0",
        "height": "0",
        "format": "    <div id=\"msg\" ng-bind-html=\"msg.payload\" ng-class=\"{warning: msg.payload == 'Warning', degraded: msg.payload == 'Degraded', online: msg.payload == 'Online'}\"></div>\n\n    <style>\n        #msg * {\n            display:table-cell;\n            }\n        .online {\n            height: 45px;\n            width: 100%;\n            font-size: 24px;\n            color: #000;\n            text-align: center;\n            background-color:  #008000;\n        }\n        .degraded {\n            height: 45px;\n            width: 100%;\n            font-size: 24px;\n            color: #000000;\n            text-align: center;\n            background-color: #FFFF00;        \n        }\n        .warning {\n            height: 45px;\n            width: 100%;\n            font-size: 24px;\n            color: #FFFFFF;\n            text-align: center;\n            background-color: #FF0000;\n        }\n    </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 1505.2891483306885,
        "y": 2542.0238075256348,
        "wires": [
            []
        ]
    },
    {
        "id": "d6ca305a.25c6b",
        "type": "delay",
        "z": "69d20979.37c01",
        "name": "",
        "pauseType": "delay",
        "timeout": "500",
        "timeoutUnits": "milliseconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "x": 490.29672050476074,
        "y": 2538.898380279541,
        "wires": [
            [
                "f4d05f3e.d5dee",
                "bf638d7.fa7837",
                "19eb46e2.a9c8a9"
            ]
        ]
    },
    {
        "id": "252e7c87.858f24",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set rExitDescription",
        "rules": [
            {
                "t": "set",
                "p": "rExitDescription",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 671.000036239624,
        "y": 2457.031446456909,
        "wires": [
            []
        ]
    },
    {
        "id": "d941178.70c68e8",
        "type": "inject",
        "z": "69d20979.37c01",
        "name": "warning active",
        "topic": "",
        "payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Active</td></tr><tr><td>Alarm Description : </td><td>Out of Ticket</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 214.96874809265137,
        "y": 2413.858808517456,
        "wires": [
            [
                "7d3eaf0c.844da",
                "1faf7d0b.302de3"
            ]
        ]
    },
    {
        "id": "d942b1d5.7108d",
        "type": "inject",
        "z": "69d20979.37c01",
        "name": "warning clear",
        "topic": "",
        "payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Clear</td></tr><tr><td>Alarm Description : </td><td>Out of Ticket</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 213.2109432220459,
        "y": 2469.038496017456,
        "wires": [
            [
                "7d3eaf0c.844da",
                "1faf7d0b.302de3"
            ]
        ]
    },
    {
        "id": "40efbeeb.e3ee9",
        "type": "inject",
        "z": "69d20979.37c01",
        "name": "degraded active",
        "topic": "",
        "payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Active</td></tr><tr><td>Alarm Description : </td><td>Tickets Low</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 212.21093559265137,
        "y": 2533.038549423218,
        "wires": [
            [
                "7d3eaf0c.844da",
                "1faf7d0b.302de3"
            ]
        ]
    },
    {
        "id": "aeafd878.e5b868",
        "type": "inject",
        "z": "69d20979.37c01",
        "name": "degraded clear",
        "topic": "",
        "payload": "<html><body><table style=\"width:400px;float:left;\"><tr><td>Alarm Event Time : </td><td>11/7/2018 9:59:00 AM</td></tr><tr><td>Alarm Event Number : </td><td>2069</td></tr><tr><td>Alarm Event Status : </td><td>Clear</td></tr><tr><td>Alarm Description : </td><td>Tickets Low</td></tr><tr><td>Alarm Device Name : </td><td>Right Entry TD</td></tr><tr><td>Engine Name : </td><td>EASTERWOOD-AMIA</td></tr><tr><td>Port Number : </td><td>Network Port</td></tr><tr><td>Site Name : </td><td>Easterwood</td></tr></table></body></html>",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 211,
        "y": 2588.0310401916504,
        "wires": [
            [
                "7d3eaf0c.844da",
                "1faf7d0b.302de3"
            ]
        ]
    },
    {
        "id": "52dea50a.3c71cc",
        "type": "debug",
        "z": "69d20979.37c01",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 662.7890625,
        "y": 2382.0859375,
        "wires": []
    },
    {
        "id": "f4d05f3e.d5dee",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "Tickets Low",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "cont",
                "v": "Tickets Low",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 704.0234336853027,
        "y": 2510.0391273498535,
        "wires": [
            [
                "cc373f82.3beef",
                "468770d2.f1709"
            ]
        ]
    },
    {
        "id": "19eb46e2.a9c8a9",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "Jammed/Full",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "cont",
                "v": "Ticket Jammed or Vault Full",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 708.2734775543213,
        "y": 2608.0157508850098,
        "wires": [
            [
                "96ea380a.2706c8",
                "468770d2.f1709"
            ]
        ]
    },
    {
        "id": "bf638d7.fa7837",
        "type": "switch",
        "z": "69d20979.37c01",
        "name": "Out of Ticket",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "cont",
                "v": "Out of Ticket",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "outputs": 1,
        "x": 707.2734317779541,
        "y": 2559.015567779541,
        "wires": [
            [
                "96ea380a.2706c8",
                "468770d2.f1709"
            ]
        ]
    },
    {
        "id": "1faf7d0b.302de3",
        "type": "string",
        "z": "69d20979.37c01",
        "name": "Parse Status",
        "methods": [
            {
                "name": "between",
                "params": [
                    {
                        "type": "str",
                        "value": "<td>Alarm Event Status : </td><td>"
                    },
                    {
                        "type": "str",
                        "value": "</td>"
                    }
                ]
            }
        ],
        "prop": "payload",
        "propout": "payload",
        "object": "msg",
        "objectout": "msg",
        "x": 448.02344703674316,
        "y": 2588.039249420166,
        "wires": [
            [
                "8659aa59.d81638"
            ]
        ]
    },
    {
        "id": "8659aa59.d81638",
        "type": "change",
        "z": "69d20979.37c01",
        "name": "set rEntryStatus",
        "rules": [
            {
                "t": "set",
                "p": "rEntryStatus",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 462.02327728271484,
        "y": 2653.0394325256348,
        "wires": [
            []
        ]
    },
    {
        "id": "85ff8710.052358",
        "type": "ui_group",
        "z": "",
        "name": "Unsused",
        "tab": "2188bc10.a1f4d4",
        "disp": true,
        "width": "6"
    },
    {
        "id": "2188bc10.a1f4d4",
        "type": "ui_tab",
        "z": "",
        "name": "Unused",
        "icon": "dashboard"
    }
]
0 Likes

#2

The template uses mustache syntax so you can use conditionals... just about...
eg see

0 Likes

#3

Thank you for the speedy reply. I have the code for the template; however, it only formats based on the msg.payload. Can the template pull the flow.rExitAlert (for this example) in order to formate the text? Here's my non-working attempt to do this.

<div id="msg" ng-bind-html="msg.payload" ng-class="{warning: flow.rExitAlert == 'Warning', degraded: flow.rExitAlert == 'Degraded', online: flow.rExitAlert == 'Online'}"></div>

<style>
    #msg * {
        display:table-cell;
        }
    .online {
        height: 45px;
        width: 100%;
        font-size: 24px;
        color: #000;
        text-align: center;
        background-color:  #008000;
    }
    .degraded {
        height: 45px;
        width: 100%;
        font-size: 24px;
        color: #000000;
        text-align: center;
        background-color: #FFFF00;        
    }
    .warning {
        height: 45px;
        width: 100%;
        font-size: 24px;
        color: #FFFFFF;
        text-align: center;
        background-color: #FF0000;
    }
</style>
0 Likes