Suffix for text output

Dashboard
1

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

2

Edit:

3

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

1 Like
4

Indeed I am - I will add this to the ui-text documentation explicitly as the only example we have now covers rendering a link, but the method is the same

5

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

And a bit of css to get it done:

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

image

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

image
image726×908 32.3 KB

3 Likes
6

sorry for jumping the gun.

7

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

8

CSS can be defined in a UI Template node with type "CSS (All Pages)" - Docs

1 Like
9

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.

10

As the definition says:

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Can't see any anti pattern here

11

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

12

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.

13

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

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

image

14

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

1 Like
15

It should - and we now have an example in the documentation too: Text ui-text | Node-RED Dashboard 2.0

1 Like
16

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?

17

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?

18

Yes $formatNumber() You can even add the suffix in the format.

19

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.

1 Like
20

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 :blush: