Dashboard 2.0 template node

Dashboard
,
1

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.

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

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

2

This may help

3

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

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

4

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