Dashboard 2: Open a new browser tab by button node

Dashboard
1

Hiho,

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

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:

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!

2

This would work fine in Dashboard 2.0?

<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>
3

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
image1047Ă—653 60.7 KB

image
image522Ă—490 15 KB

4

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

5

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?

1 Like
6

Thx for your fast reply.

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

Will it be supported ?

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.

7

You might find something relevant in this flow Bookmark page.
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.

1 Like
8

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 ?

9

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
image520Ă—460 7.82 KB

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

- 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.

<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?

1 Like
10

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.

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.

11

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

[{"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"}}]
1 Like
12

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

<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>