Passing dynamic class into dashboard 2.0 ui_template

[olab]

For some reason NR Dashobard 2.0 fails to render a class set by my incoming msg.style
If I replace {{msg.sub[0].style}} with static class name, it works.

Why?

[UnborN]

In Vue you have to use v-bind or the shorthand : on the class and single curly brackets in order for
msg.sub[0].style to be considered as code (Vue documentation)

<div :class="{msg.sub[0].style}"></div>

[olab]

But this makes the page crash...

[UnborN]

im not sure but i think in vue you use { } only in the case of class
in the case of :title try without the single brackets :title="msg.payload"

ps. I havent tested it .. in these cases its better to copy / paste you code in text form instead of screenshot .. makes it easier for us to copy use the code

[olab]

Thank you, that explained a lot

[joepavitt]

Answer:

:title="msg.main?.articlename"

Explanation

• The : before the attribute tells Vue "there is some dynamic functionality in here, go and compute it"
• The ? is required because on first load the msg.main will not be equal to anything, so it will be trying to read .articlename of undefined.
• There is no need for any {}, the : tells Vue it's JavaScript.

Note: I've assumed here yu're sending msg.main and not msg.payload is is more common.

[raullink]

Hi everyone, same problem here.

I want to pass a "color" property as "msg.colores" in template, but just wont work.

I tried that v-bind, but dont even compile.
Any tips?

[Buckskin]

You are trying to add a variable to CSS, this will not work.

You need 2 classes in your HTML, 1 with the basic status and a second bound to the variable with the colour.

This is an example of ONE way of doing this, there are many others

<v-btn class = "status" :class = "colourClass" </v-btn>

Have a look at some of the examples Text ui-template | Node-RED Dashboard 2.0 (flowfuse.com)

[raullink]

Thanks for reply.
I have to create a new class for every color?
I'm asking this because, actually, I'm migrating from dashborad 1.0 to 2.0, and I got a lot of situations that I can do this in template node. Something like this is possible and works well in 1.0:

<p>
    <span class="cardSpan">
  <span style="color:{{msg.colores}};font-weight: bold;vertical-align: middle;display: inline-block;font-size: 20px;">Status: {{msg.status}} </span>
    </span>
</p>

I have a special color for every possible "status" (its a string to info the current machine state) that msg.colores is defined in a function node with a "switch case" before the template node.

For 2.0, to replace this "logic" for dynamically change "status" string color I have to create a new class for every colors, its that right? Can you describe other way to do that (sorry, I cant really understand that ones on the link)?

[UnborN]

@raullink you need to v-bind the style by adding the shorthand : infront of it if you are planning to send dynamic styles to it .. along with some other small changes as per the example below

<template>
  <p>
    <span class="cardSpan">
  <span :style="{ 'color':msg.payload?.color, 'font-weight': 'bold', 'vertical-align': 'middle', 'display': 'inline-block', 'font-size': '20px' }">Status: {{msg.payload?.status}}</span>
    </span>
  </p>
</template>

Test Flow :

[{"id":"fe1b74cba6ca339d","type":"inject","z":"54efb553244c241f","name":"error - red","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"color\":\"red\",\"status\":\"Error\"}","payloadType":"json","x":160,"y":2260,"wires":[["f332963bc60e072d"]]},{"id":"f332963bc60e072d","type":"ui-template","z":"54efb553244c241f","group":"12caf9e6968092fd","page":"","ui":"","name":"","order":0,"width":"6","height":"1","head":"","format":"<template>\n  <p>\n    <span class=\"cardSpan\">\n  <span :style=\"{ 'color':msg.payload?.color, 'font-weight': 'bold', 'vertical-align': 'middle', 'display': 'inline-block', 'font-size': '20px' }\">Status: {{msg.payload?.status}}</span>\n    </span>\n  </p>\n</template>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":340,"y":2300,"wires":[["05b95dd9b1009de3"]]},{"id":"05b95dd9b1009de3","type":"debug","z":"54efb553244c241f","name":"debug 59","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":2300,"wires":[]},{"id":"060dea938c81d552","type":"inject","z":"54efb553244c241f","name":"OK - green","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"color\":\"green\",\"status\":\"OK\"}","payloadType":"json","x":160,"y":2340,"wires":[["f332963bc60e072d"]]},{"id":"12caf9e6968092fd","type":"ui-group","name":"Group 1","page":"1a89c4c21097111f","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"1a89c4c21097111f","type":"ui-page","name":"Page 1","ui":"d726187aa6c1921a","path":"/","layout":"grid","theme":"b5afc19a78309829","order":1,"className":""},{"id":"d726187aa6c1921a","type":"ui-base","name":"UI Name","path":"/dashboard"},{"id":"b5afc19a78309829","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#008000","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

[raullink]

It works flawlessly. Thanks!