# Dashboard 2.0 template node

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-template-node/90384>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [23 August 2024 23:55 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384 "2024-08-23T23:55:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffery](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jeffery](https://discourse.nodered.org/u/jeffery)\
**Post date:** [23 August 2024 23:55 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384/1 "2024-08-23T23:55:24Z")

</div>

Trying to move a simple dashboard 1.0 template node to dashboard 2.0

My code from dashboard 1, The color of the heart is sent from the microcontroller, to give the dashboard a heart beat from the microcontroller.

```auto
<p>
    <center>
        <font color="{{msg.payload}}"><b> &hearts; </b></font>
    </center>
</p>

```

Dashboard 2.0 code; I have tried every format to get msg.payload to set color.

```auto
<template>
    <div>
        <h2>Heat Beat</h2>
        <p class="my-class">&hearts;</p>
    </div>
</template>

<style>
    .my-class {
        color:{{msg.payload}};
    }
</style>

```

If I hard code color works no problem.  
I know this is simple... but the format on how to access the msg. I have not been able to find.

Any Help would be greatly appreciated, also training resources to better understand the template node and access to the msg.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [24 August 2024 02:33 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384/2 "2024-08-24T02:33:27Z")

</div>

> [@Dashboard 2 read incoming msg](https://discourse.nodered.org/t/dashboard-2-read-incoming-msg/85888):
>
> Getting close to the end but missing how to set an incoming msg. In my example I have three buttons and when I press one the others grey out and the one turns green. Pressing any other one works the same. What I want to do is set one to green on power up. Can't seem to get that piece working. Found some code from @buckskin that I modified but obviously missing a piece. \<template\> \<v-app\> \<div class="justify-center ma-4"\> \<v-card class="a2" width="100%" outlined\> …

This may help

---

<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:** [25 August 2024 05:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384/3 "2024-08-25T05:40:57Z")

</div>

Hi @jeffery - thanks for the question

### TLDR

- **Attribute Binding:** - Always use `:attribute=""`. Anything inside the `""` is then treated as JavaScript
- **Inside :** Always use `{{ mustache }}`

### Your Example

```auto
<template>
    <div>
        <h2>Heart Beat</h2>
        <p :style="{'color': msg.payload}">&hearts;</p>
    </div>
</template>

```

### Extras

- We have this detailed in the online documentation [here](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)
- We don't currently have it explicitly mentioned in the in-Editor help though, so I'll be sure to add that in now.
- We also don't have an example in the default `ui-template` contents, I will also update that now to include it.

### Update:

PR Opened to improve docs and example: [UI Template: Improves in-Editor Docs & Initial Example by joepavitt · Pull Request #1235 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1235)

---

<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:** [24 September 2024 05:41 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384/4 "2024-09-24T05:41:27Z")

</div>

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