# Going nuts with ui-template

**URL:** <https://discourse.nodered.org/t/going-nuts-with-ui-template/85219>\
**Category:** Dashboard\
**Created:** [5 February 2024 13:43 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219 "2024-02-05T13:43:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [5 February 2024 13:43 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/1 "2024-02-05T13:43:12Z")

</div>

Hi,

I am getting crazy with an ui-template. It seems trivial, but either the group doesn't grow with the entry list or it is not shown at all...

Sure I'm wrong, but I can't get out of this.

```auto
[{"id":"4117ffc1.b817","type":"ui_template","z":"fd95058a.48e3e8","group":"e473f267eadc0fbb","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n\n<style>\n\n .device {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 49%;\n position: relative;\n overflow: hidden;\n }\n \n div.device>span.name {\n text-align: left;\n margin-left: 6px;\n margin-right: 6px;\n overflow-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n }\n\n div.device .led {\n min-height: 14px;\n min-width: 14px;\n height: 14px;\n width: 14px;\n max-height: 14px;\n max-width: 14px;\n text-align: center;\n margin: 11px;\n border-radius: 50%;\n display: inline;\n }\n</style>\n\n<div class=\"device\" ng-repeat=\"(k,v) in msg.payload\">\n <span class=\"name\">{{v.name}}</span>\n <div class=\"led\">\n <span><i class=\"fa fa-solid fa-circle\" style=\"color:{{v.status}}\" ></i></span>\n </div>\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":460,"y":1720,"wires":[[]]},{"id":"e473f267eadc0fbb","type":"ui_group","name":"Online Devices","tab":"5b337e3b.68826","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"5b337e3b.68826","type":"ui_tab","name":"Services","icon":"home","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 February 2024 13:59 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/2 "2024-02-05T13:59:33Z")

</div>

It would help if you added an inject node with a example of input message.

With this data it works

```auto
[{"id":"4bad452835445c0d","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"one\":{\"name\":\"one\",\"status\":\"green\"},\"two\":{\"name\":\"two\",\"status\":\"red\"}}","payloadType":"json","x":470,"y":5620,"wires":[["4117ffc1.b817"]]},{"id":"4117ffc1.b817","type":"ui_template","z":"d1395164b4eec73e","group":"e473f267eadc0fbb","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n\n<style>\n\n .device {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 49%;\n position: relative;\n overflow: hidden;\n }\n \n div.device>span.name {\n text-align: left;\n margin-left: 6px;\n margin-right: 6px;\n overflow-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n }\n\n div.device .led {\n min-height: 14px;\n min-width: 14px;\n height: 14px;\n width: 14px;\n max-height: 14px;\n max-width: 14px;\n text-align: center;\n margin: 11px;\n border-radius: 50%;\n display: inline;\n }\n</style>\n\n<div class=\"device\" ng-repeat=\"(k,v) in msg.payload\">\n <span class=\"name\">{{v.name}}</span>\n <div class=\"led\">\n <span><i class=\"fa fa-solid fa-circle\" style=\"color: {{v.status}}\" ></i></span>\n </div>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":640,"y":5620,"wires":[[]]},{"id":"e473f267eadc0fbb","type":"ui_group","name":"Online Devices","tab":"5b337e3b.68826","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"5b337e3b.68826","type":"ui_tab","name":"Services","icon":"home","order":3,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_5 Feb 2024 14_42_32 GMT](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d788100816498c7a6a95a6eda5e75644c3a1bf11.png)

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [5 February 2024 16:40 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/3 "2024-02-05T16:40:33Z")

</div>

> [@E1cid](#):
>
> It would help if you added an inject node

Right. Sorry. Here it is:

```auto
[{"id":"4117ffc1.b817","type":"ui_template","z":"fd95058a.48e3e8","group":"e473f267eadc0fbb","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n\n<style>\n\n .device {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 49%;\n position: relative;\n overflow: hidden;\n }\n \n div.device>span.name {\n text-align: left;\n margin-left: 6px;\n margin-right: 6px;\n overflow-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n }\n\n div.device .led {\n min-height: 14px;\n min-width: 14px;\n height: 14px;\n width: 14px;\n max-height: 14px;\n max-width: 14px;\n text-align: center;\n margin: 11px;\n border-radius: 50%;\n display: inline;\n }\n</style>\n\n<div class=\"device\" ng-repeat=\"(k,v) in msg.payload\">\n <span class=\"name\">{{v.name}}</span>\n <div class=\"led\">\n <span><i class=\"fa fa-solid fa-circle\" style=\"color:{{v.status}}\" ></i></span>\n </div>\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":460,"y":1720,"wires":[[]]},{"id":"79e8c03fe288382e","type":"inject","z":"fd95058a.48e3e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Aspiratore stanzino\",\"status\":\"green\"},{\"name\":\"Deumidificatore\",\"status\":\"green\"},{\"name\":\"Contatto porta\",\"status\":\"green\"},{\"name\":\"Irrigatori laterali\",\"status\":\"green\"},{\"name\":\"Irrigatore centrale\",\"status\":\"green\"},{\"name\":\"Ventilatore\",\"status\":\"red\"},{\"name\":\"Apricancello\",\"status\":\"green\"},{\"name\":\"Pala soffitto\",\"status\":\"green\"},{\"name\":\"AC Salone\",\"status\":\"green\"},{\"name\":\"Striscia Led Salone\",\"status\":\"green\"},{\"name\":\"Interruttore PAB\",\"status\":\"green\"},{\"name\":\"Luxmetro\",\"status\":\"green\"},{\"name\":\"Monitor Antifurto\",\"status\":\"green\"}]","payloadType":"json","x":380,"y":1820,"wires":[["4117ffc1.b817"]]},{"id":"e473f267eadc0fbb","type":"ui_group","name":"Dispositivi online","tab":"5b337e3b.68826","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"5b337e3b.68826","type":"ui_tab","name":"Servizi","icon":"home","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [5 February 2024 16:42 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/4 "2024-02-05T16:42:52Z")

</div>

As soon as I inject as don't see anything in the group:

 ![Screenshot 2024-02-05 alle 17.42.20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/690ae0cd478063010c2596a434e6ba9a32515010.png)

If I refresh the page, the widgets are displayed correctly. But I'd like to have them without the need to refresh

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 February 2024 17:45 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/5 "2024-02-05T17:45:44Z")

</div>

Delete you old template and refresh the browser.  
Then add this one.  
The difference is it only sets reload on refresh.  
and  
`v in msg.payload` as it is an array of objects not an object of objects.

```auto
[{"id":"f7b5e84732137ed9","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Aspiratore stanzino\",\"status\":\"green\"},{\"name\":\"Deumidificatore\",\"status\":\"green\"},{\"name\":\"Contatto porta\",\"status\":\"green\"},{\"name\":\"Irrigatori laterali\",\"status\":\"green\"},{\"name\":\"Irrigatore centrale\",\"status\":\"green\"},{\"name\":\"Ventilatore\",\"status\":\"red\"},{\"name\":\"Apricancello\",\"status\":\"green\"},{\"name\":\"Pala soffitto\",\"status\":\"green\"},{\"name\":\"AC Salone\",\"status\":\"green\"},{\"name\":\"Striscia Led Salone\",\"status\":\"green\"},{\"name\":\"Interruttore PAB\",\"status\":\"green\"},{\"name\":\"Luxmetro\",\"status\":\"green\"},{\"name\":\"Monitor Antifurto\",\"status\":\"green\"}]","payloadType":"json","x":620,"y":5680,"wires":[["bd424f34aa0841a5"]]},{"id":"bd424f34aa0841a5","type":"ui_template","z":"d1395164b4eec73e","group":"e473f267eadc0fbb","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n\n<style>\n\n .device {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n width: 49%;\n position: relative;\n overflow: hidden;\n }\n \n div.device>span.name {\n text-align: left;\n margin-left: 6px;\n margin-right: 6px;\n overflow-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n }\n\n div.device .led {\n min-height: 14px;\n min-width: 14px;\n height: 14px;\n width: 14px;\n max-height: 14px;\n max-width: 14px;\n text-align: center;\n margin: 11px;\n border-radius: 50%;\n display: inline;\n }\n</style>\n\n<div class=\"device\" ng-repeat=\"v in msg.payload\">\n <span class=\"name\">{{v.name}}</span>\n <div class=\"led\">\n <span><i class=\"fa fa-solid fa-circle\" style=\"color:{{v.status}}\" ></i></span>\n </div>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":5680,"wires":[[]]},{"id":"e473f267eadc0fbb","type":"ui_group","name":"Online Devices","tab":"5b337e3b.68826","order":4,"disp":true,"width":"6","collapse":false,"className":""},{"id":"5b337e3b.68826","type":"ui_tab","name":"Services","icon":"home","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [5 February 2024 18:08 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/6 "2024-02-05T18:08:26Z")

</div>

> [@E1cid](#):
>
> Then add this one.

Sorry, it doesn't import...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 February 2024 18:11 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/7 "2024-02-05T18:11:12Z")

</div>

It imports fine for me. What steps did you use to import it?

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [5 February 2024 18:36 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/8 "2024-02-05T18:36:17Z")

</div>

I have imported it. Don't know why it wasn't before.  
Thanks!  
I was thinking to put the widgets in 2 columns, to reduce the vertical size. Do you think it will be possible?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 February 2024 18:52 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/9 "2024-02-05T18:52:12Z")

</div>

Should be be possible with css [html - css: two columns of divs - Stack Overflow](https://stackoverflow.com/questions/14293208/css-two-columns-of-divs)

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [6 February 2024 10:05 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/10 "2024-02-06T10:05:55Z")

</div>

Got it! Thank you!.

 ![Screenshot 2024-02-06 alle 11.04.35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f41a6e889e98a39f260bc917958a59ca15b396c8.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 February 2024 10:06 UTC](https://discourse.nodered.org/t/going-nuts-with-ui-template/85219/11 "2024-02-20T10:06:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.