How can I display every messages in Node-RED Dashboard 2 without them being overwritten by new messages?

[briblort]

Hello everyone,

I am currently working with Node-RED and receive payloads from ChirpStack that contain text messages as strings. I am currently using a text node in the Node-RED dashboard to display these messages. However, the text node only ever shows me the latest message, which is not ideal.

I would like to display the last received messages in the dashboard. It would be great if I could see some sort of history of my messages. Does anyone have any ideas and show me how I could implement this so that the previous message is not always overwritten?

Many thanks in advance for your support !

[TotallyInformation]

You will probably need to use the ui_template node to craft your own output. You will need to append new child entries to a parent element and will probably want to limit the entries to a set number so you don't end up crashing your browser.

[E1cid]

Or you can save the messages to context, and then use that to display the mistory of messages.
e.g.

[{"id":"2578f97fb93bc8c6","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\"message \" & $ceil($random()*100)","payloadType":"jsonata","x":170,"y":4560,"wires":[["6c14e438223505cc"]]},{"id":"6c14e438223505cc","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$append([$$.payload], [$flowContext(\"display_text\")])[[0..4]]","tot":"jsonata"},{"t":"set","p":"display_text","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"$join( $$.payload, \"<br>\")","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":4560,"wires":[["4189ed91221ed19e"]]},{"id":"4189ed91221ed19e","type":"debug","z":"d1395164b4eec73e","name":"Post-Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":570,"y":4580,"wires":[]}]

[briblort]

Thank you for your responses, but I seem to still have some trouble with the template-node...

my flow looks like this:

I used a function node with the following code:

---

var list = context.get("List") || [];
var incoming = Buffer.from(msg.payload.data, 'base64').toString('utf8');

//list.push('{' + '"' + 'colA' + '"' + ':' + incoming + '}');

incoming = incoming + "\n";

list.push(incoming);

/*if (liste.length > 10) {
    liste = liste.slice(1);
}*/

context.set("List", list);

msg.payload = list;
return msg;

/*return {
    devEui: msg.payload.deviceInfo.devEui,
    fPort: msg.payload.fPort,
    payload: list
};*/

---

and for testing I added a text, template and table node.

In the template node I entered following Code:

---

<div>
    <ul>
        <li ng-repeat="item in msg.payload" ng-bind-html="item"></li>
    </ul>
</div>

---

And in the dashboard I only can see the payload from the text-node, from the template I only see the bulletpoint from the ul and from the table-node I see nothing since it can't apperently show the data

Can anyone tell me what I should try to change to get the messages below oneanother... I even tried with "\n" but in the text node it still does'nt see it as an Enter

[E1cid]

Your OG post mentions text node and the title dashboard 2.
Your following post then brings up template node, and then shows html angularjs code from node-red-dashboard (dashboard 1).

All in this is very confusing.

Maybe you should export an minimal example flow to show us what you are attempting to do, and how you are going about it. Please supply input data with your flow.
How to import/export a flow

[briblort]

Hi, I only tried the template Node since the first response suggested to use the template node. I don't care with wich node I get my desired output.

My goal is to get the string messages to be seen in the dashboard that are displayed one below the other.

With the text_node I only could get the string messages to be displayed in one string.

So, I tried with the template and wanted to try a list, but in the dashboard I couldn't see the data - only a bulletpoint.

I want it to be something like that:

• string 1
• string 2
• string 3

... and when string 4 arrives:

• string 1
• string 2
• string 3
• string 4

[E1cid]

You can use newlines and apply css to allow pre formatted white space for a text node.

Or simply do it in a dashboard 2 template node
e.g.

[{"id":"2578f97fb93bc8c6","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\"message \" & $ceil($random()*100)","payloadType":"jsonata","x":170,"y":4540,"wires":[["6c14e438223505cc"]]},{"id":"6c14e438223505cc","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$append([$$.payload], [$flowContext(\"display_text\")])[[0..4]]","tot":"jsonata"},{"t":"set","p":"display_text","pt":"flow","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":" $join( $$.payload, \"\\n\")","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":4540,"wires":[["4189ed91221ed19e","0d9c124d685ae12c"]]},{"id":"4189ed91221ed19e","type":"debug","z":"d1395164b4eec73e","name":"Post-Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":570,"y":4560,"wires":[]},{"id":"0d9c124d685ae12c","type":"ui-template","z":"d1395164b4eec73e","group":"9d83cd8b3d5ee33c","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n    <div>\n        <h2>Messages</h2>\n        <p class=\"my-class\">{{msg.payload}}</p>\n        \n       \n    </div>\n</template>\n\n<style>\n    /* define any styles here - supports raw CSS */\n    .my-class {\n        white-space: pre;\n    }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":4480,"wires":[[]]},{"id":"9d83cd8b3d5ee33c","type":"ui-group","name":"Group1","page":"c694d0ebe0d2b702","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"c694d0ebe0d2b702","type":"ui-page","name":"Page1","ui":"1805777f90e92057","path":"/page1","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

The change node stores the messages and formats the text, it is set to 5 and adds the newline to the top.

[xx_Nexus_xx]

This is my solution for DB1 generating a FIFO buffer and than showing the result in a List-box ..should be easy to migrate to DB2 ...is on my todo list

fifo.json (13.2 KB)

[briblort]

Thank you very much! Now it worked