# Ui template or ui text formated string

**URL:** https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579
**Category:** Dashboard
**Created:** [1 December 2021 14:32 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579 "2021-12-01T14:32:53Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [1 December 2021 14:32 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/1 "2021-12-01T14:32:53Z")

</div>

Hey guys, I have a telegram from smartmeter, and it looks like this when I debug,

 ![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/eab94ccab1b8bf80715dc790eee8a9d353d45d2f.png)

That looks very good. But when I feed this to ui template or ui text, then it looks like this,

![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1c0018691ef43fefb4fe16868752bdf4424046d8.png)

Can anyone tell me, how to keep the format?

---

<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: [1 December 2021 15:32 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/2 "2021-12-01T15:32:55Z")

</div>

You need to replace the new lines with `<br>` tags.

One way is a change node using the regular expression `(?:\r\n|\r|\n)` which replaces DOS \r\n as well as Unix \n  
 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da2902ddb6cef1ed3b366a81c72fdb3ea80f6dd8.jpeg)

---

<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: [1 December 2021 15:33 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/3 "2021-12-01T15:33:03Z")

</div>

You need the display to use a fixed-width font and to retain the line-feeds. In HTML, the easy way to do that is to wrap the text with `<pre>...</pre>`. You can use a template to do that.

---

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [1 December 2021 15:46 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/4 "2021-12-01T15:46:11Z")

</div>

I tried your suggestion,

![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05d481d666c03ed3d83898dd7abbdec5d079c003.png)

But the result wasn't quite good yet....

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

---

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [1 December 2021 15:58 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/5 "2021-12-01T15:58:48Z")

</div>

@TotallyInformation You were right. This is the result,

 ![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2b2f57034f280c0158dde8e67289e1c460e94ec.png)

The fixed-width font was automatically set, by the way.  
Only pitty a little bit that the font was changed, but I can live with that.

---

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [1 December 2021 16:04 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/6 "2021-12-01T16:04:15Z")

</div>

@TotallyInformation and @jbudd , thank you all guys for your help, I appreciate it very much.

---

<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: [1 December 2021 16:06 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/7 "2021-12-01T16:06:48Z")

</div>

Is that output to a template? I tried it with a UI text node.

Anyway of course Julian's answer was better! 😀

---

<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: [1 December 2021 16:12 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/8 "2021-12-01T16:12:47Z")

</div>

You _can_ change the font in Dashboard. Using CSS.

---

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [1 December 2021 17:14 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/9 "2021-12-01T17:14:07Z")

</div>

@TotallyInformation , you were right again. Here is the result,

 ![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a7b261d7f35f11bac3dcc71417c1136afbe427e.png)

I am not very familiar with HTML and CSS but I managed,

![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a724044dc520efb438f773c6170ac3cdf67eea62.png)

---

<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: [2 December 2021 19:23 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/10 "2021-12-02T19:23:50Z")

</div>

> [@henkkas](#):
>
> I am not very familiar with HTML and CSS

That's why the internet was invented 😀

I always have to look stuff up as well.

---

<div class="post-metadata">

### Author: ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)
#### Post date: [3 December 2021 09:32 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/11 "2021-12-03T09:32:24Z")

</div>

@TotallyInformation , indeed, and I learned most of `W3schools`. 😀

---

<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: [2 January 2022 09:33 UTC](https://discourse.nodered.org/t/ui-template-or-ui-text-formated-string/54579/12 "2022-01-02T09:33:05Z")

</div>

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