# Ui template - multiple elements?

**URL:** <https://discourse.nodered.org/t/ui-template-multiple-elements/52869>\
**Category:** Dashboard\
**Created:** [28 October 2021 08:38 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869 "2021-10-28T08:38:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GeorgeCastanza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/georgecastanza/32/40766_2.png) [@GeorgeCastanza](https://discourse.nodered.org/u/GeorgeCastanza)\
**Post date:** [28 October 2021 08:38 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869/1 "2021-10-28T08:38:51Z")

</div>

I'm attempting to combine two payloads in the dashboard. I've managed to combine them into 1 payload.

Currently, this is what I have, in two different dashboard groups (Motion & Time)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cd4bbf380a6f1684a1e5fd562eea0e7b69014c46.png)

I'd like to get them into 1 group, so move the Time over into the group Motion, and then remove the group Time. I'm attempting to do this via the Template Ui node, but not having any luck.

This is what the below code results in. Not sure why only the : shows up and not the time. Also, why is it on a new line?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00b91361dfffa1a8b42a501af2fad46acfac9113.png)

This is what I've got with the template node/widget.

```auto
Office: <font color="{{msg.color}}"><div class="material-icons {{msg.icon}}"/><font color="white">{{msg.time}} </font>

```

And here is an flow to import with the right data (msg.time msg.color etc).

```auto
[{"id":"ef1e2b95f17cad89","type":"ui_template","z":"dc8def0e.5ff96","group":"ac35072fdc970f14","name":"Office","order":15,"width":0,"height":0,"format":"Office: <font color=\"{{msg.color}}\"><div class=\"material-icons {{msg.icon}}\"/><font color=\"white\">{{msg.time}} </font>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2150,"y":2420,"wires":[[]]},{"id":"5e2847d0a4de9e24","type":"inject","z":"dc8def0e.5ff96","name":"","props":[{"p":"topic","vt":"str"},{"p":"icon","v":"directions_walk","vt":"str"},{"p":"color","v":"red","vt":"str"},{"p":"time","v":"5:00","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Office","x":1850,"y":2420,"wires":[["ef1e2b95f17cad89","929690fd5f641eb5"]]},{"id":"929690fd5f641eb5","type":"debug","z":"dc8def0e.5ff96","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2150,"y":2460,"wires":[]},{"id":"ac35072fdc970f14","type":"ui_group","name":"Temp","tab":"1862e313.45ffad","order":21,"disp":true,"width":"4","collapse":false},{"id":"1862e313.45ffad","type":"ui_tab","name":"Mike","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [29 October 2021 09:10 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869/2 "2021-10-29T09:10:02Z")

</div>

ok , im not a css person and have probably missed some thing  
try the following

````auto
    <div layout="row" layout-align="start center">
    Office:
    <span flex class="material-icons {{msg.icon}}"> </span>

    <span flex style="color:{{msg.color}}">{{msg.time}}</span>
    </div>```
````

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [29 October 2021 09:41 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869/3 "2021-10-29T09:41:16Z")

</div>

ive added the topic and changed the icon colour as well in this.

````auto
    {
        "id": "a7b96b8807d3d0de",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "ef1e2b95f17cad89",
        "type": "ui_template",
        "z": "a7b96b8807d3d0de",
        "group": "ac35072fdc970f14",
        "name": "Office",
        "order": 1,
        "width": 5,
        "height": 1,
        "format": "\n <div layout=\"row\" layout-align=\"start center\">\n <span flex style=\"color:white\">{{msg.topic}}</span>\n <span flex class=\"material-icons {{msg.icon}}\" style=\"color:{{msg.color}}\" > </span>\n <span flex style=\"color:{{msg.color}}\">{{msg.time}}</span>\n </div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1130,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "5e2847d0a4de9e24",
        "type": "inject",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "directions_run",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "red",
                "vt": "str"
            },
            {
                "p": "time",
                "v": "6:00",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Shed",
        "x": 790,
        "y": 260,
        "wires": [
            [
                "ef1e2b95f17cad89",
                "929690fd5f641eb5"
            ]
        ]
    },
    {
        "id": "929690fd5f641eb5",
        "type": "debug",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1110,
        "y": 300,
        "wires": []
    },
    {
        "id": "e1378f79b560655d",
        "type": "inject",
        "z": "a7b96b8807d3d0de",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "icon",
                "v": "directions_walk",
                "vt": "str"
            },
            {
                "p": "color",
                "v": "green",
                "vt": "str"
            },
            {
                "p": "time",
                "v": "5:00",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Office",
        "x": 790,
        "y": 300,
        "wires": [
            [
                "ef1e2b95f17cad89"
            ]
        ]
    },
    {
        "id": "ac35072fdc970f14",
        "type": "ui_group",
        "name": "Temp",
        "tab": "1862e313.45ffad",
        "order": 21,
        "disp": true,
        "width": 5,
        "collapse": false
    },
    {
        "id": "1862e313.45ffad",
        "type": "ui_tab",
        "name": "Mike",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]```
````

---

<div class="post-metadata">

**Author:** ![GeorgeCastanza](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/georgecastanza/32/40766_2.png) [@GeorgeCastanza](https://discourse.nodered.org/u/GeorgeCastanza)\
**Post date:** [29 October 2021 09:41 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869/4 "2021-10-29T09:41:47Z")

</div>

> [@vikingsraven](#):
>
> ```auto
> <div layout="row" layout-align="start center">
> Office:
> <span flex class="material-icons {{msg.icon}}"> </span>
> 
> <span flex style="color:{{msg.color}}">{{msg.time}}</span>
> </div>
> 
> ```

Thanks mate. That will get me where I need to get. You're a better css person that me. Thanks!

---

<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:** [28 November 2021 09:42 UTC](https://discourse.nodered.org/t/ui-template-multiple-elements/52869/5 "2021-11-28T09:42:00Z")

</div>

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