# Simple ui-template & mustaches

**URL:** <https://discourse.nodered.org/t/simple-ui-template-mustaches/90406>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [25 August 2024 00:14 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406 "2024-08-25T00:14:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 August 2024 00:14 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/1 "2024-08-25T00:14:54Z")

</div>

I am finding it impossible to analyse the behaviour of the ui-template node even in the simplest example of a line of text and some CSS styling.

When I make a change to the code of a ui-template it sometimes shows up on the dashboard immediately. Sometimes it needs a page reload, sometimes ctrl-f5 to refresh the cache.  
Edit - sometimes a tiny change (I can't tell exactly what) results in the dashboard browser tab hanging with a "loading" animation.

1. Why this inconsistency? With the original dashboard I didn't have to press ctrl-f5 because I had changed a word in the template?

It seems that in some places `{{payload}}` is acceptable, eg `<div class={{class}}>` but in others eg `<p>{{payload}}</p>` does not work while `<p>{{msg.payload}}</p>` does.  
In the style section of the template neither `color: {{color}};` nor `color: {{msg.color}};` work.

1. It seems that these mustaches are passed through to the vue (?) library as literals rather than being translated by the @flow-fuse/node-red-dashboard widgets?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d8bb21184e910bdc4a67d646586c2c72c8e2ea9.png)

When I drag a new template onto the worktop, it already has in it some gobbledegook in `<template>`, `<style>` and `<script>` sections.  
This is unnecessarily confusing.  
Sure it's very impressive that you can implement a button click counter, but today I only need a simple line of text (or a world map, a fancy gauge, etc, etc)

1. Doesn't this stuff belong in a cookbook entry, or an example, or flowfuse's documentation or _anywhere_ other than right-in-your-face?  
Yes I know that the original dashboard template has `<div ng-bind-html="msg.payload">`.That too is confusing.

---

<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:38 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/2 "2024-08-25T05:38:01Z")

</div>

Hi @jbudd

### TLDR

- **Attribute Binding:** - Always use `:attribute`
- **Inside :** Always use `{{ mustache }}`

### Extras

- We have this mentioned 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.
- `ng-bind-html` is Angular (Dashboard 1.0) - so not sure if you're using the the wrong/old node, or looking at the old docs?

### Update

PR opened to improve docs and better 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:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 August 2024 07:54 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/3 "2024-08-25T07:54:09Z")

</div>

## Attribute Binding

> [@joepavitt](#):
>
> We have this mentioned in the online documentation [here](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)

In that document:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/8378f5e1da23630412cea16a2c8848d0e7b52692.png)  
While I don't actually _know_ what "bind" or "attribute" mean in this context I think "variable" here means `message.payload` (a message property?) not context or environment variable.  
I can grasp the concept and even **occasionally** make it work.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/92a64a0b4162f91f75ecf8cfa67470562a9b056b.png)  
~~My attempt based on this~~

```auto
<p :class="msg.hello === null ? hotpink : msg.hello">Hello World</p>

```

~~does not work. The paragraph element either gets the class specified in msg.hello or nothing at all.~~  
~~1. How should I specify a default value if msg.hello does not exist?~~  
Solved this one, "hotpink" needs to be in single quotes (of course)

#### 2. Are you saying that within the \< and \> of an HTML tag we MUST use Attribute Binding?

## Text Interpolation

> [@joepavitt](#):
>
> **Inside :** Always use `{{ mustache }}`

#### 3. Inside what?
 This is called Text Interpolation in the document.

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

The example pictured above shows it as part of the content between `<p>` and `</p>` tags

But it does not work in between `style` and `</style>` tags, it gives an error:

```auto
.other {
    color: {{ msg.color }};
}

```

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

#### 4. Precisely where in the template, style, script sections of a ui-template can we use Text Interpolation?

#### 5. Can we use a message property to set a CSS variable?

## etc.

> [@joepavitt](#):
>
> `ng-bind-html` is Angular (Dashboard 1.0) - so not sure if you're using the the wrong/old node, or looking at the old docs?

I was contrasting the long and confusing initial content of a ui-template in @flowfuse/node-red-dashboard with the short but still confusing initial content of a ui-template in node-red-dashboard.

---

<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:** [25 August 2024 08:06 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/4 "2024-08-25T08:06:40Z")

</div>

> [@jbudd](#):
>
> long and confusing initial content of a ui-template

There was a feature request for a template selector (e.g. a drop-down in the ui-template editor that offered a few templates like "basic Vue template", "full Vue component", "basic HTML ...") discussed in the forum recently - might that help? Not sure if an issue was raised or not.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 August 2024 08:13 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/5 "2024-08-25T08:13:39Z")

</div>

Perhaps it would help Steve but only for someone who knows what a Vue template or component is, or even HTML

Because Node-red makes workflows and dashboards simple for non technical users to build, creating a ui-template could be the user's first ever exposure to HTML syntax.  
For him, that dropdown would just add to the confusion.

Maybe such a dropdown would be good for a more sophisticated user (after all flowfuse is professional Node-red) but I'm not competent to judge 😀

---

<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:** [25 August 2024 08:30 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/6 "2024-08-25T08:30:00Z")

</div>

It is implicit (unspoken/unwritten) but the ui-template is not for beginners. As new features are added and new contribs are added, the need for ui-template _should_ reduce.

However, given a bunch of varying difficulty templates to chose from, there is chance a user with the will to experiment might stumble into a solution or learn something or get an idea they can ask about.

If nothing else, your comment about "confusing initial content" could be improved.

---

<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 09:27 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/7 "2024-08-25T09:27:05Z")

</div>

> [@jbudd](#):
>
> Solved this one, "hotpink" needs to be in single quotes (of course)

Correct, withour quotes, it looks for a variable called `hotpink`, the single quotes make sure it is read as a string.

> [@jbudd](#):
>
> Are you saying that within the \< and \> of an HTML tag we MUST use Attribute Binding?

If you want to have any attributes driven by a variable, yes.

Otherwise you just write them as you would with any other HTML/CSS

> [@jbudd](#):
>
> But it does not work in between `style` and `</style>` tags, it gives an error:

So, the `{{ }}` syntax is for anything inside a HTML tag within the context of `<template />`

We don’t currently support injection of variables into the `<style />` tags. We do have an [issue](https://github.com/FlowFuse/node-red-dashboard/issues/1065) opened for it, and hope to address it asap.

> [@jbudd](#):
>
> Can we use a message property to set a CSS variable

You can, but because we don’t currently support the injection inside `<style>`, you need to do it inside a `:style` attribute on anything inside your `<template />`

I will echo Steve's comments too, yes, UI Template isn't easy/intuitive for non-technical people, but it is there as an advanced use case whereby a user has complete control by accessing the raw code directly.

---

<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 09:27 UTC](https://discourse.nodered.org/t/simple-ui-template-mustaches/90406/8 "2024-09-24T09:27:29Z")

</div>

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