Href tag in dash2 template node not working

Dashboard
1

Trying to make a clickable link in a HTML table in a ui-template node in dash2.0.

Here is just the top part of the code since everything else is working:

<template>
<!doctype html>
<div class="container">
  <table>
    <thead class="visible@l">
      <tr>
        <th>time</th>
        <th>map</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong class="hidden@l">time:</strong> {{msg.payload.Timestamp}}</td>
        <td><strong class="hidden@l">map:</strong><a href="{{msg.payload.map}}" target="_blank">tbg map</a></td>

Everything is working exactly as needed and expected except the link just shows the IP:1880 and some combination of msg.payload.map not the actual URL contained in the payload.

Things I have tried:

<a href="{{msg.payload.map}}" target="_blank">tbg map</a>
<a href="{payload.map}" target="_blank">tbg map</a>
<a href="msg.payload.map" target="_blank">tbg map</a>
<a href=msg.payload.map target="_blank">tbg map</a>
<a href=payload.map target="_blank">tbg map</a>

And most other combinations that you can run in a solid hour and half.

First 40 or so links in most search engines are now purple in my browser....
I just cant figure out why this is not working.

Thanks for the assist.

2

Close. Try <a :href="msg.payload.map"

2 Likes
3

Reason why is that the {{}} is only required when you are rendering in between the tags, the : is short hand for "binding" a variable to an attribute.

4

On review of our docs, we never actually call this out explicitly, which is poor form on our part. I've opened a Pull Request to add a "Working with Variables" section as one of the first reading points in the ui-template documentation.

1 Like
5

And it's live: Template ui-template | Node-RED Dashboard 2.0

(Thanks Steve for the prompt review)

1 Like
6

That breaks the whole table (nothing loads in the group at all), so it looks like I will just need to keep trying combinations of : and {{ and " to see what I can find works... I have been 'caught' with the : in the past day or so working with this stuff, so there is something about when to use them and when not to that I don't understand.
Thanks for the tip/reminder about them.

7

Of course it does, it is an incomplete example. It was meant only to show you the correct attribute binding :joy:

My apologies, i thought since you already posted well formed HTML and full a examples, that would be obvious.

<a :href="msg.payload?.map" target="_blank">tbg map</a>

Note I added a question mark. That is deliberate. It means if payload is empty do not try to access .map (like a safeguard)

8

Dash 2.0 means I've had to try and learn some coding stuff the past few months, its been very hard.

The 'well formed' HTML was from a guys website talking about building responsive tables for Wordpress sites.... ie, it was not me. I have no idea how it works, it just does now thanks to your extra bit of code.

The next trick is for me to figure out how to build a loop in a function node that makes the HTML code to feed into the ui-template node based on the msg.payload array length since HTML tables cant show missing data it would seem.

Should be 'fun'....

Thanks for your help on this URL, I would not have ever figured it out and search results are still very sparse for using HTML code in the 2.0 template node.

9

No need, the joy of VueJS is that it provides this kind of functionality for you: List Rendering | Vue.js

10

We have detailed the two use cases in the documentation: Template ui-template | Node-RED Dashboard 2.0

11

Vuetify does not have any any responsive data tables and it was my understanding that dash 2.0 cant inform the vuetify code when to invoke any dynamic changes (same with the soon coming tabulator node), so hence me using HTML with a lot of CSS to make the responsive data tables.
There is nothing on that linked page that looks like a responsive table, so am unsure what 'joy' there is?

I've read that several times and the fault is entirely mine.... I am not a programmer and thus reading documentation written by programmers for programmers is just out of my reach at the moment.
Perhaps in a year or so once I achieve this goal of converting my dash 1.0 site to dash 2.0 I will have learned enough programming to be able to make better use of pages like that.

12

You asked for the ability to loop over a payload and render rows - I provided you with a method by which to do that.

I know that you seek responsive data tables, as in the articles I have sent you previously, it is hard, but it is on our list to implement that.

We are working through requests from many many users as quick as we can.

13

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