Example of a scrolling HTML Table based on incoming JSON objects

An example of a scrolling html, from incoming messages. I simulate the messages with 15 Inject nodes, as we want to show how the messages can scroll, with the newest on top, and only showing the last 10 messages.

How to Use it

• Import the flow, Deploy it.
• On the Flow test, you have 15 messages, in Inject nodes.
• Your Dashboard will also have a Test Messages tab, that hosts the Table.
• By injecting each message, it will add a timestamp, and show it at the top of the table on Dashboard.
• It will only swhow the last 10 messages.

Changes:

• 13.01.2019 - Changed the timestamp in the html table to a time date, in this format: hh:mm dd.mm.yyyy, this was done in node add ts, add your own timezone specifics.

Copy[{"id":"cdcecbe2.6d735","type":"inject","z":"bb33b94b.4ac1d","name":"msg1","topic":"","payload":"{\"msg\":\"Message one, bla bla\",\"confirm\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":120,"wires":[["99024603.3601e8"]]},{"id":"99024603.3601e8","type":"function","z":"bb33b94b.4ac1d","name":"add ts","func":"js_obj      = msg.payload;\n\nvar d       = new Date();\nvar jstime  = d.getTime();\nvar time    = (d.getHours()) + \":\" + d.getMinutes();\nvar date    = d.getDate() + \".\" + (d.getMonth()+1) + \".\" + (d.getFullYear());\n\njs_obj.timestamp = jstime;\njs_obj.timedate  = time + ' ' + date ;\n\nmsg.payload = js_obj ;\n\nreturn msg;\n\n","outputs":1,"noerr":0,"x":310,"y":340,"wires":[["7d8d17fe.98adc"]]},{"id":"3c80930.d411eee","type":"inject","z":"bb33b94b.4ac1d","name":"msg2","topic":"","payload":"{\"msg\":\"Message two, blip bloep\",\"confirm\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":160,"wires":[["99024603.3601e8"]]},{"id":"a234d77e.94cd78","type":"inject","z":"bb33b94b.4ac1d","name":"msg3","topic":"","payload":"{\"msg\":\"Message three, cat fish\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":200,"wires":[["99024603.3601e8"]]},{"id":"47baa34f.8a66d4","type":"inject","z":"bb33b94b.4ac1d","name":"msg4","topic":"","payload":"{\"msg\":\"Message four, send it !\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":240,"wires":[["99024603.3601e8"]]},{"id":"665c55eb.395164","type":"inject","z":"bb33b94b.4ac1d","name":"msg5","topic":"","payload":"{\"msg\":\"Message five, my crazy\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":280,"wires":[["99024603.3601e8"]]},{"id":"c561b43c.c8d868","type":"inject","z":"bb33b94b.4ac1d","name":"msg6","topic":"","payload":"{\"msg\":\"Message six, whoop whoop !\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":320,"wires":[["99024603.3601e8"]]},{"id":"759b7950.d10cc","type":"inject","z":"bb33b94b.4ac1d","name":"msg7","topic":"","payload":"{\"msg\":\"Message seven\",\"confirm\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":360,"wires":[["99024603.3601e8"]]},{"id":"45a36c23.5afdec","type":"inject","z":"bb33b94b.4ac1d","name":"msg8","topic":"","payload":"{\"msg\":\"Message 8, whats up monkey?\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":400,"wires":[["99024603.3601e8"]]},{"id":"5ab58b1.12dcbf4","type":"inject","z":"bb33b94b.4ac1d","name":"msg9","topic":"","payload":"{\"msg\":\"Message 9, fly away\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":440,"wires":[["99024603.3601e8"]]},{"id":"874b1268.c86078","type":"inject","z":"bb33b94b.4ac1d","name":"msg10","topic":"","payload":"{\"msg\":\"Message 10, diving for gold\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":480,"wires":[["99024603.3601e8"]]},{"id":"38e0e183.62f526","type":"inject","z":"bb33b94b.4ac1d","name":"msg11","topic":"","payload":"{\"msg\":\"Message 11, flying fish\",\"confirm\":1}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":520,"wires":[["99024603.3601e8"]]},{"id":"e50a91a3.3c26e8","type":"inject","z":"bb33b94b.4ac1d","name":"msg12","topic":"","payload":"{\"msg\":\"Message 12, octopus\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":560,"wires":[["99024603.3601e8"]]},{"id":"25db79c3.7807c6","type":"inject","z":"bb33b94b.4ac1d","name":"msg13","topic":"","payload":"{\"msg\":\"Message 13, swim away\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":600,"wires":[["99024603.3601e8"]]},{"id":"91364718.97ddb","type":"inject","z":"bb33b94b.4ac1d","name":"msg14","topic":"","payload":"{\"msg\":\"Message 14, warra warra\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":640,"wires":[["99024603.3601e8"]]},{"id":"4b2dfa38.a37f24","type":"inject","z":"bb33b94b.4ac1d","name":"msg15","topic":"","payload":"{\"msg\":\"Message 15, fish paste\",\"confirm\":0}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":680,"wires":[["99024603.3601e8"]]},{"id":"f6cbee6d.01b758","type":"template","z":"bb33b94b.4ac1d","name":"html","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<table border=\"1\">\n    \n    \n    <thead>\n        <tr>\n            <th colspan=\"3\">{{topic}}</th>\n        </tr>\n    </thead>\n    \n    \n    <tr>\n        <th>Message</th>\n        <th>Confirm</th>\n        <th>Time & Date</th>\n\n    </tr>\n    {{#payload}}\n        <tr class=\"\">\n            <td>{{msg}}</td>            \n            <td>{{confirm}}</td>\n            <td>{{timedate}}</td>\n        </tr>\n    {{/payload}}\n</table>\n","output":"str","x":830,"y":400,"wires":[["3e0498a5.b8f04"]]},{"id":"3e0498a5.b8f04","type":"ui_template","z":"bb33b94b.4ac1d","group":"2dee2e04.7cf00a","name":"Scrolling Messages","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\" height=\"500\" style=\"height: 350px;\"></div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":930,"y":340,"wires":[[]]},{"id":"7d8d17fe.98adc","type":"function","z":"bb33b94b.4ac1d","name":"Cr/Upd msg_events","func":"var msg_obj       = msg.payload ;\nvar arr_msgs = flow.get(\"msg_events\", 'memoryOnly');\n\nif (arr_msgs===undefined ) {\n    // Create an empty array if it does not exist yet\n    arr_msgs = [];\n    //arr_msgs.push(msg_obj) ; \n        if (msg_obj !== \"1\") {\n            arr_msgs.push(msg_obj);\n            flow.set(\"msg_events\",arr_msgs, 'memoryOnly');\n        }\n    \n//    return msg ;\n\n} else {\n        // This is a new user, save and return in the first port\n        if (msg_obj !== \"1\") {\n            arr_msgs.push(msg_obj);\n            flow.set(\"msg_events\",arr_msgs, 'memoryOnly');\n        }\n} \nmsg.payload = flow.get(\"msg_events\", 'memoryOnly');\nreturn msg;\n","outputs":1,"noerr":0,"x":400,"y":400,"wires":[["c748be29.1c57"]]},{"id":"34fabfbc.b51fd","type":"function","z":"bb33b94b.4ac1d","name":"zap msg_events flow context","func":"var cfg = undefined ;\nflow.set('msg_events', cfg, 'memoryOnly');\n\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":40,"wires":[[]]},{"id":"b057c9f8.ace21","type":"inject","z":"bb33b94b.4ac1d","name":"","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"0.1","x":90,"y":40,"wires":[["34fabfbc.b51fd"]]},{"id":"7311ad45.6cf814","type":"function","z":"bb33b94b.4ac1d","name":"topic & 10","func":"var arr = msg.payload ;\n\nvar i   = 10;\nif(typeof arr === undefined) {\n    return ;\n} else {\n    msg.payload = arr.slice(0, 10);    \n    msg.topic = 'The Last Ten Messages :';\n    return msg;\n}","outputs":1,"noerr":0,"x":690,"y":340,"wires":[["f6cbee6d.01b758"]]},{"id":"c748be29.1c57","type":"change","z":"bb33b94b.4ac1d","name":"sort","rules":[{"t":"set","p":"payload","pt":"msg","to":"($sort(payload,function($l , $r){$l.timestamp < $r.timestamp }) )","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":340,"wires":[["e2cfb5dc.3a532","7311ad45.6cf814"]]},{"id":"e2cfb5dc.3a532","type":"debug","z":"bb33b94b.4ac1d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":910,"y":480,"wires":[]},{"id":"2dee2e04.7cf00a","type":"ui_group","z":"","name":"Test Messages","tab":"721af69.d130208","disp":true,"width":"9","collapse":false},{"id":"721af69.d130208","type":"ui_tab","z":"","name":"Demo","icon":"dashboard"}]