# How to put formatted Text on Dashboard

**URL:** <https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016>\
**Category:** Dashboard\
**Created:** [23 July 2023 09:24 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016 "2023-07-23T09:24:55Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 09:24 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/1 "2023-07-23T09:24:55Z")

</div>

I want to write **INSTRUCTIONS** for what things mean when indicators are showing.

Of course the `text` node is the one of choice.

I am just slightly put off because it is so _small_ with the `input` part.  
It will be a fairly extensive bit of text.

Is this the best way?

P.S.  
The text needs to be formatted also.  
So I need lines to be shown as they are _supposed to be_.  
eg:

```auto
LED # Event
7 Machine health / Reboot / IP Events
6 Flow error / NTP error / Alarms
5 MQTT comms failure
4 Tablet power status
3 S5 power status
2 HTC power status ** Now used for S21
1 TEST LED (TimePi CPU load indicator) Plant watering status indicator
0 Heart beat

```

---

<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:** [23 July 2023 09:49 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/2 "2023-07-23T09:49:51Z")

</div>

use a markdown node to convert markdown to html then display that via a template node.

then you can use tables and bold, itaclics, code - exactily like you do in this forum

### basics

`*italic text*` == _italic text_

` **bold text** ` == **bold text**

``inline code`` == `inline code`

  

### multiline code

#### markdown

```  
msg.payload = "hello"  
return msg  
```

#### rendered

```auto
msg.payload = "hello"
return msg

```

  

### table

#### markdown

```
| LED # | Event |
| - | - |
|7| Machine health / Reboot / IP Events|
|6| Flow error / NTP error / Alarms|
```

#### rendered

| LED # | Event |
| --- | --- |
| 7 | Machine health / Reboot / IP Events |
| 6 | Flow error / NTP error / Alarms |

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 09:51 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/3 "2023-07-23T09:51:46Z")

</div>

Thanks, but I may need a bit more of an example of the text.....

And.... Sorry.... in what node do I _make_ this text? `function`?

Ok, sorry...

`markdown`.

Can't find it. Not standard - yes?  
If yes: There are quite a few _flavours_ of it. Which one?

---

<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:** [23 July 2023 09:55 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/4 "2023-07-23T09:55:14Z")

</div>

