Using window.open in function node

Dashboard
1

I'm trying to create a links section on my dashboard. So, I've got a button that I want to simply cause a particular website to open in a new browser tab (not a ui tab). I'm trying to use the function node after my button node with the following code. But, it's giving me the following error.

var redirectURL = msg.payload;
var myWindow = window.open(redirectURL, '_blank');

ReferenceError: window is not defined (line 2, col 16)

2

Hi @mooreb

the Function node runs in the Node-RED runtime where there is no browser to do anything with.

To open a new browser window you need to run some code inside the browser. To do that could use a ui_template to add some code to the dashboard that can trigger opening a window when a message is received.

3

@knolleary

Ah I see, that makes sense. Thanks for explaining that! Sorry, I'm pretty new to all this. Could you possibly give me an example of the code that I'd need to run in a ui_template node? Also, is there a way to hide that ui_template node, so it doesn't show up anywhere?

4

Seems a bit "heavy" to use a function node to tell the dashboard to open a plain html page... and I don't see any good options in the flows library. This may be a good candidate for a new "open web page" contrib node -- but I digress.

If the "Links" section of your dashboard is plain HTML <a target="_blank" href="..."> tags, the browser will open those sites without involving any node-red function or other nodes.

As Nick says, use a ui_template node to render the html links -- and since you can use "mustache" substitution, it's easy to send a msg with an array of links to that ui_template node to have it dynamically rendered, something like this (untested):

<div id="my_links">
  {{#payload}}
    <a target="_blank" href="{{url}}">{{label}}</a>
  {{/payload}}
</div>

This syntax expects an incoming msg.payload with an array of link objects, each with its url and label, like this:

{
    "payload": [
        { "label": "Site 1", "url": "http://site1.com" },
        { "label": "Site 2", "url": "http://site2.com" }
    ]
}
1 Like
5

If you are using a dashboard button as you mention, you can insert the link directly in its label field such as:
image

If you don't need the button, you can use the Text node and insert the links in the value format field like:
image

4 Likes
6

@hugobox, @shrickus,
Awesome guys, thanks!!!! It's all starting to make sense to me now. I got it working. I like the built in dashboard buttons, so I used hugobox's solution to pass the URL and Label into the ui_template, which is using shrickus's solution. And, thanks to knolleary for helping me understand why my initial solution wasn't working. Thanks also for everyone's patience with me. We all have to start somewhere, right? lol

2 Likes
7

Awesome work around for not having access to window.open feature.

I have been trying to get a HighChart Zoom Enabled time series line plot to be opened in another web browser tab, when the data points retrieve from a local database exceeds 10,000 points. On my meager laptop, it takes quite a while to plot on the node red dashboard UI chart and effectively make everything move in slow motion in Node-Red. Hence resorting to HighChart.

Since I am unable to trigger a window.open() from within a function block when the data retrieved is greater than 10,000 points... I found a workaround by making use of the ui-toast (notification node) and some html/css.

So, in this workaround, when the array length is greater than 10,000 data points, I used the switch node to trigger the notification node, which pops up an OK/Cancel dialogue box in Node Red Dashboard. And within this pop up box, I displayed a clickable link to open a new tab which display my timeseries data plot out in the zoom enabled HighChart.

Please Import the flow below to see a simple setup for this clickable link within a pop up notification dialogue box!

[
    {
        "id": "37870965.eb4176",
        "type": "ui_toast",
        "z": "8b707301.89767",
        "position": "dialog",
        "displayTime": "6",
        "highlight": "red",
        "sendall": true,
        "outputs": 1,
        "ok": "OK",
        "cancel": "",
        "raw": true,
        "topic": "",
        "name": "",
        "x": 450,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "33f17afc.984c36",
        "type": "inject",
        "z": "8b707301.89767",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 140,
        "y": 180,
        "wires": [
            [
                "6bf3e226.642b9c"
            ]
        ]
    },
    {
        "id": "6bf3e226.642b9c",
        "type": "template",
        "z": "8b707301.89767",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "<p style=\"text-align: center\">Unfortunately Node Red cannot solve this for you. Click on link below to find the one who does</p>\n<p style=\"text-align:center\"><a href=\"https://www.google.com/\"  target=\"_blank\" style=\"color:red;font-size:300%\">The ALL Knowing</a></p>",
        "output": "str",
        "x": 280,
        "y": 180,
        "wires": [
            [
                "37870965.eb4176"
            ]
        ]
    }
]

The_ALL_knowing_flow_notification
The_ALL_knowing_flow_notification776Ă—831 43.6 KB
The_ALL_knowing_flow_template
The_ALL_knowing_flow_template781Ă—974 37.6 KB
The_ALL_knowing_flow
The_ALL_knowing_flow779Ă—116 8.69 KB
The_ALL_knowing
The_ALL_knowing1098Ă—367 22.1 KB

8

The easiest way is to use the exec node
on Win10 you can use the command start https://www.google.com
on macOS it should be open http...
on Linux/Unix it should be xdg-open http...
google will help

You can also make you link dynamic with the payload option

BILD1

BILD2
BILD21048Ă—306 26.1 KB

BILD3
BILD31045Ă—385 33.7 KB

Example for win10

[{"id":"10c299ee.1efcee","type":"exec","z":"3e5c57e2.a7289","command":"start ","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"open Website in browser","x":2250,"y":640,"wires":[[],[],[]]},{"id":"dff7108b.c7aa28","type":"change","z":"3e5c57e2.a7289","name":"set Website","rules":[{"t":"set","p":"payload","pt":"msg","to":"https://www.google.com","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2030,"y":640,"wires":[["10c299ee.1efcee"]]},{"id":"de0f7e4c.f12cb","type":"inject","z":"3e5c57e2.a7289","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":1840,"y":640,"wires":[["dff7108b.c7aa28"]]}]