# Using Global Variable in UI Template

**URL:** <https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627>\
**Category:** Dashboard\
**Created:** [11 August 2021 18:56 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627 "2021-08-11T18:56:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![twack](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twack](https://discourse.nodered.org/u/twack)\
**Post date:** [11 August 2021 18:56 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/1 "2021-08-11T18:56:32Z")

</div>

I've searched for quite a while and tried several variations, but I'm still blocked. I'm trying to use a global variable to become part of the Title Text and Logo of Dashboard Title. Could someone help me with setting value on line 10 to use a global. Here's the code below:

```auto
<script id="clockScript1" type="text/javascript">
    var clockInterval;

    $(function () {
        if (clockInterval) return;

        //add global variable to left hand side of Title Bar
        var div1 = $('<div/>');
        var p = $('<p/>');
        p.text("This needs to be using a global variable here");
        div1.append(p);
        div1[0].style.margin = '0px';

        //add logo
        var div2 = $('<div/>');
        var logo = new Image();
        logo.src = 'https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg'
        logo.height = 45;
        div2[0].style.margin = '10px auto';
        div2.append(logo);

        //add clock
        var div3 = $('<div/>');
        var p = $('<p/>');
        div3.append(p);
        div3[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }

        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;

        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');

            if(!toolbar.length) return;
            toolbar.append(div1);
            toolbar.append(div2);
            toolbar.append(div3);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2021 19:05 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/2 "2021-08-11T19:05:04Z")

</div>

Hi & welcome to the forum

> [@twack](#):
>
> I've searched for quite a while and tried several variations, but I'm still blocked

There are a few posts but could be tricky to find.

The bottom line is that context (flow & global) are server side things where as a UI template is purely client-side.

To get past this you could use a normal template node to generate that whole script and use mustache syntax to supplant your global values into the code then send it to a UI template.

---

<div class="post-metadata">

**Author:** ![twack](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twack](https://discourse.nodered.org/u/twack)\
**Post date:** [11 August 2021 20:59 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/3 "2021-08-11T20:59:59Z")

</div>

ok, I've tried and not succeeded. Exactly what goes into the template node and what goes into the ui template node? And do I need to trigger them with an inject, or?

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [11 August 2021 21:20 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/4 "2021-08-11T21:20:28Z")

</div>

Here is a post I made on sending a msg.template ---\> [LOLz - Nublet 101 - msg.template - i dont need no template node](https://discourse.nodered.org/t/lolz-nublet-101-msg-template-i-dont-need-no-template-node/42297)

also the flow

```auto
[{"id":"59bbbf3a.a700f","type":"mui_template","z":"c73d189c.ffdb98","group":"593f05c3.2566cc","name":"","order":3,"width":"6","height":"9","format":"\n<div>\n \n <center><b>12:34:17</b></center>\n <video width=\"300\" controls>\n <source src=\"/docker5/cameras/SunValleyIndoorDocksNorth01/2021-year/03-month/05-day/12-hour/2021-03-05-12-02-50.mp4\" type=\"video/mp4\">\n </video>\n \n</div>\n<p></p><p></p>\n<div>\n \n <center><b>12:34:17</b></center>\n <video width=\"300\" controls>\n <source src=\"/docker5/cameras/SunValleyIndoorDocksNorth01/2021-year/03-month/05-day/12-hour/2021-03-05-12-02-50.mp4\" type=\"video/mp4\">\n </video>\n \n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":880,"y":740,"wires":[[]]},{"id":"e2bad9b0.69a96","type":"template","z":"c73d189c.ffdb98","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n.button {\n background-color: #2B2B2A; /* Green */\n border: none;\n color: white;\n padding: 2px 2px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 12px;\n margin: 0px 0px;\n cursor: pointer;\n}\n\n.button1 {width: 30px;}\n.button2 {width: 50px;}\n</style>\n</head>\n<body>\n","output":"str","x":120,"y":740,"wires":[["e0b250d2.58c59"]]},{"id":"e0b250d2.58c59","type":"function","z":"c73d189c.ffdb98","name":"","func":"const video_URL = msg.video_URL;\nconst video_times = msg.video_times;\nconst video_uid = msg.video_uid;\nvar template = msg.template;\nvideo_URL.forEach(function(url, index){\n template += '<div><center><b>' + video_times[index] + '</b></center><video id=\"' + video_uid[index] + '\" width=\"300\" controls preload=\"none\" poster=\"' + url + '.thumb\"><source src=\"' + url + '\"type=\"video/mp4\">Your browser does not support HTML5 video.</video><center><button class=\"button button1\" onclick=\"setPlaySpeed(0.25,' + video_uid[index] + ')\" type=\"button\"><b>1/4</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(0.5,' + video_uid[index] + ')\" type=\"button\"><b>1/2</b></button><button class=\"button button2\" onclick=\"setPlaySpeed(1,' + video_uid[index] + ')\" type=\"button\"><b>Normal</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(2,' + video_uid[index] + ')\" type=\"button\"><b>2x</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(4,' + video_uid[index] + ')\" type=\"button\"><b>4x</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(8,' + video_uid[index] + ')\" type=\"button\"><b>8x</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(16,' + video_uid[index] + ')\" type=\"button\"><b>16x</b></button><button class=\"button button1\" onclick=\"setPlaySpeed(32,' + video_uid[index] + ')\" type=\"button\"><b>32x</b></button></center></div><p></p><p></p><p></p>';\n});\ntemplate += '<script>'\nvideo_uid.forEach(function(uid){\n template += 'var ' + uid + ' = document.getElementById(\"' + uid + '\");';\n});\ntemplate += 'function setPlaySpeed(speed,id) { id.playbackRate = speed; } </script> </body> </html>';\n\nmsg.template = template;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":260,"y":740,"wires":[["de6b0f68.305f3"]]},{"id":"de6b0f68.305f3","type":"change","z":"c73d189c.ffdb98","name":"msg.payload --> msg.template","rules":[{"t":"set","p":"payload","pt":"msg","to":"template","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":740,"wires":[["59bbbf3a.a700f"]]},{"id":"593f05c3.2566cc","type":"mui_group","name":"selections","tab":"928d2bd7.b131d","disp":false,"width":"6","collapse":false},{"id":"928d2bd7.b131d","type":"mui_tab","name":"Review","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2021 21:22 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/5 "2021-08-11T21:22:32Z")

</div>

> [@twack](#):
>
> Exactly what goes into the template node

All of your script.

> [@twack](#):
>
> what goes into the ui template node?

Nothing.

Look at the built in help of both nodes. They describe how you use mustache and how use a template passed in via a msg

---

<div class="post-metadata">

**Author:** ![twack](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twack](https://discourse.nodered.org/u/twack)\
**Post date:** [11 August 2021 22:14 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/6 "2021-08-11T22:14:14Z")

</div>

I'm missing something simple here. Soon as I use both the template and UI template nodes, My title tool-bar is blank. This should be so simple.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2021 22:27 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/7 "2021-08-11T22:27:55Z")

</div>

Hmmm, i am unsure.

There is another way, pass the title in using scope...

```auto
[{"id":"8dce44cff57a1747","type":"inject","z":"a51c9499.24c608","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"title","payload":"title","payloadType":"global","x":760,"y":700,"wires":[["782165a195724a07","d2e23e33a5dadc90"]]},{"id":"782165a195724a07","type":"ui_template","z":"a51c9499.24c608","group":"dce9e7a2.d20c78","name":"","order":8,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n\n $(function (scope) {\n if (clockInterval) return;\n\n //add global variable to left hand side of Title Bar\n var div1 = $('<div/>');\n var p = $('<p id=\"my_title\"/>');\n div1.append(p);\n div1[0].style.margin = '0px';\n\n //add logo\n var div2 = $('<div/>');\n var logo = new Image();\n logo.src = 'https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg'\n logo.height = 45;\n div2[0].style.margin = '10px auto';\n div2.append(logo);\n\n //add clock\n var div3 = $('<div/>');\n var p = $('<p/>');\n div3.append(p);\n div3[0].style.margin = '5px';\n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n\n clockInterval = setInterval(displayTime, 1000);\n\n //add to toolbar when it's available\n var addToToolbarTimer;\n\n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n\n if(!toolbar.length) return;\n toolbar.append(div1);\n toolbar.append(div2);\n toolbar.append(div3);\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n\n (function (scope) {\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"title\") {\n // Do something when msg arrives\n $(\"#my_title\").text(msg.payload);\n }\n });\n })(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":950,"y":700,"wires":[[]]},{"id":"e49d705f2670833e","type":"inject","z":"a51c9499.24c608","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":760,"y":640,"wires":[["f62687ed6b9651e7"]]},{"id":"f62687ed6b9651e7","type":"change","z":"a51c9499.24c608","name":"","rules":[{"t":"set","p":"title","pt":"global","to":" * globally set title * ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":640,"wires":[[]]},{"id":"d2e23e33a5dadc90","type":"debug","z":"a51c9499.24c608","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":930,"y":760,"wires":[]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![twack](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twack](https://discourse.nodered.org/u/twack)\
**Post date:** [12 August 2021 00:51 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/8 "2021-08-12T00:51:59Z")

</div>

Did that work for you when you tested? It is not working for me.

EDIT: OK, it works as a widget in a group. I didn't explain that I was using the "Add to site head section". I tried that setting using your example and it did not work. Picking a group widget does.

In your example, I will need to add the template to each group. Any thoughts on how to get it to work in the head section?

Also, I noticed that if the page is refreshed, using the widget method, the title disappears.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 August 2021 08:47 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/9 "2021-08-12T08:47:17Z")

</div>

> [@twack](#):
>
> I will need to add the template to each group. Any thoughts on how to get it to work in the head section?

You'll need to have one `ui_template` per dashboard tab. Not per group.  
And no, it can't be done with the script added to the head.

> [@twack](#):
>
> Also, I noticed that if the page is refreshed, using the widget method, the title disappears.

Try this approach.

```auto
[
    {
        "id": "d365d02956b1c509",
        "type": "ui_template",
        "z": "8679b7e94e378141",
        "group": "c86213fc1aa53032",
        "name": "top-bar",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n#top-bar-logo {\n background-image: url(https://nodered.org/about/resources/media/node-red-icon-2.png);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n height: 100%;\n width: 100%;\n}\n\n.top-bar-txt{\n margin-left:10px;\n}\n</style>\n\n<script id=\"logo-script\" type=\"text/javascript\">\nvar ready = false\nvar titleText\nvar timeText\n\nfunction build(){\n $(\"#top-bar-logo\").remove();\n $(\"#top-bar-title\").remove();\n $(\"#top-bar-clock\").remove();\n var topbar = $('.md-toolbar-tools');\n $('<div />').attr(\"id\",\"top-bar-logo\").appendTo(topbar);\n $('<div />').attr({id:\"top-bar-title\",class:\"top-bar-txt\"}).appendTo(topbar); \n $('<div />').attr({id:\"top-bar-clock\",class:\"top-bar-txt\"}).appendTo(topbar); \n}\n// these functions can be called any time from server side\n// if DOM is not ready, just store the variable\nfunction updateTitleText(txt){ \n if(txt){\n titleText = txt\n } \n if(!ready){\n return\n }\n $(\"#top-bar-title\").text(titleText)\n}\n\nfunction showTime(time){\n if(time){\n timeText = time\n }\n if(!ready){\n return\n }\n $(\"#top-bar-clock\").text(timeText)\n}\n\nfunction checkExistence(){\n if($(\"#top-bar-logo\").length > 0){\n ready = true\n // call updateTitle cos server may have called it before DOM is ready \n updateTitleText()\n showTime()\n return\n }\n build()\n setTimeout(checkExistence,100)\n}\n\nbuild()\nsetTimeout(checkExistence,100)\n\n// expose api's\nwindow.TopBar = {\n updateTitle: updateTitleText,\n updateTime:showTime\n}\n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "x": 820,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "0d2d2837d831c64d",
        "type": "change",
        "z": "8679b7e94e378141",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "title",
                "pt": "global",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 400,
        "y": 480,
        "wires": [
            [
                "0156f9cb255d8b94"
            ]
        ]
    },
    {
        "id": "596dfd22b9de5f34",
        "type": "ui_template",
        "z": "8679b7e94e378141",
        "group": "c86213fc1aa53032",
        "name": "tab home",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // call exposed api's \n if(msg.topic == \"title\"){\n window.TopBar.updateTitle(msg.payload)\n }\n if(msg.topic == \"clock\"){\n window.TopBar.updateTime(msg.payload)\n }\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 820,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "f1d2e25d96a66a3e",
        "type": "ui_ui_control",
        "z": "8679b7e94e378141",
        "name": "",
        "events": "connect",
        "x": 200,
        "y": 240,
        "wires": [
            [
                "0156f9cb255d8b94"
            ]
        ]
    },
    {
        "id": "0156f9cb255d8b94",
        "type": "change",
        "z": "8679b7e94e378141",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "title",
                "tot": "global"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "title",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 580,
        "y": 240,
        "wires": [
            [
                "596dfd22b9de5f34",
                "262cd01de1963b1b"
            ]
        ]
    },
    {
        "id": "262cd01de1963b1b",
        "type": "ui_template",
        "z": "8679b7e94e378141",
        "group": "c3089136b03388ac",
        "name": "tab away",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // call exposed api's \n if(msg.topic == \"title\"){\n window.TopBar.updateTitle(msg.payload)\n }\n if(msg.topic == \"clock\"){\n window.TopBar.updateTime(msg.payload)\n }\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 820,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "e68d7fe1a3146ffc",
        "type": "change",
        "z": "8679b7e94e378141",
        "name": "set global title default",
        "rules": [
            {
                "t": "set",
                "p": "title",
                "pt": "global",
                "to": "Dafault title",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 580,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "bb8800dff1ed5f15",
        "type": "inject",
        "z": "8679b7e94e378141",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 210,
        "y": 100,
        "wires": [
            [
                "5a3048153bd90c21"
            ]
        ]
    },
    {
        "id": "5a3048153bd90c21",
        "type": "switch",
        "z": "8679b7e94e378141",
        "name": "",
        "property": "title",
        "propertyType": "global",
        "rules": [
            {
                "t": "null"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 360,
        "y": 100,
        "wires": [
            [
                "e68d7fe1a3146ffc"
            ]
        ]
    },
    {
        "id": "aab446fc2fa8a22c",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "if there is no global.title, set default title",
        "info": "",
        "x": 480,
        "y": 60,
        "wires": []
    },
    {
        "id": "0aaa712077fe07a1",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "when dashboard connects, send global.title",
        "info": "",
        "x": 280,
        "y": 280,
        "wires": []
    },
    {
        "id": "a5a02443a3c61f3e",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "set global.title and send it ",
        "info": "",
        "x": 430,
        "y": 520,
        "wires": []
    },
    {
        "id": "53b3b933aab13765",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "msg's can be listened only if ui_tempalte is in group",
        "info": "",
        "x": 830,
        "y": 340,
        "wires": []
    },
    {
        "id": "cd4df33c036b6abd",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "script in head",
        "info": "",
        "x": 820,
        "y": 60,
        "wires": []
    },
    {
        "id": "9482ed753c57d241",
        "type": "comment",
        "z": "8679b7e94e378141",
        "name": "script for every tab (content is same for all)",
        "info": "",
        "x": 920,
        "y": 220,
        "wires": []
    },
    {
        "id": "787191d686846f20",
        "type": "function",
        "z": "8679b7e94e378141",
        "name": "clock",
        "func": "function checkTime(i) {\n if (i < 10) { i = \"0\" + i };\n return i;\n}\nconst today = new Date();\nlet h = today.getHours();\nlet m = today.getMinutes();\nlet s = today.getSeconds();\nm = checkTime(m);\ns = checkTime(s);\nmsg.payload = h + \":\" + m + \":\" + s;\nmsg.topic = \"clock\"\nreturn msg",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 610,
        "y": 200,
        "wires": [
            [
                "596dfd22b9de5f34",
                "262cd01de1963b1b"
            ]
        ]
    },
    {
        "id": "5f61610f2a29b432",
        "type": "inject",
        "z": "8679b7e94e378141",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 210,
        "y": 200,
        "wires": [
            [
                "787191d686846f20"
            ]
        ]
    },
    {
        "id": "6a07b007c072a673",
        "type": "group",
        "z": "8679b7e94e378141",
        "name": "tab away",
        "style": {
            "label": true
        },
        "nodes": [
            "355204c71679f0b2",
            "261ed7470526be54"
        ],
        "x": 74,
        "y": 479,
        "w": 172,
        "h": 122
    },
    {
        "id": "355204c71679f0b2",
        "type": "ui_button",
        "z": "8679b7e94e378141",
        "g": "6a07b007c072a673",
        "name": "",
        "group": "c3089136b03388ac",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "fantastic",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "Fantastic",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 160,
        "y": 520,
        "wires": [
            [
                "0d2d2837d831c64d"
            ]
        ]
    },
    {
        "id": "261ed7470526be54",
        "type": "ui_button",
        "z": "8679b7e94e378141",
        "g": "6a07b007c072a673",
        "name": "",
        "group": "c3089136b03388ac",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "anything",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "Anything",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 160,
        "y": 560,
        "wires": [
            [
                "0d2d2837d831c64d"
            ]
        ]
    },
    {
        "id": "e5943e5df2fa3c2b",
        "type": "group",
        "z": "8679b7e94e378141",
        "name": "tab home",
        "style": {
            "label": true
        },
        "nodes": [
            "8e34ac5da484d19f",
            "6a8ff6025084f6aa"
        ],
        "x": 74,
        "y": 339,
        "w": 192,
        "h": 122
    },
    {
        "id": "8e34ac5da484d19f",
        "type": "ui_button",
        "z": "8679b7e94e378141",
        "g": "e5943e5df2fa3c2b",
        "name": "",
        "group": "c86213fc1aa53032",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "interesting",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "Interesting",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 170,
        "y": 420,
        "wires": [
            [
                "0d2d2837d831c64d"
            ]
        ]
    },
    {
        "id": "6a8ff6025084f6aa",
        "type": "ui_button",
        "z": "8679b7e94e378141",
        "g": "e5943e5df2fa3c2b",
        "name": "",
        "group": "c86213fc1aa53032",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "something",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "Something",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 170,
        "y": 380,
        "wires": [
            [
                "0d2d2837d831c64d"
            ]
        ]
    },
    {
        "id": "c86213fc1aa53032",
        "type": "ui_group",
        "name": "Default",
        "tab": "27e03abe3824c2f2",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "c3089136b03388ac",
        "type": "ui_group",
        "name": "Default",
        "tab": "539acf5aa46cc42a",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "27e03abe3824c2f2",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "539acf5aa46cc42a",
        "type": "ui_tab",
        "name": "Away",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![twack](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@twack](https://discourse.nodered.org/u/twack)\
**Post date:** [12 August 2021 15:16 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/10 "2021-08-12T15:16:02Z")

</div>

Just a quick shout-out to all that responded. Using bits/pieces from each input, I was able to achieve the desired results. Thank you!

P.S.  
If anyone is looking for a project, it would be very nice to have a "Title Bar UI Design" node. I'm sure that there is some wizard/guru that could probably simplify the process and would become a highly used node.

---

<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:** [26 August 2021 15:16 UTC](https://discourse.nodered.org/t/using-global-variable-in-ui-template/49627/11 "2021-08-26T15:16:05Z")

</div>

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