Need help with template node

Dashboard
1

I have created a template node with tabs and I have integrated a froms inside each tab, but my forms are getting a lot and if I keep adding them to the same template node the code will become a ridiculously large. My question is:

Is there a way to have a multiple template node with the forms and some how use a API or teleport or some other method make them appear in the tabs so I can separate this code little bit. I am starting to loose track of which code was for that form and inside witch tab and all of that

So if there is a method of separating that code little bit it will be helpful

Thank you

2

Are the forms identical?

You could use the new dialog group type to reuse the form on any page.

3

Is there a reason why you're using the Template, and not using the "Tab" layout type, with the in built form widgets?

Tabs: Layout: Tabs | Node-RED Dashboard 2.0

Forms: Form ui-form | Node-RED Dashboard 2.0

4

Yes, it's much more flexible and customizable! The built-in tabs aren't very attractive :smile::smile::smile:, no offense... and they feel too basic for my taste :smile::smile::smile:. The Main template is beautifully designed, easy to work with, and eye-catching — I really love that template node. It's flexible, but my question is how to split the code into different template nodes so they can work together as one. I know you all spent a lot of time building Dashboard 2, but there should be a way to split the code. Hopefully!!!

5

No they are completely different with different functions connected to a different function nodes

6

There are multiple ways of doing this. One example is to break each tab up into its own template node and combine them in the end.

example flow:

[{"id":"c793913fdbe6282e","type":"template","z":"19f6d93a528a7cbd","name":"tab 1","field":"tab1","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n    tab 1\n</div>","output":"str","x":330,"y":340,"wires":[["3efb506152ecb101"]]},{"id":"568551a787a090b6","type":"inject","z":"19f6d93a528a7cbd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":180,"y":340,"wires":[["c793913fdbe6282e"]]},{"id":"e94e8d68651686e1","type":"debug","z":"19f6d93a528a7cbd","name":"debug 654","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":440,"wires":[]},{"id":"3efb506152ecb101","type":"template","z":"19f6d93a528a7cbd","name":"tab 2","field":"tab2","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n    tab 2\n</div>","output":"str","x":330,"y":400,"wires":[["ffbccf7d4090687b"]]},{"id":"87642c406cb2093a","type":"template","z":"19f6d93a528a7cbd","name":"combine","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{{tab1}}}\n{{{tab2}}}\n{{{tab3}}}","output":"str","x":520,"y":440,"wires":[["e94e8d68651686e1"]]},{"id":"ffbccf7d4090687b","type":"template","z":"19f6d93a528a7cbd","name":"tab 3","field":"tab3","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n    tab 3\n</div>","output":"str","x":330,"y":460,"wires":[["87642c406cb2093a"]]}]

Note that the 'combine' template uses triple curly braces {{{ }}} to disable encoding.

7

Actually not this template I mean Dashboard 2 Template node!!!

8

It is hard a bit to maybe see whole picture but if I understand it at least slightly - here is one example how to combine smaller bits into one master template using the teleport

