# Passing dynamic class into dashboard 2.0 ui\_template

**URL:** https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [24 February 2024 16:54 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861 "2024-02-24T16:54:16Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)
#### Post date: [24 February 2024 16:54 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/1 "2024-02-24T16:54:16Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/075d55d41b37c73ca00820b38bfc0a1c6ad364be.png)

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [24 February 2024 19:03 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/2 "2024-02-24T19:03:30Z")

</div>

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](https://vuejs.org/guide/essentials/class-and-style))

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

```

---

<div class="post-metadata">

### Author: ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)
#### Post date: [27 February 2024 17:01 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/3 "2024-02-27T17:01:38Z")

</div>

But this makes the page crash...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae085f8ddea61c91c8c12952b4c15b0c8311031a.png)

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [27 February 2024 17:47 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/4 "2024-02-27T17:47:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)
#### Post date: [27 February 2024 18:13 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/5 "2024-02-27T18:13:25Z")

</div>

Thank you, that explained a lot 🙂

---

<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: [27 February 2024 17:27 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/6 "2024-02-27T17:27:02Z")

</div>

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

---

<div class="post-metadata">

### Author: ![raullink](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@raullink](https://discourse.nodered.org/u/raullink)
#### Post date: [4 March 2024 11:48 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/7 "2024-03-04T11:48:56Z")

</div>

Hi everyone, same problem here.

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7cd27b95508769a3e00279c2b3ef73730c6b1c87.png)

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

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [4 March 2024 15:37 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/8 "2024-03-04T15:37:34Z")

</div>

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

```auto
<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)](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

---

<div class="post-metadata">

### Author: ![raullink](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@raullink](https://discourse.nodered.org/u/raullink)
#### Post date: [5 March 2024 10:52 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/9 "2024-03-05T10:52:15Z")

</div>

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:

```auto
<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)?

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [5 March 2024 11:39 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/10 "2024-03-05T11:39:40Z")

</div>

@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

```auto
<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 :**

```auto
[{"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"}}]

```

---

<div class="post-metadata">

### Author: ![raullink](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@raullink](https://discourse.nodered.org/u/raullink)
#### Post date: [7 March 2024 11:02 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/11 "2024-03-07T11:02:37Z")

</div>

It works flawlessly. Thanks!

---

<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: [21 March 2024 11:03 UTC](https://discourse.nodered.org/t/passing-dynamic-class-into-dashboard-2-0-ui-template/85861/12 "2024-03-21T11:03:04Z")

</div>

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