# Dashboard 2: Open a new browser tab by button node

**URL:** <https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [30 October 2024 07:48 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785 "2024-10-30T07:48:05Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 07:48 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/1 "2024-10-30T07:48:05Z")

</div>

Hiho,

on Dashboard 1 I use template nodes and inject / create a link like that:

```auto
msg.template: "<a id="cc:7b:5c:85:5c:4c" href="http://192.168.0.139" target="_blank"></a>"

```

after this I use javascript to set a click which opens up a new tab like that:

```auto
msg.template: <script>document.getElementById("bc:dd:c2:63:95:e7").click();</script>

```

This works pretty well to open a new tab with a custom link address in DB 1  
but in DB 2 / Vue this is not possible. I think DB2 / Vue handles the javascript as text or so and the click will never happen.  
Any solutions for that ? - Thx!

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 October 2024 09:10 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/2 "2024-10-30T09:10:53Z")

</div>

This would work fine in Dashboard 2.0?

```auto
<template>
    <a id="cc:7b:5c:85:5c:4c" href="http://192.168.0.139" target="_blank"></a>
</template>
<script>
    document.getElementById("bc:dd:c2:63:95:e7").click();
</script>

```

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 09:25 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/3 "2024-10-30T09:25:57Z")

</div>

On Dashboard 1 it works fine but I try to migrate to DB 2.

This the flow with DB 1 but I replaced it with DB 2 UI elements for migration.  
template nodes are in same group and have empty template and will only get that by msg.template likes so:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/522fd45849960a31c3093be1a64b15bb3b3850fd.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/404f121ed7198b2142bd4769bb4def9e6697d0f5.png)

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 09:32 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/4 "2024-10-30T09:32:08Z")

</div>

> [@joepavitt](#):
>
> This would work fine in Dashboard 2.0?

No. That does not work for me.  
Not in Brave, Chrome and FF.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 October 2024 09:35 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/5 "2024-10-30T09:35:38Z")

</div>

I've just realised you're trying to inject the content, rather than having it defined in the _template_ itself. I misunderstood.

Dynamic updating of the template entirely isn't something we support right now.

Although, I am a little confused by the use case? Why do you need to create the button to then automatically click it anyway? Why not use a `control` node to do the navigation directly?

> **[Control ui-control | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-control.html#external-url)**
>
> Dynamically control elements on your dashboard through ui-control for Node-RED Dashboard 2.0.

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 10:05 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/6 "2024-10-30T10:05:36Z")

</div>

Thx for your fast reply.

