With this flow it is possible to trigger a dashboard ui_template to open external links within the actual or a new window/tab using a dashboard button. With a little modification it is also possible to inject a URL directly as a string into a ui_template node for opening.
It is based on this article:
https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a
| [{"id":"7db57965.76d468","type":"ui_button","z":"63cf87a7.f8f618","name":"","group":"ca2272c3.e8396","order":1,"width":"4","height":"1","passthru":false,"label":"Node-RED","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Node-RED","payloadType":"str","topic":"","x":190,"y":120,"wires":[["ece06122.7e762"]]},{"id":"5e1f0081.6dc3c","type":"ui_template","z":"63cf87a7.f8f618","group":"ca2272c3.e8396","name":"window redirect","order":3,"width":0,"height":0,"format":"<script>\n(function(scope) {\n scope.$watch('msg.payload', function(data) {\n if (data == \"Node-RED\") {\n //window.open(\"https://www.nodered.org\");\n window.location.href = \"https://www.nodered.org\";\n } \n if (data == \"GitHub\") {\n //window.open(\"https://github.com/node-red\");\n window.location.href = \"https://github.com/node-red\";\n } \n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":560,"y":140,"wires":[["8582289.2d757d8"]]},{"id":"23caf401.9d6d4c","type":"ui_button","z":"63cf87a7.f8f618","name":"","group":"ca2272c3.e8396","order":2,"width":"4","height":"1","passthru":false,"label":"GitHub","tooltip":"","color":"","bgcolor":"","icon":"","payload":"GitHub","payloadType":"str","topic":"","x":180,"y":160,"wires":[["ece06122.7e762"]]},{"id":"ece06122.7e762","type":"trigger","z":"63cf87a7.f8f618","name":"reset msg","op1":"","op2":"empty","op1type":"pay","op2type":"str","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":380,"y":140,"wires":[["5e1f0081.6dc3c"]]},{"id":"8582289.2d757d8","type":"debug","z":"63cf87a7.f8f618","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":140,"wires":[]},{"id":"ca2272c3.e8396","type":"ui_group","name":"Group 1","tab":"d9bf7560.df5e58","order":1,"disp":true,"width":6},{"id":"d9bf7560.df5e58","type":"ui_tab","name":"Test","icon":"dashboard","order":9,"disabled":false,"hidden":false}] |
Use the disabled "window.open"-lines instead of "window.location.href" - lines inside the template script by changing the comment marks.
Can you use the msg.payload in the href request?
Thanks
fdnic99 or anyone,
How do I use your flow to open up a new browser window, not just another tab?
Thanks,
Dave
Found out how to do it. See attached flow.
[{"id":"a464dd85.a9375","type":"tab","label":"Test","disabled":false,"info":""},{"id":"4ff23540.b4884c","type":"ui_button","z":"a464dd85.a9375","name":"","group":"31d512bd.2bd80e","order":14,"width":"6","height":"1","passthru":false,"label":"USA Weater Radar","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"Map1","topicType":"str","x":210,"y":300,"wires":[["83b27700.d05518"]]},{"id":"96b9bb10.fdf5c8","type":"ui_template","z":"a464dd85.a9375","group":"31d512bd.2bd80e","name":"window redirect","order":5,"width":0,"height":0,"format":"<script>\n(function(scope) {\n scope.$watch('msg.payload', function(data) {\n \n if (data.map == \"MAP1\") {\n window.open((\"https://radar.weather.gov\"), \"new\", \"popup\");\n } \n if (data.map == \"MAP2\") { \n window.open((\"https://map.blitzortung.org/#6/\"+ data.lat +\"/\"+ data.long ), \"new\", \"popup\");\n\n } \n });\n})(scope);\n</script>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":320,"wires":[["15d839a3.683466"]]},{"id":"5885cb04.43cdd4","type":"ui_button","z":"a464dd85.a9375","name":"","group":"31d512bd.2bd80e","order":15,"width":"6","height":"1","passthru":false,"label":"USA Lightning Map","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"Map2","topicType":"str","x":210,"y":340,"wires":[["83b27700.d05518"]]},{"id":"9c6296a5.20a0d8","type":"trigger","z":"a464dd85.a9375","name":"reset msg","op1":"","op2":"empty","op1type":"pay","op2type":"str","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":600,"y":320,"wires":[["96b9bb10.fdf5c8"]]},{"id":"15d839a3.683466","type":"debug","z":"a464dd85.a9375","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":970,"y":320,"wires":[]},{"id":"d3c31cb5.202bb","type":"inject","z":"a464dd85.a9375","name":"Manual Latitude Input (30)","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"30","payloadType":"num","x":240,"y":140,"wires":[["7c889f75.ab2a1"]]},{"id":"7c889f75.ab2a1","type":"change","z":"a464dd85.a9375","name":"","rules":[{"t":"set","p":"Station_Lat","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":140,"wires":[[]]},{"id":"1e7a3763.454bf9","type":"change","z":"a464dd85.a9375","name":"","rules":[{"t":"set","p":"Station_Lng","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":200,"wires":[[]]},{"id":"b3153fa4.1c385","type":"inject","z":"a464dd85.a9375","name":"Manual Longitude Input (-90)","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"-90","payloadType":"num","x":240,"y":200,"wires":[["1e7a3763.454bf9"]]},{"id":"cb7eaacc.586a78","type":"comment","z":"a464dd85.a9375","name":"Manual inputs to lat/lng","info":"In my main program this is controlled by a users input page","x":370,"y":80,"wires":[]},{"id":"83b27700.d05518","type":"function","z":"a464dd85.a9375","name":"function 84","func":"\nvar lat = global.get(\"Station_Lat\");\nvar lng = global.get(\"Station_Lng\");\n\nif (msg.topic == \"Map1\") {\n msg.payload={\"map\":\"MAP1\",\"lat\":lat,\"long\":lng};\n}\nif (msg.topic== \"Map2\") \n{\n msg.payload = { \"map\":\"MAP2\",\"lat\": lat, \"long\": lng };\n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":320,"wires":[["9c6296a5.20a0d8"]]},{"id":"31d512bd.2bd80e","type":"ui_group","name":"Links","tab":"d9bf7560.df5e58","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"d9bf7560.df5e58","type":"ui_tab","name":"Test","icon":"dashboard","order":9,"disabled":false,"hidden":false}]
link opens in same tab, how can i open link in new tab or new window?
nice greetings