> [@Trying\_to\_learn](#):
>
> And.... Sorry.... in what node do I _make_ this text? `function`?

How do you generate this text right now?

If it is hard coded table, then just update the hardcoded code to include markdown formatting.

If the text is generated "somewhere", then modify that to include formatting.

> [@Trying\_to\_learn](#):
>
> Can't find it. Not standard - yes?

correct.

> [@Steve-Mcl](#):
>
> use a markdown node

should have been more explicit - "install/use a markdown node from the library - one that converts markdown strings to HTML"

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 09:58 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/5 "2023-07-23T09:58:03Z")

</div>

the text is just a _table_ to tell me what LED means what.

Which `markdown` node did you use?  
When I look - as said: There are quite a few _flavours_ of it.

Now it is just text that I have in a `comment` node.  
But that is little good if an LED comes on and I can't remember what it means.  
Then I have to load the editor and open the `comment` node to find out what means what.

So I want to put that in/on a _table_ on the dashboard so I can see it from a web point of view.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 10:12 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/6 "2023-07-23T10:12:41Z")

</div>

I downloaded and installed one, but it doesn't allow text input.

Could you - please - tell me which one you used?

As soon as I put a `new line` in the text, the `function` node throws an error at me for the structure.

So I don't know how to construct the multiple lines.

---

<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:** [23 July 2023 10:17 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/7 "2023-07-23T10:17:09Z")

</div>

I havent used any.

But i know that [node-red-node-markdown (node) - Node-RED](https://flows.nodered.org/node/node-red-node-markdown) will take any makdown from `msg.payload` and return the rendered HTML - which you can use to populate a ui-template.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 10:19 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/8 "2023-07-23T10:19:30Z")

</div>

Again: thanks.

Could you maybe post an example of the code.

A basic 3 line bit of text.

An `inject`, `function` (for the message) the `markdown` node and the output node.  
The `ui-template` node.... Is that the one that displays the message?

P.S.  
That is the node I chose, so that's good.

---

<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:** [23 July 2023 10:33 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/9 "2023-07-23T10:33:02Z")

</div>

It really was as easy as I said.

msg.payload --\> markdown node --\> template.

You didnt even need to modify the markdown node or the template.

* * *

### flow

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/1189881a3dfe58b3307abf0e0d44757b39f517ec.png)

````auto
[{"id":"f4977a3a93b687b9","type":"inject","z":"6e46a349d744ceaa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":360,"wires":[["21f6e9c54ce6aa06"]]},{"id":"21f6e9c54ce6aa06","type":"template","z":"6e46a349d744ceaa","name":"some static markdown","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"| LED # | Event |\n| :- | :- |\n|7|Machine health / Reboot / IP Events|\n|6|Flow error / NTP error / Alarms|\n|5|MQTT comms failure|\n|4|Tablet power status|\n|3|S5 power status|\n|2|HTC power status **Now used for S21|\n|1|TEST LED (TimePi CPU load indicator) Plant watering status indicator|\n|0|Heart beat|","output":"str","x":340,"y":360,"wires":[["84296c512740e13d","5802bb7dc4a27a67"]]},{"id":"84296c512740e13d","type":"markdown","z":"6e46a349d744ceaa","name":"","x":190,"y":420,"wires":[["aa45155ecf920aca","3d32e9fdcc21eb1e"]]},{"id":"aa45155ecf920aca","type":"debug","z":"6e46a349d744ceaa","name":"rendered","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":380,"y":480,"wires":[]},{"id":"3d32e9fdcc21eb1e","type":"ui_template","z":"6e46a349d744ceaa","group":"da0a88142730741b","name":"Table","order":8,"width":"12","height":"9","format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<style>\n table {\n border-collapse: collapse;\n font-family: Tahoma, Geneva, sans-serif;\n }\n table td {\n padding: 15px;\n }\n table thead td {\n background-color: #54585d;\n color: #ffffff;\n font-weight: bold;\n font-size: 13px;\n border: 1px solid #54585d;\n }\n table tbody td {\n color: #636363;\n border: 1px solid #dddfe1;\n }\n table tbody tr {\n background-color: #f9fafb;\n }\n table tbody tr:nth-child(odd) {\n background-color: #ffffff;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":420,"wires":[[]]},{"id":"5802bb7dc4a27a67","type":"debug","z":"6e46a349d744ceaa","name":"raw markdown","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":580,"y":360,"wires":[]},{"id":"86d6a8cfac496b83","type":"template","z":"6e46a349d744ceaa","name":"some static markdown","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"```\nLED # Event\n7 Machine health / Reboot / IP Events\n6 Flow error / NTP error / Alarms\n5 MQTT comms failure\n4 Tablet power status\n3 S5 power status\n2 HTC power status** Now used for S21\n1 TEST LED (TimePi CPU load indicator) Plant watering status indicator\n0 Heart beat\n```","output":"str","x":340,"y":560,"wires":[["c73cff3238ccf17e","606c745dbf2e396f"]]},{"id":"c73cff3238ccf17e","type":"markdown","z":"6e46a349d744ceaa","name":"","x":190,"y":620,"wires":[["76d5060bd3760614","56daaafe09cb47f3"]]},{"id":"76d5060bd3760614","type":"ui_template","z":"6e46a349d744ceaa","group":"da0a88142730741b","name":"code block","order":8,"width":"12","height":"5","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":620,"wires":[[]]},{"id":"0d736e43bb17f23a","type":"inject","z":"6e46a349d744ceaa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":170,"y":560,"wires":[["86d6a8cfac496b83"]]},{"id":"606c745dbf2e396f","type":"debug","z":"6e46a349d744ceaa","name":"raw markdown","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":560,"wires":[]},{"id":"56daaafe09cb47f3","type":"debug","z":"6e46a349d744ceaa","name":"rendered","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":380,"y":680,"wires":[]},{"id":"da0a88142730741b","type":"ui_group","name":"Default","tab":"c32ef9de44166c12","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"c32ef9de44166c12","type":"ui_tab","name":"Markdown Demo","icon":"dashboard","disabled":false,"hidden":false}]

````

### output

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 10:36 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/10 "2023-07-23T10:36:14Z")

</div>

What was _killing me_ was I didn't think to use the `template` node to construct the initial message.

I'll post this now and reply when I get the `Ah ha!` moment.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 July 2023 10:41 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/11 "2023-07-23T10:41:44Z")

</div>

Thanks.

Alas I will admit there is a bit more _trickery_ in there than I understand.  
No problems.

I'll sit and try to learn what it all means.  
(The `ui-template` node code.)

---

<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:** [6 August 2023 10:41 UTC](https://discourse.nodered.org/t/how-to-put-formatted-text-on-dashboard/80016/12 "2023-08-06T10:41:49Z")

</div>

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