Popup Array of Data

I am looking for a way to have a popup show my msg.payload that is an array of data. I tried the notification node but it did not show my data in a list format but in one line.

I am looking to save space on the dashboard and thinking a popup would work best. Any suggestions?

Use Split node and Join node to manipulate your data array into string separated with newline character before sending it to be payload of Notification. Notification however does not show multiple lines. It does it magic to join lines into one and makes itself wider.

[{"id":"8c90b3f2.5949","type":"split","z":"18c83e13.bcdd42","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":560,"y":940,"wires":[["c296e15f.a2cb1"]]},{"id":"c296e15f.a2cb1","type":"join","z":"18c83e13.bcdd42","name":"","mode":"custom","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":700,"y":940,"wires":[["19900b90.8eef94"]]},{"id":"168d41d8.894a6e","type":"inject","z":"18c83e13.bcdd42","name":"","topic":"","payload":"[123,456,789]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":940,"wires":[["8c90b3f2.5949"]]},{"id":"19900b90.8eef94","type":"debug","z":"18c83e13.bcdd42","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":870,"y":940,"wires":[]}]

The notification will take minimal html so just use <br/> tags or tables or whatever - maybe use a normal (not ui_) template node to help iterate over data

[{"id":"b886bc86.a7bf6","type":"ui_toast","z":"d511095d.512808","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"","topic":"","name":"","x":530,"y":940,"wires":[[]]},{"id":"2c97b49d.73a86c","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":940,"wires":[["2fdb1682.cda4ba"]]},{"id":"2fdb1682.cda4ba","type":"function","z":"d511095d.512808","name":"","func":"msg.payload = '<table border=1><tr><td>This</td><td>is</td></tr><tr><td>a</td><td>table</td></tr></table>';\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":940,"wires":[["b886bc86.a7bf6"]]}]

If your msg.payload is already an array, you can use the JS Array.join(sep) to create (as Dave suggests) an html string with breaks, to be shown in the Notification area:

var msg.payload = msg.payload.join("<br>");
return msg;

Of course, if your payload ever arrives as a non-array data type, this will throw an exception.

Thank you for the suggestions. We were able to get this to work using the notification and line breaks.

This thread is one of the top 'popup' search results.
Not sure if things have changed or not, but I can't get it to work as is 'solved'.

Here is my flow:

[{"id":"527679da.362dc8","type":"inject","z":"40353355.fa6ecc","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"AES:AE0587GES:502.70042B!33F/AMCTACC.INI01140312INITIALIZERCH7042MC0042PBC03810E315RODNRJTY140500/","payloadType":"str","x":320,"y":400,"wires":[["674b0eec.40193"]]},{"id":"674b0eec.40193","type":"function","z":"40353355.fa6ecc","name":"","func":"msg.payload = msg.payload.replace(/(.{1,20})/g, '$1<br/>');\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":400,"wires":[["30e1890d.168d56"]]},{"id":"30e1890d.168d56","type":"ui_toast","z":"40353355.fa6ecc","position":"top right","displayTime":"10","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":false,"topic":"","name":"","x":670,"y":400,"wires":[]}]

I have a string that I want to show with line breaks in the notification.
I have tied a bunch of different line break options, but it does not hide them and does not line break.

image

'You have a problem.
Regex is the answer
Now you have two problems'

Thanls.

1 Like