# Suffix for text output

**URL:** <https://discourse.nodered.org/t/suffix-for-text-output/89879>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [30 July 2024 12:36 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879 "2024-07-30T12:36:44Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikahaller](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mikahaller](https://discourse.nodered.org/u/mikahaller)\
**Post date:** [30 July 2024 12:36 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/1 "2024-07-30T12:36:44Z")

</div>

For dashboard 1 i could just edit the value format but this is not possible anymore for the text output in dashboard 2. Is there a simple way i don't see?  
I would like to add dimensions after the values, e.g. "value" °C

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 July 2024 12:41 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/2 "2024-07-30T12:41:43Z")

</div>

Edit:

> [@Insert units to a field on dashboard text](https://discourse.nodered.org/t/insert-units-to-a-field-on-dashboard-text/89794/4):
>
> Hi @AnakinO7 welcome to the forums. In core Node-RED, there is a "template" node (the orange one, not ui-template). It allows you to combine incoming messages and message properties, with text, for example you could write: {{ msg.payload }}°C You could then wire this template to the ui-text node. When passed to the text node, it will render with the °C units.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [30 July 2024 12:47 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/3 "2024-07-30T12:47:04Z")

</div>

@smanjunath211 I believe @joepavitt is talking about the standard template node in that post, not ui-template.

---

<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:** [30 July 2024 12:58 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/4 "2024-07-30T12:58:22Z")

</div>

Indeed I am - I will add this to the `ui-text` documentation explicitly as the [only example we have now](https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#rendering-msg-content) covers rendering a link, but the method is the same

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 July 2024 13:03 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/5 "2024-07-30T13:03:23Z")

</div>

I'd go for CSS option to gain full control over the appearance of the suffix.

So you add a class to the text widget:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1269f8330e4ea940fa543fc3ec2cedb07cf3dc1c.png)

And a bit of css to get it done:

```auto
.temperature-field .nrdb-ui-text-value::after {
    content: "°C";
    padding-left: 0.125rem;
    vertical-align: super;
    font-size: smaller;
    line-height: initial;
}

```

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

Make a class for all types of suffixes you may need, put them in one ui\_template

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 July 2024 13:13 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/6 "2024-07-30T13:13:05Z")

</div>

sorry for jumping the gun.

---

<div class="post-metadata">

**Author:** ![mikahaller](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@mikahaller](https://discourse.nodered.org/u/mikahaller)\
**Post date:** [30 July 2024 13:15 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/7 "2024-07-30T13:15:02Z")

</div>

Using CSS option looks nice especially as i need similar function elsewhere.  
But where would i create CSS class?

---

<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:** [30 July 2024 13:16 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/8 "2024-07-30T13:16:56Z")

</div>

CSS can be defined in a UI Template node with type "CSS (All Pages)" - [Docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

---

<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:** [30 July 2024 13:21 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/9 "2024-07-30T13:21:28Z")

</div>

Isn't it a bit of an anti-pattern to include the text to display in CSS? It would certainly be tricky for someone looking at the flow in a couple of years time to work out where the °C comes from.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 July 2024 13:24 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/10 "2024-07-30T13:24:08Z")

</div>

As the definition says:

In CSS, **`::after`** creates a [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) that is the last child of the selected element. It is often used to add cosmetic content to an element with the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property. It is inline by default.

Can't see any anti pattern here

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 July 2024 13:44 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/11 "2024-07-30T13:44:37Z")

</div>

> [@Colin](#):
>
> looking at the flow in a couple of years time to work out where the °C comes from

This stays always a case even without CSS involved. To avoid this kind of issues i think the best thing is to name your things so that they say what they are or what they do.

So instead of the `temperature-field` maybe then `adds-celsius-to-value-field` or something like that. It is different for everyone what makes sense and what is not. No way to predict

---

<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:** [30 July 2024 13:56 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/12 "2024-07-30T13:56:12Z")

</div>

> [@hotNipi](#):
>
> > [@Colin](#):
> >
> > looking at the flow in a couple of years time to work out where the °C comes from
> 
> This stays always a case even without CSS involved.

I think it is pretty obvious if the display node is preceded by a Template node containing  
`{{ msg.payload }}°C`

If the suffix is defined in a ui\_template it is not nearly so obvious. Particularly as I thought it was good practice to put all the CSS in one ui\_template, so it won't even be on the same flow tab.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 July 2024 14:02 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/13 "2024-07-30T14:02:35Z")

</div>

> [@Colin](#):
>
> preceded by a Template node containing  
> `{{ msg.payload }}°C`
> 
> ...
> 
> Particularly as I thought it was good practice to put all the CSS in one ui\_template

This is so true that I can't even argue more.

But what is nice - there's many ways to do things.

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

---

<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:** [30 July 2024 14:04 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/14 "2024-07-30T14:04:07Z")

</div>

> [@Colin](#):
>
> {{ msg.payload }}°C

Shouldn't that be  
`{{ payload }}°C`?

---

<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:** [30 July 2024 14:10 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/15 "2024-07-30T14:10:05Z")

</div>

It should - and we now have an example in the documentation too: [Text ui-text | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#adding-prefixes-suffixes)

---

<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:** [30 July 2024 14:12 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/16 "2024-07-30T14:12:18Z")

</div>

> [@jbudd](#):
>
> Shouldn't that be  
> `{{ payload }}°C`?

Yes, I thought either worked but apparently not.

Unfortunately if you want to show `{{payload.toFixed(2)}} °C`, which was also possible in the D1 nodes, and is very often required, then you have to use a function node or JSONata I think.

@hotNipi is `toFixed(2)` possible in JSONata?

---

<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:** [30 July 2024 14:13 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/17 "2024-07-30T14:13:04Z")

</div>

Sorry, I edited my post after you replied.

I'm also confused that the ui-text node config does not have a field where you can specify what payload you want it to emit.  
Isn't that rather odd?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [30 July 2024 14:16 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/18 "2024-07-30T14:16:21Z")

</div>

> [@Colin](#):
>
> is `toFixed(2)` possible in JSONata?

Yes [$formatNumber()](https://docs.jsonata.org/numeric-functions#formatnumber) You can even add the suffix in the format.

---

<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:** [30 July 2024 14:18 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/19 "2024-07-30T14:18:37Z")

</div>

> [@E1cid](#):
>
> Yes [Numeric functions · JSONata](https://docs.jsonata.org/numeric-functions#formatnumber)

Yes, of course. I knew that. So in fact the Change node is probably the best way of solving the general problem. @joepavitt perhaps it would be useful to include an example of that too.

---

<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:** [30 July 2024 14:22 UTC](https://discourse.nodered.org/t/suffix-for-text-output/89879/20 "2024-07-30T14:22:15Z")

</div>

> [@Colin](#):
>
> Unfortunately if you want to show `{{payload.toFixed(2)}} °C`, which was also possible in the D1 nodes, and is very often required, then you have to use a function node or JSONata I think.

~~Although you wouldn't choose an environment variable to define your temperature units, you don't seem to be able to use a variable in the template node either, the reference to the variable is rendered as a string literal ($HOSTNAME does have a value in this NR setup):~~

Edit: I RTFM 😊

[Next page](https://discourse.nodered.org/t/suffix-for-text-output/89879.md?page=2)