3rd-party widget with UI-Template randomly works

[thejollypop]

Description

Hi Team:)

Description:

I'm experiencing an issue with refreshing a page to display a 3rd-party widget. When I send a blank tab name ("") and an empty object ({"page":""}) to refresh the current page, nothing happens. I would expect the page to refresh to its current state, but it remains unchanged. Only If I fully (re)deploy the flow, the page refreshes as expected, and the 3rd party Apex charts are displayed. Is this a bug, or my misunderstanding? 10x!

My Flow:

[{"id":"66f2815f45de315a","type":"tab","label":"ApexCharts","disabled":false,"info":""},{"id":"66acd09844d1bc9f","type":"group","z":"66f2815f45de315a","name":"Apex Charts - Working -> FULL DEPLOY ONLY","style":{"fill":"#ffdf7f","label":true,"color":"#000000"},"nodes":["18d577dff2801366","19148e6cd030b507"],"x":174,"y":199,"w":304,"h":82},{"id":"b1f59cf9fea4b5bd","type":"group","z":"66f2815f45de315a","name":"Refresh - Currently Not Working","style":{"fill":"#bfc7d7","label":true,"color":"#000000"},"nodes":["051f6d9d5bb2493b","4c2965a88de29713","be1a08ccad4982be","a6851c8fd6641b76","822b415edcf6d177","edce923a801cac5c","6f417ba48d4920e5","5ffce296a4ea16d3"],"x":174,"y":19,"w":452,"h":162},{"id":"051f6d9d5bb2493b","type":"debug","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":565,"y":100,"wires":[],"l":false},{"id":"4c2965a88de29713","type":"ui-button","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","group":"803f59c7dbd916ed","name":"","label":"button","order":1,"width":0,"height":0,"passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":470,"y":60,"wires":[[]]},{"id":"f17104bfbd8a5e4d","type":"debug","z":"66f2815f45de315a","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":400,"y":320,"wires":[]},{"id":"18d577dff2801366","type":"ui-template","z":"66f2815f45de315a","g":"66acd09844d1bc9f","group":"803f59c7dbd916ed","dashboard":"","page":"3e4bc06a71ec37d0","name":"Apex","order":0,"width":0,"height":0,"head":"","format":"<template>\n\n <div id=\"chart\">\n <div id=\"apex-chart\"></div>\n </div>\n\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n<script>\n function init () {\n alert('Babylon.js is loaded')\n}\n\n// run this code when the widget is built\nlet interval = setInterval(() => {\n if (window.BABYLON) {\n // call an init() to use BABYLON\n init();\n // Babylon.js is loaded, so we can now use it\n clearInterval(interval);\n }\n}, 100);\n</script>\n\n\n<script>\n var options = {\nseries: [{\ndata: [144, 55, 41, 64, 22, 43, 21]\n}, {\ndata: [253, 32, 33, 52, 13, 44, 32]\n}],\nchart: {\ntype: 'bar',\nheight: 430\n},\nplotOptions: {\nbar: {\nhorizontal: true,\ndataLabels: {\nposition: 'top',\n},\n}\n},\ndataLabels: {\nenabled: true,\noffsetX: -6,\nstyle: {\nfontSize: '12px',\ncolors: ['#fff']\n}\n},\nstroke: {\nshow: true,\nwidth: 1,\ncolors: ['#fff']\n},\ntooltip: {\nshared: true,\nintersect: false\n},\nxaxis: {\ncategories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],\n},\n};\n\nvar chart = new ApexCharts(document.querySelector(\"#chart\"), options);\nchart.render();\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":250,"y":240,"wires":[["19148e6cd030b507"]]},{"id":"19148e6cd030b507","type":"ui-template","z":"66f2815f45de315a","g":"66acd09844d1bc9f","group":"803f59c7dbd916ed","dashboard":"","page":"3e4bc06a71ec37d0","name":"Dummy","order":2,"width":0,"height":0,"head":"","format":"<template>\n\n<div id=\"chart\">\n <div id=\"apex-chart\"></div>\n</div>\n\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n\n\n\n \n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":240,"wires":[[]]},{"id":"89b15f8d32ffd963","type":"ui-event","z":"66f2815f45de315a","ui":"8f17c3ae8365e5e2","name":"","x":240,"y":320,"wires":[["f17104bfbd8a5e4d"]]},{"id":"be1a08ccad4982be","type":"inject","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"page\":\"\"}","payloadType":"json","x":280,"y":100,"wires":[["a6851c8fd6641b76"]]},{"id":"a6851c8fd6641b76","type":"ui-control","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"","ui":"8f17c3ae8365e5e2","events":"all","x":480,"y":100,"wires":[["051f6d9d5bb2493b"]]},{"id":"d2d8b1563dc5e415","type":"inject","z":"66f2815f45de315a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":130,"y":640,"wires":[["d55dfe4d492c3d32"]]},{"id":"d55dfe4d492c3d32","type":"ui-template","z":"66f2815f45de315a","group":"ccc65df00716e4e8","dashboard":"","page":"3e4bc06a71ec37d0","name":"Apex","order":0,"width":0,"height":0,"head":"","format":"<template>\n\n <div id=\"chart\">\n <div id=\"apex-chart\"></div>\n </div>\n\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n<script>\n function init () {\n alert('Babylon.js is loaded')\n}\n\n// run this code when the widget is built\nlet interval = setInterval(() => {\n if (window.BABYLON) {\n // call an init() to use BABYLON\n init();\n // Babylon.js is loaded, so we can now use it\n clearInterval(interval);\n }\n}, 100);\n</script>\n\n\n<script>\n var options = {\nseries: [{\ndata: [144, 55, 41, 64, 22, 43, 21]\n}, {\ndata: [253, 32, 33, 52, 13, 44, 32]\n}],\nchart: {\ntype: 'bar',\nheight: 430\n},\nplotOptions: {\nbar: {\nhorizontal: true,\ndataLabels: {\nposition: 'top',\n},\n}\n},\ndataLabels: {\nenabled: true,\noffsetX: -6,\nstyle: {\nfontSize: '12px',\ncolors: ['#fff']\n}\n},\nstroke: {\nshow: true,\nwidth: 1,\ncolors: ['#fff']\n},\ntooltip: {\nshared: true,\nintersect: false\n},\nxaxis: {\ncategories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],\n},\n};\n\nvar chart = new ApexCharts(document.querySelector(\"#chart\"), options);\nchart.render();\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":310,"y":640,"wires":[["f26fe2f12812ac69"]]},{"id":"f26fe2f12812ac69","type":"ui-template","z":"66f2815f45de315a","group":"ccc65df00716e4e8","dashboard":"","page":"3e4bc06a71ec37d0","name":"Dummy","order":2,"width":0,"height":0,"head":"","format":"<template>\n\n<div id=\"chart\">\n <div id=\"apex-chart\"></div>\n</div>\n\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n\n\n\n \n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":640,"wires":[["217ccc9496443bb4"]]},{"id":"217ccc9496443bb4","type":"debug","z":"66f2815f45de315a","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":600,"y":680,"wires":[]},{"id":"822b415edcf6d177","type":"inject","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"true","payloadType":"bool","x":290,"y":140,"wires":[["5ffce296a4ea16d3"]]},{"id":"edce923a801cac5c","type":"function","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"function 3","func":"msg.payload = {\n pages: {\n \n hide: ['A']\n },\n groups: {\n \n hide: ['G2']\n }\n}","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":385,"y":60,"wires":[["a6851c8fd6641b76"]],"l":false},{"id":"6f417ba48d4920e5","type":"inject","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":290,"y":60,"wires":[["edce923a801cac5c"]]},{"id":"5ffce296a4ea16d3","type":"function","z":"66f2815f45de315a","g":"b1f59cf9fea4b5bd","name":"show","func":"msg.payload = {\n pages: {\n \n show: ['A']\n },\n groups: {\n \n show: ['G1']\n }\n}\n\n\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":385,"y":140,"wires":[["a6851c8fd6641b76"]],"l":false},{"id":"803f59c7dbd916ed","type":"ui-group","name":"G1","page":"3e4bc06a71ec37d0","width":"6","height":"1","order":-1,"showTitle":true,"className":""},{"id":"3e4bc06a71ec37d0","type":"ui-page","name":"A","ui":"8f17c3ae8365e5e2","path":"/","icon":"home","layout":"grid","theme":"5cb5c22366b1b908","order":-1,"className":""},{"id":"8f17c3ae8365e5e2","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"]},{"id":"ccc65df00716e4e8","type":"ui-group","name":"G2","page":"3e4bc06a71ec37d0","width":"6","height":"1","order":-1,"showTitle":true,"className":""},{"id":"5cb5c22366b1b908","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

Epic/Story

No response

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

[joepavitt]

Nt sure this is an issue with ui-template, but in fact I think it is a duplicate of https://github.com/FlowFuse/node-red-dashboard/issues/462 which I've just fixed. I'll be getting it out in a patch release today or tomorrow. If you can try that out (will be 0.11.2) then let me know if this is still an issue.

I have tested out a refresh being triggered by msg.payload = "" and it does working locally (having fixed #462) on my 0.11.2 development branch

[philosoma]

I think I've got a similar issue. I am using a ui-template to display a still image from a camera using Vuetify. I have a button going to the ui-template to update the image, but it doesn't update. Refreshing the page works. This worked with Dashboard 1. A simple timestamp as text will update however.

[joepavitt]

I think I've got a similar issue. I am using a ui-template to display a still image from a camera using Vuetify. I have a button going to the ui-template to update the image, but it doesn't update. Refreshing the page works. This worked with Dashboard 1. A simple timestamp as text will update however

I do believe this is a different problem. What functionality are you running within ui-template? What payload are you sending to the template?

[colinl]

@thejollypop and @philosoma are you still seeing problems with this or can this issue be closed?

[philosoma]

@thejollypop and @philosoma are you still seeing problems with this or can this issue be closed?

I went a different route so I am unfortunately unable to test if it's still an issue.