Task: I'd like to allow a dash 2 user to click on a URL that links them to another page in the same dash 2 and also use a link node to send a variable payload that the next page will use.
ie, user clicks on a link in some row in a table and the browser opens a new page that populates based on the data clicked in that row.
Problem: I can click the link, that's no problem, it's detecting which row they clicked. Note. The data table is a pure HTML / CSS table in a template node.
Both of those nodes are void of any information about the users actions on the page, only when they click away from the page do you see where they are headed.
In the function node 'clean up', I moved the msg.payload into msg.orignal in the hope that the ui control node would pass it through. No such luck.
Question: How can I know what URL the user clicked?
Hi Ben. there is not really enough info and no demo flow etc for someone to "fix up" for you so some or all of the below may be way off the mark. Hopefully though there is something in here that gives you some clues. Also note, this is not an issue unique to dashboard 2 (the same hurdles and considerations would be present in and client/server setup).
A hyperlink is a client-side (browser) thing and the link-node is a server-side (Node-RED) thing.
So to achieve this, I would suggest you use buttons (they can be styled like a regular hyperlink) that sends a message to Node-RED that then performs the server-side stuff then use the ui-control node to perform the navigation. Since you have the list of URLs in Node-RED you should be able to match up the index with the URL.
In which case, even easier. You could populate your tables links (buttons) with the relevant info in the send operation. Something like this.send({payload: url, index: index}) and the relevant info will be in the message sent to Node-RED without any look up at all.
Do you mean a popup (separate) page or just "navigate to" the linked page? A popup is a bit harder and would need a bit more thought.
PS, I have tagged your post with the dashboard-2 (Joe keeps an eye on this category tag and might have missed this posting)
The URL you navigate to can include ?key=value at the end. That gets you to the new page, with the relevant information in the URL
Then the UI Event node can be useful as it will list explicitly any query params in it's payload. You can wire the output from the ui-event node into wherever loads your data, and pass the output to the relevant table/template.
Thank-you very much guys.
I spent a bit of time and could not figure either method out nor get them working.
I got my 'dash2' programmer to take a look and he got it going pretty quick.
(You'd think after 9 years of doing this I'd know what I'm doing by now and I know you have said that dash1 is the same, but I have found dash2 to be vastly different in just about every way. I've also consistently found that for stuff like this, you really should be a programmer talking to programmers and that is a big part of my gap).
Neither of us could work out the @Steve-Mcl method, but thankfully @joepavitt method was smooth to get up and running.
The website has grown a lot over the past few months and now has just over 500 daily users.
This means I finally have a test site and the live site.
I tested out the URL on the test it and it worked great. Moved the same code to the live site and when I deployed it reset Node-RED.
This has the unwelcome side effect of dumping 1.5 million records and flushing the tables on 25 pages that have table data.... The net result of this is 500+ grumpy users when it happens unscheduled like just now.
On the upside. As I said, it works great!
Here is the function node code that my guy put together.
//If the user clicks on a map link, check that the clicked link is headed to the 'trackmap' page.
// AND that the the query has a key (the aircraft ICAO will be in that key value)
// return the ICAO in the payload for the link node to take it to the trackmap page.
if(msg.topic == "$pageview") {
if(msg.payload.page.path == "/trackmap") {
if(msg.payload.query.hasOwnProperty("key")) {
msg.payload = msg.payload.query.key;
return msg;
}
}
}
// Otherwise it's not pageview, or not trackmap, or doesn't have a key ... so do nothing
The base URL looks like: msg.maplink = "https://tbg.airframes.io/dashboard/trackmap?key="+msg.payload.ICAO;
When that link is clicked from the HTML table, a new tab is opened and the trackmap has the query key value sent from the link out/in nodes and it works as expected.
I do struggle to comprehend this as 90% of options are exactly the same. Most of the widgets are the same too and all their options are supported.
The main differences are that ui-template is now VueJS and we now have responsiveness for our layouts and we have more widgets/features which Dash 1.0 did not