[{"id":"50165225957c11fa","type":"ui-template","z":"50af7128c761b2cb","group":"f4672a59c3c79c7f","page":"","ui":"","name":"master template","order":4,"width":"6","height":"4","head":"","format":"<template>\n<div class=\"master-slot-wrapper\">\n    <div id=\"slot_1\"></div>\n    <div id=\"slot_2\"></div>\n    <div id=\"slot_3\"></div>\n    <div id=\"slot_4\"></div>\n</div>\n    \n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n              \n            }\n        },\n        watch: {\n           \n        },\n        computed: {\n           \n        },\n        methods: {\n          \n        },\n        mounted() {\n            // send event to dedicated event node to notify that master template is mounted\n            // at this point teleporting to here is possible\n            this.$socket.emit('ui-event', 'e152c365e8f8f0e1', {payload:\"master-template-mounted\"})\n        },\n        unmounted() {\n           \n        }\n    }\n</script>\n<style>\n    .master-slot-wrapper{\n        display:grid;\n        grid-template-columns:1fr 1fr;\n        grid-template-rows:1fr 1fr;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":840,"wires":[[]]},{"id":"e152c365e8f8f0e1","type":"ui-event","z":"50af7128c761b2cb","ui":"cab2761fcbe60245","name":"","x":650,"y":700,"wires":[["1908688521f4ed6d","63d2ea23fda602f5","a0ba30fc5b0beeb8","6a13996bf1ffe12a","5acbadfac769a8e1"]]},{"id":"1908688521f4ed6d","type":"debug","z":"50af7128c761b2cb","name":"debug 11","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":840,"y":600,"wires":[]},{"id":"63d2ea23fda602f5","type":"ui-template","z":"50af7128c761b2cb","group":"f4672a59c3c79c7f","page":"","ui":"","name":"teleportable 1","order":5,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"masterMounted && selfMounted\" to=\".master-slot-wrapper #slot_1\">\n        Template 1 content\n    </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                masterMounted:false,\n                selfMounted:false               \n            }\n        },\n        watch: {\n           msg: function () {\n               if(this.msg?.payload == \"master-template-mounted\"){\n                    this.masterMounted = true \n               }\n            }\n        },\n        \n        mounted() {\n            this.selfMounted = true\n        },\n        unmounted() {\n           \n        }\n    }\n</script>\n<style>\n\n    .teleported-template {\n        display:none !important;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"teleported-template","x":860,"y":660,"wires":[[]]},{"id":"a0ba30fc5b0beeb8","type":"ui-template","z":"50af7128c761b2cb","group":"f4672a59c3c79c7f","page":"","ui":"","name":"teleportable 2","order":1,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"masterMounted && selfMounted\" to=\".master-slot-wrapper #slot_2\">\n        Template 2 content\n    </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                masterMounted:false,\n                selfMounted:false               \n            }\n        },\n        watch: {\n           msg: function () {\n               if(this.msg?.payload == \"master-template-mounted\"){\n                    this.masterMounted = true \n               }\n            }\n        },\n        \n        mounted() {\n            this.selfMounted = true\n        },\n        unmounted() {\n           \n        }\n    }\n</script>\n<style>\n\n    .teleported-template {\n        display:none !important;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"teleported-template","x":860,"y":700,"wires":[[]]},{"id":"6a13996bf1ffe12a","type":"ui-template","z":"50af7128c761b2cb","group":"f4672a59c3c79c7f","page":"","ui":"","name":"teleportable 3","order":2,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"masterMounted && selfMounted\" to=\".master-slot-wrapper #slot_3\">\n        Template 3 content\n    </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                masterMounted:false,\n                selfMounted:false               \n            }\n        },\n        watch: {\n           msg: function () {\n               if(this.msg?.payload == \"master-template-mounted\"){\n                    this.masterMounted = true \n               }\n            }\n        },\n        \n        mounted() {\n            this.selfMounted = true\n        },\n        unmounted() {\n           \n        }\n    }\n</script>\n<style>\n\n    .teleported-template {\n        display:none !important;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"teleported-template","x":860,"y":740,"wires":[[]]},{"id":"5acbadfac769a8e1","type":"ui-template","z":"50af7128c761b2cb","group":"f4672a59c3c79c7f","page":"","ui":"","name":"teleportable 4","order":3,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"masterMounted && selfMounted\" to=\".master-slot-wrapper #slot_4\">\n        Template 4 content\n    </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                masterMounted:false,\n                selfMounted:false               \n            }\n        },\n        watch: {\n           msg: function () {\n               if(this.msg?.payload == \"master-template-mounted\"){\n                    this.masterMounted = true \n               }\n            }\n        },\n        \n        mounted() {\n            this.selfMounted = true\n        },\n        unmounted() {\n           \n        }\n    }\n</script>\n<style>\n\n    .teleported-template {\n        display:none !important;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"teleported-template","x":860,"y":780,"wires":[[]]},{"id":"f4672a59c3c79c7f","type":"ui-group","name":"Master","page":"b55c3e3640901741","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"cab2761fcbe60245","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-template"],"showPathInSidebar":false,"showPageTitle":false,"navigationStyle":"temporary","titleBarStyle":"fixed"},{"id":"b55c3e3640901741","type":"ui-page","name":"Test Page","ui":"cab2761fcbe60245","path":"/test","icon":"home","layout":"grid","theme":"0819910104699eae","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"0819910104699eae","type":"ui-theme","name":"Site Dark","colors":{"surface":"#141414","primary":"#32a00a","bgPage":"#121212","groupBg":"#141414","groupOutline":"#333333"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"12px","widgetGap":"12px"}}]