Hello guys,
what is the easiest way to redirect a dashboard button click to grafana dashboard ( external url link), or do you believe it will looks better to use some iframe into template node to embedded the external web page like a grafana in node red dashboard? .
I have been looking around but all that I found is using the template node I meant for the simplest one using dashboard button to open an external URL link..
So would like if any of you can contribute for simple sample if both alternative are valid.
As usual thanks for your help.
What have you tried? What looks better is going to be down to personal preference. Try them both and then go with the one you prefer.
I just tested the Iframe, I used that with world-map node example. its looks ok, not not sure if anything can be improved in that way of showing external web page.
But anyway I would like to see how I can just do to open a browser when regular dashboard button is clicked?
[{"id":"51530c93.4fbe34","type":"inject","z":"59edf7be.1a2188","name":"GrafanalLocalIP","topic":"","payload":"http://192.168.2.12:4000","payloadType":"str","repeat":"120","crontab":"","once":true,"onceDelay":"2","x":247,"y":228,"wires":[["3a4de03b.a8896"]]},{"id":"3a4de03b.a8896","type":"template","z":"59edf7be.1a2188","name":"Template Iframe align=middle ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<body style=\"background-color:MediumSeaGreen;\">\n<h1 style=\"color:MediumSeaGreen; text-align:center;\"> GRAFANA</h1>\n<iframe src={{{payload}}} height=\"900\" width=\"800\" ></iframe>\n</body>\n</html>\n","x":457,"y":228,"wires":[["f570bd09.34626"]]},{"id":"f570bd09.34626","type":"ui_template","z":"59edf7be.1a2188","group":"6e6c1cac.bfb904","name":"Template_SCRIPT","order":1,"width":"15","height":"15","format":"<style>\n .filled { \n height: 70% !important;\n \n padding: 0 !important;\n margin: 0 !important;\n }\n .nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n .rounded {\n border-radius: 15px 15px 15px 15px;\n font-size: 18px;\n}\n \n</style>\n \n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(100);\n});\n \nfunction restore_bg(x) {\n $(this).css(\"background-color\", x);\n };\n \n$('.touched').on('mousedown', function() {\n \n var x= $(this).css(\"background-color\");\n $(this).css(\"background-color\", \"yellow\");\n \n setTimeout(restore_bg.bind(this,x),200);\n navigator.vibrate(100);\n });\n \n</script>\n<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":760,"y":228,"wires":[[]]},{"id":"6e6c1cac.bfb904","type":"ui_group","z":"59edf7be.1a2188","name":"WORLD MAP","tab":"766f9484.6658fc","order":2,"disp":true,"width":"15","collapse":true},{"id":"766f9484.6658fc","type":"ui_tab","z":"59edf7be.1a2188","name":"GPS-TRACKER","icon":"language","order":27}]
Personally, I don't use iframes for this. Mainly because the Dashboard SPA can already push the boundaries of what some mobile browsers can cope with. Graphana dashboards can get even larger though they are rather better optimised.
So, from a personal perspective, I put links into the NR Dashboard and keep Grafana on a separate page.
Indeed, I have Grafana as a home icon on my iOS devices & as a bookmark on my desktop devices.
thanks for the advice @TotallyInformation , can you please indicate how do you trigger open an external link for a regular dashboard button?
I don't think you can? You would have to use a Dashboard Template node I would think.
However, you can add a link to the Dashboard menu by going to the dashboard sidebar.
