UI template node and msg.template

[Thorsten von Eicken]

Is there an example somewhere that shows a blank UI template node that is filled using a message with msg.template set? I can sort of get it to work in that when I cause the message with msg.template to be sent to the UI template node it does the right thing, but if I then open a new browser tab with the UI dashboard the template node in that browser tab doesn't have the template set...

[Camille Boissel]

Hi,

You need to inject the value at start.

Here an example with a simple flow:

[

    {

        "id": "85efffdc.4b103",

        "type": "tab",

        "label": "Flow 1"

    },

    {

        "id": "837de134.cda2d",

        "type": "ui_template",

        "z": "85efffdc.4b103",

        "group": "316d2e20.977372",

        "name": "",

        "order": 0,

        "width": 0,

        "height": 0,

        "format": "<div ng-bind-html=\"msg.payload\"></div>",

        "storeOutMessages": true,

        "fwdInMessages": true,

        "templateScope": "local",

        "x": 540,

        "y": 100,

        "wires": [

            []

        ]

    },

    {

        "id": "c1094e82.72368",

        "type": "debug",

        "z": "85efffdc.4b103",

        "name": "",

        "active": true,

        "console": "false",

        "complete": "true",

        "x": 530,

        "y": 60,

        "wires": []

    },

    {

        "id": "d3048f3b.84309",

        "type": "change",

        "z": "85efffdc.4b103",

        "name": "",

        "rules": [

            {

                "t": "set",

                "p": "template",

                "pt": "msg",

                "to": "Hello World!",

                "tot": "str"

            }

        ],

        "action": "",

        "property": "",

        "from": "",

        "to": "",

        "reg": false,

        "x": 350,

        "y": 100,

        "wires": [

            [

                "c1094e82.72368",

                "837de134.cda2d"

            ]

        ]

    },

    {

        "id": "7ddd2a9c.3e6624",

        "type": "inject",

        "z": "85efffdc.4b103",

        "name": "",

        "topic": "",

        "payload": "",

        "payloadType": "date",

        "repeat": "",

        "crontab": "",

        "once": true,

        "x": 150,

        "y": 100,

        "wires": [

            [

                "d3048f3b.84309"

            ]

        ]

    },

    {

        "id": "316d2e20.977372",

        "type": "ui_group",

        "z": "",

        "name": "Default",

        "tab": "8cc5dd23.8e607",

        "disp": true,

        "width": "6"

    },

    {

        "id": "8cc5dd23.8e607",

        "type": "ui_tab",

        "z": "",

        "name": "Home",

        "icon": "dashboard"

    }

]

Tell me if that solved your problem.

[Thorsten von Eicken]

Thanks for the sample, that indeed works as expected. In the template I create I have a <script> tag and am loading dygraphs using that. When I refresh the browser the card contents ends up empty, so something else must be going on. I even added a <div>Hello world</div> and that shows fine until a browser refresh and then it's gone too. Not sure what is going on yet...

[Thorsten von Eicken]

Here's a simple flow that reproduces my issue. When you initially deploy the flow you will see "Hello, the msg is" followed by a second div with the msg contents. Then click on the "ping" node a few times and the msg contents will update and show the full json of the msg. Now reload the browser window and the "Hello, the msg is" div is gone as is the <script> tag. If you hit the "ping" node the behavior is very different because only the div that binds the msg remains.

[

    {

        "id": "3d11a301.bef2cc",

        "type": "ui_template",

        "z": "844eafe9.3e3",

        "group": "f110f346.6c1d3",

        "name": "",

        "order": 0,

        "width": "6",

        "height": "5",

        "format": "<div ng-bind-html=\"msg.payload\"></div>",

        "storeOutMessages": true,

        "fwdInMessages": true,

        "templateScope": "local",

        "x": 600,

        "y": 160,

        "wires": [

            []

        ]

    },

    {

        "id": "272f4cd4.940764",

        "type": "debug",

        "z": "844eafe9.3e3",

        "name": "",

        "active": true,

        "console": "false",

        "complete": "true",

        "x": 590,

        "y": 100,

        "wires": []

    },

    {

        "id": "64ec2576.2c913c",

        "type": "inject",

        "z": "844eafe9.3e3",

        "name": "initialize",

        "topic": "",

        "payload": "",

        "payloadType": "date",

        "repeat": "",

        "crontab": "",

        "once": true,

        "x": 140,

        "y": 100,

        "wires": [

            [

                "5713a1f.278a96"

            ]

        ]

    },

    {

        "id": "f578ef68.a185c",

        "type": "inject",

        "z": "844eafe9.3e3",

        "name": "ping",

        "topic": "",

        "payload": "",

        "payloadType": "date",

        "repeat": "",

        "crontab": "",

        "once": false,

        "x": 130,

        "y": 160,

        "wires": [

            [

                "3d11a301.bef2cc",

                "272f4cd4.940764"

            ]

        ]

    },

    {

        "id": "5713a1f.278a96",

        "type": "function",

        "z": "844eafe9.3e3",

        "name": "set msg.template",

        "func": "return { template:\n'<div>Hello, the msg is:</div>'+\n'<div>{{msg}}</div>'+\n'<script> (function(scope) {'+\n'    scope.$watch(\"msg\", function(msg) {'+\n'         msg.payload = \"I got: \" + msg.payload;'+\n'    })})(scope)'+\n'</script>'\n};\n",

        "outputs": 1,

        "noerr": 0,

        "x": 350,

        "y": 100,

        "wires": [

            [

                "272f4cd4.940764",

                "3d11a301.bef2cc"

            ]

        ]

    },

    {

        "id": "f110f346.6c1d3",

        "type": "ui_group",

        "z": "",

        "name": "Default",

        "tab": "b1f352ad.5f4f1",

        "disp": true,

        "width": "6"

    },

    {

        "id": "b1f352ad.5f4f1",

        "type": "ui_tab",

        "z": "",

        "name": "Home",

        "icon": "dashboard"

    }

]

On Monday, August 7, 2017 at 6:54:13 AM UTC-7, Camille Boissel wrote:

[Camille Boissel]

Hmm, ok I see.

When you reload the browser, it keeps the last ping injected, but does not keep in memory the template injected at first (it uses the template inside the ui-template editor, that why you only saw the timestamp).

[Camille Boissel]

FYI, I've made a PR to fix that problem:

https://github.com/node-red/node-red-dashboard/pull/266

[Thorsten von Eicken]

Oooh! Very nice! Thank you!