Sending and receiving messages to/from javascript in Dashboard Template node

README.md

This is a simple flow demonstrating how to send messages to javascript in a Dashboard Template node and how to send messages back to the flow from javascript. In addition it shows how to send a message to node-red when the view is opened in a browser, which is useful for preloading data into the view when it is first opened.

As is shown in the flow exactly the same code can be used in two templates, each picking up messages from node-red and sending responses back.

flow.json

[
    {
        "id": "a3ad21bb.8e08a8",
        "type": "ui_template",
        "z": "ef05418d.df1618",
        "group": "ada4e0c8.ca2d58",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<h3>Testing template</h3>\n<p>{{msg.payload}}</p>\n<script>\n(function() {\n    var count = 0\n    function testit(msg,scope) {\n        count = count+1;\n        console.log(\"In testit \" + msg.payload + \"  count = \" + count);\n        scope.send({payload: \"from testit \" + msg.payload + \"  count = \" + count});\n    }\n    \n    (function(scope) {\n        scope.send({payload: \"preload\"});   // this gets sent when the view is opened in the browser\n        scope.$watch('msg', function(msg) {\n            if (msg) {\n                testit(msg, scope);\n            }\n        });\n    })(scope);\n})();\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "x": 353.5,
        "y": 145,
        "wires": [
            [
                "89d9b60a.9b44e8"
            ]
        ]
    },
    {
        "id": "9d387518.22ba48",
        "type": "inject",
        "z": "ef05418d.df1618",
        "name": "",
        "topic": "",
        "payload": "One",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 136.5,
        "y": 145,
        "wires": [
            [
                "a3ad21bb.8e08a8"
            ]
        ]
    },
    {
        "id": "88c9b5ce.ba0f08",
        "type": "ui_template",
        "z": "ef05418d.df1618",
        "group": "ada4e0c8.ca2d58",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<h3>Testing template</h3>\n<p>{{msg.payload}}</p>\n<script>\n(function() {\n    var count = 0\n    function testit(msg,scope) {\n        count = count+1;\n        console.log(\"In testit \" + msg.payload + \"  count = \" + count);\n        scope.send({payload: \"from testit \" + msg.payload + \"  count = \" + count});\n    }\n    \n    (function(scope) {\n        scope.send({payload: \"preload\"});   // this gets sent when the view is opened in the browser\n        scope.$watch('msg', function(msg) {\n            if (msg) {\n                testit(msg, scope);\n            }\n        });\n    })(scope);\n})();\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "x": 354,
        "y": 257,
        "wires": [
            [
                "aece47ab.d4951"
            ]
        ]
    },
    {
        "id": "3f711b15.d883c4",
        "type": "inject",
        "z": "ef05418d.df1618",
        "name": "",
        "topic": "",
        "payload": "Two",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "x": 135,
        "y": 258,
        "wires": [
            [
                "88c9b5ce.ba0f08"
            ]
        ]
    },
    {
        "id": "89d9b60a.9b44e8",
        "type": "debug",
        "z": "ef05418d.df1618",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 562.5,
        "y": 145,
        "wires": []
    },
    {
        "id": "aece47ab.d4951",
        "type": "debug",
        "z": "ef05418d.df1618",
        "name": "",
        "active": true,
        "console": "false",
        "complete": "false",
        "x": 566.5,
        "y": 257,
        "wires": []
    },
    {
        "id": "ada4e0c8.ca2d58",
        "type": "ui_group",
        "z": "ef05418d.df1618",
        "name": "Default",
        "tab": "e4c8df5a.bc9048",
        "disp": true,
        "width": "6"
    },
    {
        "id": "e4c8df5a.bc9048",
        "type": "ui_tab",
        "z": "ef05418d.df1618",
        "name": "tab2",
        "icon": "dashboard"
    }
]