Demo - two flows to same table with different headers, data and styling

[Zenofmud]

Hi all,

Here is a little demo of having two paths to the same ui-template but producing a table where the row titles, data and CSS are all different. Hopefully this will be of use to someone.

Paul

[{"id":"3eb621f2.5c95de","type":"ui_template","z":"64a1c1e4.9bf3c","group":"568dc430.3b34a4","name":"","order":0,"width":"6","height":"9","format":"<style>\n    {{msg.style}}\n</style>\n\n<table>\n  <tr><td>{{msg.col1_header}}</td><td>{{msg.col2_header}}</td></tr>\n  <tr ng-repeat=\"obj in msg.payload\">\n    <td>{{ obj.name || obj.First}}</td>\n    <td>{{ obj.ip || obj.Last }}</td>\n  </tr>\n</table>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":420,"y":440,"wires":[["c7f2b9b6.88906"]]},{"id":"844cd922.e582d","type":"template","z":"64a1c1e4.9bf3c","name":"Setup data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[\n    {\"name\": \"Computer 1\", \"ip\": \"{{payload}}\" },\n    {\"name\": \"Computer 2\", \"ip\": \"6.3.6.6\"},\n    {\"name\": \"Computer 3\", \"ip\": \"6.7.6.6\"},\n    {\"name\": \"Computer 4\", \"ip\": \"6.4.6.6\"}\n]\n    ","output":"str","x":130,"y":160,"wires":[["38383618.d6ed22","b84b9408.d1ec48"]]},{"id":"4f398bfe.729bec","type":"inject","z":"64a1c1e4.9bf3c","name":"Insert IP","topic":"","payload":"192.168.44.231","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":120,"y":100,"wires":[["844cd922.e582d"]]},{"id":"7dc82837.0c9fc","type":"json","z":"64a1c1e4.9bf3c","name":"","property":"payload","action":"","pretty":false,"x":110,"y":280,"wires":[["30ba4a86.e1b87e","459fb910.43f288"]]},{"id":"30ba4a86.e1b87e","type":"template","z":"64a1c1e4.9bf3c","name":"css table 1","field":"style","fieldType":"msg","format":"css","syntax":"mustache","template":"table {\n    color: #333;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid transparent;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #F1F1F1;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #FEFEFE;\n}\n\n/* Hover cell effect! */\n\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n","output":"str","x":130,"y":340,"wires":[["3eb621f2.5c95de","485a718.3f2de9"]]},{"id":"38383618.d6ed22","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":160,"wires":[]},{"id":"459fb910.43f288","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":280,"wires":[]},{"id":"485a718.3f2de9","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":340,"wires":[]},{"id":"c7f2b9b6.88906","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":430,"y":520,"wires":[]},{"id":"46db2fd2.2b3b78","type":"template","z":"64a1c1e4.9bf3c","name":"Setup data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[\n    {\"First\": \"John\",  \"Last\": \"{{payload}}\" },\n    {\"First\": \"Tom\",  \"Last\": \"Jones\"},\n    {\"First\": \"Sue\", \"Last\": \"Smith\"},\n    {\"First\": \"Mary\",  \"Last\": \"Lamb\"}\n]\n    ","output":"str","x":530,"y":160,"wires":[["74789d5c.e4086c","7d7c3169.26bb6"]]},{"id":"95904897.e4e188","type":"inject","z":"64a1c1e4.9bf3c","name":"insert name","topic":"","payload":"Doe","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":530,"y":100,"wires":[["46db2fd2.2b3b78"]]},{"id":"66bb1029.17eea8","type":"json","z":"64a1c1e4.9bf3c","name":"","property":"payload","action":"","pretty":false,"x":510,"y":280,"wires":[["ead38fa.69249f","e3a28d2.e427b7"]]},{"id":"e3a28d2.e427b7","type":"template","z":"64a1c1e4.9bf3c","name":"css table 2","field":"style","fieldType":"msg","format":"css","syntax":"mustache","template":"table {\n    color: #000;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid blue;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #ffb4b4;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #666;\n}\n\ntr:nth-child(1) td {\n    background: #FEFEFE;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr td:hover {\n    background: #FEFEFE;\n    color: #000;\n}","output":"str","x":530,"y":340,"wires":[["c82af210.713158","3eb621f2.5c95de"]]},{"id":"74789d5c.e4086c","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":160,"wires":[]},{"id":"ead38fa.69249f","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":280,"wires":[]},{"id":"c82af210.713158","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":340,"wires":[]},{"id":"7d7c3169.26bb6","type":"change","z":"64a1c1e4.9bf3c","name":"Build Version 2 Column Headers","rules":[{"t":"set","p":"col1_header","pt":"msg","to":"First","tot":"str"},{"t":"set","p":"col2_header","pt":"msg","to":"Last","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":220,"wires":[["66bb1029.17eea8"]]},{"id":"b84b9408.d1ec48","type":"change","z":"64a1c1e4.9bf3c","name":"Build Version 1 Column Headers","rules":[{"t":"set","p":"col1_header","pt":"msg","to":"Name","tot":"str"},{"t":"set","p":"col2_header","pt":"msg","to":"IP","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":190,"y":220,"wires":[["7dc82837.0c9fc"]]},{"id":"9d7edcfd.21331","type":"comment","z":"64a1c1e4.9bf3c","name":"Demo - two flows to same table with different headers, data and styling","info":"","x":430,"y":40,"wires":[]},{"id":"568dc430.3b34a4","type":"ui_group","z":"64a1c1e4.9bf3c","name":"Test","tab":"96828dc7.620c5","disp":true,"width":"6"},{"id":"96828dc7.620c5","type":"ui_tab","z":"64a1c1e4.9bf3c","name":"Tableau","icon":"dashboard"}]

[Dave C-J]

Nice - feel free to add to the flows.nodered.org site so we can easily reference it.

[Zenofmud]

Done - can you add images to the gist? I couldn’t figure out how to.

On Apr 6, 2018, at 8:33 AM, Dave C-J <dce...@gmail.com> wrote:

Nice - feel free to add to the flows.nodered.org site so we can easily reference it.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CACXWFw%2BYxqaZfRc5GWc3a%3Duux7etxt%3DD-LhZ3cdmCcqvzN3%3Dgw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Dave C-J]

not without pain and grief as far as I can tell... :-(

https://gist.github.com/remarkablemark/feff40b0a522f0c41c4eff0b77ea1d47