# Dynamic HTML content in ui-template

**URL:** https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 February 2024 18:13 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827 "2024-02-23T18:13:59Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [23 February 2024 18:13 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/1 "2024-02-23T18:13:59Z")

</div>

I have a code where I can download a file which is stored on the Node-Red server (not in the static folder).  
In DB1, I had a template node, to which could pass a HTML code which triggered my file download:

```auto
    msg.template = "<script>window.open('" + encodeURIComponent(lastselected[0].downloadlink) + "', '_blank');</script>";
    return msg;

```

The download link points to a http-in endpoint which handles the file download.

In DB2, I only send the downloadlink in the in `msg.payload`, and I wanted to trigger the `window.open` like this. This is all the code in the template node:

```auto
<script>
    export default {
        data() {
            return {
            }
        },
        watch: {
            msg: function() {
                if(this.msg.payload != undefined){
                    this.window.open(this.msg.payload, '_blank');
                }
            }
        }
    }
</script>

```

Nothing happens. I can see an error in the debugger: "Cannot read properties of undefined (reading 'open')". So I guess `window` is not available in the script section?

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [23 February 2024 20:17 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/2 "2024-02-23T20:17:12Z")

</div>

Let me have a second question on this:  
I want to display a text file in DB2. Back in DB1, I created the entire `<div>...</div>` source code in a function node, HTML encoded the text to be displayed and replaced the line feed to `<br/>`.

I would like to do the same in a template node, inside for example in a `v-card`. I added this

```auto
...
        <v-card-text>
            <div>{{ content }}</div>
        </v-card-text>
...

```

Vue takes care of the HTML encoding, but I cannot get it to add line breaks. If I just pass the file content, line break is ignored. If I replace the line break with `<br/>` it is printed on the screen as it is. Is there a trick for this?

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [23 February 2024 20:20 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/3 "2024-02-23T20:20:39Z")

</div>

And the last question:  
I want to display an image in DB2, but the image file is not stored in the static folder. In DB1, I read the file, base64 encoded it and generated an 'img' tag with inline base 64 source of the image. Probably not nice, but got the job done.  
Would anything like this would be remotely possible in Vue? I guess I cannot put the base64 source to the `v-img` tag?

---

<div class="post-metadata">

### Author: ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)
#### Post date: [23 February 2024 20:54 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/4 "2024-02-23T20:54:02Z")

</div>

> [@nygma2004](#):
>
> `this.window.open(this.msg.payload, '_blank');`

The only time that `window` should be attached to a `this` should be [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis). I assume that you already tried it without the `this`.

The alternative would be to use this example of raw javascript [Text ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#example-raw-javascript). I have confirmed that it works well and you can easily listen to messages and handle them.

I do something similar in a "ui-scoped widget" so that when i send a custom message from my authentication middleware to the socket it can then respond by reloading the dashboard which will trigger a reroute to the login page.

```auto
<script>
  this.$socket.on('window.location.reload', (msg) => {
    window.location.reload(msg);
  });
</script>

```

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [23 February 2024 21:57 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/5 "2024-02-23T21:57:48Z")

</div>

> [@nygma2004](#):
>
> Vue takes care of the HTML encoding, but I cannot get it to add line breaks. If I just pass the file content, line break is ignored. If I replace the line break with `<br/>` it is printed on the screen as it is

To allow html tags such as `<br/>` in `content` use  
`<div v-html="content"></div>`  
where `content` is a computed function.

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [25 February 2024 15:19 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/6 "2024-02-25T15:19:21Z")

</div>

> [@Colin](#):
>
> `<div v-html="content"></div>`

Thanks for the tip @Colin, this works just great!

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [25 February 2024 15:21 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/7 "2024-02-25T15:21:27Z")

</div>

> [@kevinGodell](#):
>
> I assume that you already tried it without the `this`.

Ups, I think I did not. Works just fine with `this`. Thanks for pointing this out.

---

<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: [10 March 2024 15:22 UTC](https://discourse.nodered.org/t/dynamic-html-content-in-ui-template/85827/8 "2024-03-10T15:22:00Z")

</div>

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