# How to include context variable inside ui-template CSS

**URL:** https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [16 March 2024 11:55 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472 "2024-03-16T11:55:15Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [16 March 2024 11:55 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/1 "2024-03-16T11:55:15Z")

</div>

Hi,

I have the following inside a ui-template node:

```auto
<template>
    <span class="statusLabel">{{msg.statusText}}</span>
</template>

<style>
    .statusLabel {
        text-align: center;
        width: 20%;
        background: {{msg.statusLabelColor}};
        padding: 10px;
        color: white;
        border-radius: 5px;
        margin-bottom: 10px;
    }
</style>

```

Both `msg.statusText` and `msg.statusLabelColor` are strings, wired into the template node.  
`msg.statusText` is rendered fine, but `msg.statusLabelColor` is not rendered inside the CSS, so the background color is not set when the page loads.

Why does this not work?

---

<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: [16 March 2024 12:44 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/2 "2024-03-16T12:44:47Z")

</div>

The `{{ }}` injection only works within the `<template />` tags.

In order to assign a dynamic `background-color`, you can use Vue's dynamic binding like so:

```html
<template>
    <span class="statusLabel" :style="{'background-color': msg.statusLabelColor}">{{msg.statusText}}</span>
</template>

```

---

<div class="post-metadata">

### Author: ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)
#### Post date: [17 March 2024 06:45 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/3 "2024-03-17T06:45:30Z")

</div>

Works perfectly, thank you!

---

<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: [17 March 2024 08:50 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/4 "2024-03-17T08:50:30Z")

</div>

Is it considered better to change the color directly, or to change the class and specify the color for the classes separately via css?

---

<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: [17 March 2024 09:13 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/5 "2024-03-17T09:13:16Z")

</div>

If its just a one off example, then changing the color directly is fine.

If you have multiple instances of where that dynamic styling is required, then the class approach is cleaner as it centralises the styling definition.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 March 2024 09:15 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/6 "2024-03-17T09:15:00Z")

</div>

[Opinion]  
In an ideal world , we should always use classes to separate content from presentation. Especially for re-use, but for single one off tweaks, an inline style is sometimes "enough".  
[/Opinion]

---

<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: [31 March 2024 09:15 UTC](https://discourse.nodered.org/t/how-to-include-context-variable-inside-ui-template-css/86472/7 "2024-03-31T09:15:29Z")

</div>

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