> [@joepavitt](#):
>
> I've just realised you're trying to inject the content, rather than having it defined in the _template_ itself. I misunderstood.

No problem, but even when putting it into the fixed template node like in your first post it didn t work.

> [@joepavitt](#):
>
> Dynamic updating of the template entirely isn't something we support right now.

Will it be supported ?

> [@joepavitt](#):
>
> Although, I am a little confused by the use case? Why do you need to create the button to then automatically click it anyway? Why not use a `control` node to do the navigation directly?

Maybe I was unclear about what I actually wanted to achieve. I'm sorry. Please let me catch up on that. I have the following situation:  
for switches (lamps, WLED, relays)  
I use a very extensive flow that can do a lot (time switching, absence emulation, timer...etc) and is only modified in the most necessary places. (For WLED switches it's colors and effects, for Shelly it's current measurement and MQTT, for Tasmota...etc).  
If I now want to add a new device, I copy this flow completely and only adjust the most necessary things. This also includes a button that creates (WHEN CLICKED!) the IP of the flow using the Mac and this is the link to the device's web interface. So I just have to change the label of the button. I wanted to keep it that way because it (DB1) always worked wonderfully. So basically I have a function node that creates a link for me as a payload. and I just want a button to call it up. (I honestly don't know how you get it to be pressed automatically).  
Of course, I would like it best if I had the option of not having to manually move all of the (approx. 40) UI elements in the fiddly menu and create groups etc. when copying the flow... I would be in favor of one here too solution very grateful, but that is another story.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 October 2024 10:24 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/7 "2024-10-30T10:24:32Z")

</div>

You might find something relevant in this flow [Bookmark page](https://discourse.nodered.org/t/bookmark-page-with-reachability-verification/75728).  
It is outside of the NR dashboard though.

It displays a page of buttons which can be web links, Tasmota devices, Node-red editors & dashboards, connectivity checks, etc.

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 10:31 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/8 "2024-10-30T10:31:27Z")

</div>

> [@jbudd](#):
>
> It displays a page of buttons which can be web links, Tasmota devices, Node-red editors & dashboards, connectivity checks, etc.

Thx, I took a look and its more a connectivity check / display there. I need to open the payload / url in a new tab by button click.  
I could breake it down to make it simple:  
my payload is an url, how to open that url in a new tab on DB2 ?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 October 2024 11:04 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/9 "2024-10-30T11:04:52Z")

</div>

> [@WhiteLion](#):
>
> my payload is an url, how to open that url in a new tab on DB2 ?

On my copy of this flow I have a group of buttons "Node-red", pointing to the NR editor on various devices. The URLs are hard coded in a template node (but could well be dynamically generated)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af5adc0924d1770c8b8696451b8f5bcb73797389.png)

The URLs could equally well be eg `192.168.1.25:1880/ui` (dashboard 1) or `192.168.1.25:1880/dashboard/door` (a specific tab on dashboard 2)

I really should add a new group for Tasmota devices, which might be

```auto
- group: Tasmota
  links:
  - title: Coffee
    address: http://192.168.1.75
    verify: http

```

And incidentally I tried @joepavitt's suggested dashboard 2 template.  
Once I inserted some text inside the tag, I deployed it on one dashboard 2 page.  
Clicking the link opens a new tab displaying a different dashboard page "door".  
It's just a text link but no doubt it could be presented as a button instead.  
NB I have no idea what those MAC addresses are doing in there but it doesn't stop the link working.

```auto
<template>
    <a id="cc:7b:5c:85:5c:4c" href="http://192.168.1.11:1880/dashboard/door" target="_blank">Door</a>
</template>
<script>
    document.getElementById("bc:dd:c2:63:95:e7").click();
</script>

```

Isn't this what you are after?

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [30 October 2024 11:49 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/10 "2024-10-30T11:49:00Z")

</div>

I tried the flow from your link and I don't see any UI elements or things that will help me with my project. But I'm not a DB 2 expert either.  
Maybe you could help me out or show me an example flow of how to open a dynamically created link (e.g. coming from function node) using parts of this flow.

> [@jbudd](#):
>
> And incidentally I tried @joepavitt's suggested dashboard 2 template.  
> Once I inserted some text inside the tag, I deployed it on one dashboard 2 page.  
> Clicking the link opens a new tab displaying a different dashboard page "door".  
> It's just a text link but no doubt it could be presented as a button instead.  
> NB I have no idea what those MAC addresses are doing in there but it doesn't stop the link working.

The mac is just an identifier to set the click event. could be replaced with another unique id.  
This does not work for me... even when not set dynamically.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 October 2024 12:17 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/11 "2024-10-30T12:17:01Z")

</div>

There are many ways to add external links dynamically to the dashboard.  
It will be reasonable to contain them somehow so the layout doesn't change no matter how much items you have. And the list of items is just an array, you can change it any time ... And more and more such advantages ...

One example

```auto
[{"id":"c72f844e7fb95a1e","type":"ui-template","z":"8240715f881ef736","group":"2c34b9c7d6324531","page":"","ui":"","name":"","order":1,"width":"6","height":"2","head":"","format":"<template>\n <v-card class=\"device-list\">\n <v-card-title>\n Active Devices\n </v-card-title>\n\n <v-divider></v-divider>\n\n <v-virtual-scroll :items=\"items\" height=\"calc(var(--widget-row-height) * 4 + var(--widget-gap) * 3)\" item-height=\"var(--widget-row-height)\">\n <template v-slot:default=\"{ item }\">\n <v-list-item :subtitle=\"item.url\" :title=\"item.name\">\n <template v-slot:append>\n <v-btn icon=\"mdi-open-in-new\" @click=\"openUrl(item.url)\" size=\"small\" \n style=\"width: var(--v-btn-height); height: var(--v-btn-height); min-height:unset\">\n </v-btn>\n </template>\n </v-list-item>\n </template>\n </v-virtual-scroll>\n </v-card>\n</template>\n\n<script>\n export default {\n data() { \n return {\n items:[]\n }\n },\n watch: {\n msg:function(){\n if(this.msg?.payload){\n this.items = this.msg.payload\n }\n }\n },\n methods: {\n openUrl:function(url){\n window.open(url,'_blank')\n }\n }\n }\n</script>\n<style scoped>\n .device-list .v-list-item-subtitle{\n font-size:0.65rem;\n }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":1140,"wires":[[]]},{"id":"8e1d8581d2ebe7c2","type":"inject","z":"8240715f881ef736","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Device 1\",\"url\":\"https://www.google.com\"},{\"name\":\"Device 2\",\"url\":\"https://www.google.com\"},{\"name\":\"Device 3\",\"url\":\"https://www.google.com\"},{\"name\":\"Device 4\",\"url\":\"https://www.google.com\"},{\"name\":\"Device 5\",\"url\":\"https://www.google.com\"}]","payloadType":"json","x":410,"y":1140,"wires":[["c72f844e7fb95a1e"]]},{"id":"2c34b9c7d6324531","type":"ui-group","name":"Devices","page":"7294756f31e17b81","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"7294756f31e17b81","type":"ui-page","name":"Home","ui":"29792df7d7b05e2e","path":"/home","icon":"home","layout":"grid","theme":"52ba8a01d6eda628","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"52ba8a01d6eda628","type":"ui-theme","name":"Mobile","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"5px","groupGap":"5px","groupBorderRadius":"10px","widgetGap":"5px"}}]

```

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [1 November 2024 16:41 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/12 "2024-11-01T16:41:47Z")

</div>

After tinkering around some more and with help of examples ^^ I could get it to work with this template node:

```auto
<script>
    export default {
        data() {
            return {
                macId: "", // Id uniqe
                initialLoad: true, // prev. exec at page view
            };
        },
        watch: {
            msg: function(newMsg) {
                if (this.initialLoad && newMsg.mac) {
                    this.macId = newMsg.mac;
                    this.initialLoad = false;
                    return; 
                }
                if (newMsg.mac === this.macId && newMsg.payload) {
                    window.open(newMsg.payload, '_blank');

                    this.$set(newMsg, 'payload', null); 
                }
            }
        }
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 November 2024 16:42 UTC](https://discourse.nodered.org/t/dashboard-2-open-a-new-browser-tab-by-button-node/92785/13 "2024-11-15T16:42:00Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.