# Mustache syntax in Dashboard-2

**URL:** <https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 June 2024 21:06 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868 "2024-06-22T21:06:50Z")\
**Posts on this page:** 10\
**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:** [22 June 2024 21:06 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/1 "2024-06-22T21:06:50Z")

</div>

I have just started to look again at the flowfuse dashboard.

It seems that mustache syntax is not supported - at least not in the gauge widget?

So how can I replicate the old (Angular?) dashboard settings like `{{value | number:2}}` or `{{msg.label}}`?

---

<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:** [23 June 2024 05:41 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/2 "2024-06-23T05:41:41Z")

</div>

For `msg.label` your best option is the "change" node just before the gauge, set `msg.label` to `msg.payload`

For the rounding, also a change node, but using JSONata's `$round` function [(docs)](https://docs.jsonata.org/numeric-functions#:~:text=%24round()&text=Returns%20the%20value%20of%20the,by%20the%20optional%20precision%20parameter.&text=This%20function%20uses%20the%20Round,candidates%20at%20the%20specified%20precision).

It's something we _definitely_ need to improve the usability of, as I'm not a fan of JSONata syntax, but it's something that we haven’t found a reasonable solution for yet

---

<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:** [23 June 2024 07:57 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/3 "2024-06-23T07:57:55Z")

</div>

Hi @joepavitt, I think you are suggesting that the gauge node pays attention to the value of msg.label.

If the widget "Label" field has a value "Battery" or "{label}" that value is displayed verbatim.  
But if I leave it blank and give msg.label a name, nothing is displayed. In fact the space it previously occupied is collapsed so that the widget height is reduced.

A composite image to show what I'm talking about:

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

So how to use msg.label?

And while that pic is on screen, what's going on with the vast empty space above and below the gauge (and below the label)?

This gauge is size auto, it's in a group whose size is 2x1 [sic], there are no other widgets in the group.

Apologies if these questions have been covered before, I've not been following Dashboard 2 in the forum for a while.

---

<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:** [23 June 2024 08:10 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/4 "2024-06-23T08:10:11Z")

</div>

> [@jbudd](#):
>
> I think you are suggesting that the gauge node pays attention to the value of msg.label.

Sorry, mis-understood on my part. The `label` is not currently formattable, only plain text is supported via input of the text field. We're [working our way through dynamic properties as we speak](https://github.com/FlowFuse/node-red-dashboard/issues/833), and gauge is in that list which would enable support for `msg.ui_update.label` injections.

> [@jbudd](#):
>
> And while that pic is on screen, what's going on with the vast empty space above and below the gauge (and below the label)?

What version of Dashboard do you have here? We put in a lot of fixes for gauge sizing around `1.7.0` (ish), so i would be expecting it to be tighter around the content of the gauge. Previously, we set a minimum height (as a `height` of 1 makes the gauge render incredibly small). As such, it's advised to set a gauge height of at least `3` (in the more recent releases)

---

<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:** [23 June 2024 08:10 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/5 "2024-06-23T08:10:48Z")

</div>

> [@jbudd](#):
>
> Apologies if these questions have been covered before, I've not been following Dashboard 2 in the forum for a while.

Ask as many questions as you need to, not on you to keep up to date with forum traffic. It's on us to make sure documentation and UX is clear enough that you don't need to ask questions!

---

<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:** [23 June 2024 08:33 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/6 "2024-06-23T08:33:46Z")

</div>

> [@joepavitt](#):
>
> What version of Dashboard do you have here?

I just updated from 1.11 to 1.12 on NR 4, I don't see any difference in the gauge.

> [@joepavitt](#):
>
> As such, it's advised to set a gauge height of at least `3` (in the more recent releases)

Well this is rather perplexing. If I change the gauge size from auto to 2x3 (which looks distinctly tall and thin in the config)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/848d7cb6dde553cf795417b95709206245938f3a.png)  
then the group suddenly becomes almost square.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/ca2f636a342bc649708c370947eb9aa4d6a48531.png)

Does that imply that widget size auto is not working properly?

I have looked at the discussion you linked above and see that dynamic properties are work in progress.  
When implemented, won't the (eg) label field collapsing when it has no value result in jittery dashboards as properties change between a value and blank?

---

<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:** [23 June 2024 10:52 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/7 "2024-06-23T10:52:07Z")

</div>

> [@jbudd](#):
>
> Does that imply that widget size auto is not working properly?

Not really. With `auto`, it will `auto` fill the width, and I think (from memory) I then have a minimum height defined. Because the width is narrower than that min-height in this case, it renders centrally. A smarter way of doing `auto` would be to always stay square (or 2 x 1 for the cause of half gauge).

> [@jbudd](#):
>
> When implemented, won't the (eg) label field collapsing when it has no value result in jittery dashboards as properties change between a value and blank?

Yes, which is why I hadn't included it from the get-go, but it's been requested by the community more than once, so it's difficult to ignore.

> [@jbudd](#):
>
> If I change the gauge size from auto to 2x3 (which looks distinctly tall and thin in the config)

Sizing in D2.0 is a bit tricky. We introduced the new concept of "Layouts", and the most popular (and responsive) is "Grid", which judges width as a number of columns on a page, translating to `%`, rather than fixed `px` width. As such, on a narrower screen, 2-wide is narrower than 2-wide on a wider screen, which leads to this `2x2` not being a square.

We do also have plans to "overhaul" sizing in D2.0: [Overhaul group and widget sizing options · Issue #835 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/835)

---

<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:** [23 June 2024 11:09 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/8 "2024-06-23T11:09:24Z")

</div>

> [@joepavitt](#):
>
> With `auto`, it will `auto` fill the width, and I think (from memory) I then have a minimum height defined. Because the width is narrower than that min-height in this case, it renders centrally. A smarter way of doing `auto` would be to always stay square (or 2 x 1 for the cause of half gauge).

OK but the extra top padding introduced by that minimum height seems to be inserted between the label and the gauge, as if the minimum height is applied to the actual gauge not the widget as a whole. (See left hand of picture a couple of posts above).

Since I often find myself struggling to fit everything I want on a single page, I'd say the best "auto" setting is one that fills the width and has only enough extra pixels height to make the widget a integer number of "units" tall (so that widgets in different groups naturally horizontally align). That is based on dashboard 1's layout though so no doubt out of date.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 June 2024 14:45 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/9 "2024-06-23T14:45:46Z")

</div>

> [@jbudd](#):
>
> I'd say the best

This is the issue with pre-defined layouts - there a LOT of differing needs out there. No pre-defined layout set can hope to deal with them all.

---

<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:** [23 July 2024 14:46 UTC](https://discourse.nodered.org/t/mustache-syntax-in-dashboard-2/88868/10 "2024-07-23T14:46:04Z")

</div>

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