Going nuts with ui-template

[TheSaltydog]

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.

[{"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}]

[E1cid]

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

With this data it works

[{"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}]

[TheSaltydog]

@E1cid

It would help if you added an inject node

Right. Sorry. Here it is:

[{"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}]

[TheSaltydog]

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

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

[E1cid]

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.

[{"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}]

[TheSaltydog]

@E1cid

Then add this one.

Sorry, it doesn't import...

[zenofmud]

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

[TheSaltydog]

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?

[E1cid]

Should be be possible with css html - css: two columns of divs - Stack Overflow

[TheSaltydog]

Got it! Thank you!.