# Button in TopBar

**URL:** <https://discourse.nodered.org/t/button-in-topbar/6377>\
**Category:** Dashboard\
**Created:** [4 January 2019 10:17 UTC](https://discourse.nodered.org/t/button-in-topbar/6377 "2019-01-04T10:17:04Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 14:08 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/21 "2019-01-08T14:08:30Z")

</div>

No also no result in the topBar, I try it later again with a chrome browser

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 January 2019 15:05 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/22 "2019-01-08T15:05:38Z")

</div>

sorry - but working here as well...

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 15:39 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/23 "2019-01-08T15:39:19Z")

</div>

Also in chrome browser no result, what could it be? I have Node-RED installed on the Raspberry Pi and the latest version of Node-RED

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [8 January 2019 15:51 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/24 "2019-01-08T15:51:38Z")

</div>

> [@Tobi](#):
>
> what could it be?

Well, it works very well in my Raspberry Pi as well, and it seems browser independent as well

One thing I would just double-check is that the template still is connected with the correct group and tab in the dashboard

If still no go, I suggest you select template node and make an export -\> and put it here in a response so we can help you further

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 15:58 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/25 "2019-01-08T15:58:22Z")

</div>

Many thanks for the help, it works now. 🤗🤗

the problem was i had the template as "Added to site section"

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 16:19 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/26 "2019-01-08T16:19:39Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/769c83a802fac1e3c374872396efab499740cc5c.png)

the upper error message is from a function node and the lower from the ui\_control here is the flow

`> [{"id":"8dcae8af.116fc","type":"ui_template","z":"4ba05176.92ace8","group":"6f3b634d.7e841c","name":"Logo / Clock","order":10,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var param = 'Home';\n var theScope = scope;\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n/*\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/wieland_logo.jpeg'\n logo.height = 45;\n div1[0].style.margin = '10px auto';\n\n div1.append(logo);\n*/\n //add clock\n var div2 = $('<div/>');\n var p = $('<p/>');\n\n div2.append(p);\n div2[0].style.margin = '5px';\n \n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var div4 = $('<div/>');\n var t = document.createTextNode(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n button.appendChild(b);\n button.addEventListener(\"click\", doIT.bind(null, param));\n div3.append(button);\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 \n toolbar.append(div4);\n //toolbar.append(div1);\n toolbar.append(div3);\n toolbar.append(div2)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n \n function doIT(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":40,"wires":[["e556322d.c718b"]]},{"id":"e556322d.c718b","type":"function","z":"4ba05176.92ace8","name":"Language setting","func":"msg.payload=\"Home\";\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":220,"wires":[["3084ba76.818e06","2772f311.62dc1c"]]},{"id":"2772f311.62dc1c","type":"ui_ui_control","z":"4ba05176.92ace8","name":"","x":640,"y":80,"wires":[["d35bf062.029c6"]]},{"id":"3084ba76.818e06","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":630,"y":200,"wires":[]},{"id":"d35bf062.029c6","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":810,"y":120,"wires":[]},{"id":"6f3b634d.7e841c","type":"ui_group","z":"","name":"Buttons","tab":"fc129880.475208","order":1,"disp":false,"width":"6","collapse":false},{"id":"fc129880.475208","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]`

how can I add a payload ?

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [8 January 2019 17:06 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/27 "2019-01-08T17:06:10Z")

</div>

> [@Tobi](#):
>
> how can I add a payload ?

You wanna send a payload to the ui\_template and change something for the button? Or do you want the ui\_template to send out a payload (this is already working I assume)?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 17:09 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/28 "2019-01-08T17:09:43Z")

</div>

I want the ui\_template to send out a payload. At the moment in the ui\_template send out a msg: string[], but for the ui\_template I need msg.payload

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/35d9ab7170e1a3a1ccef56424a38b3c5a957000d.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 January 2019 17:17 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/29 "2019-01-08T17:17:44Z")

</div>

krambriw's example sent a payload... I thought you copied that ?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 17:24 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/30 "2019-01-08T17:24:35Z")

</div>

yes i copied the example from krambriw´s, but it sends for me a msg not a msg.payload. if it was msg.payload the ui\_controll would not output an error message or?

`[{"id":"8dcae8af.116fc","type":"ui_template","z":"4ba05176.92ace8","group":"6f3b634d.7e841c","name":"Logo / Clock","order":10,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var param = 'Home';\n var theScope = scope;\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n/*\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/wieland_logo.jpeg'\n logo.height = 45;\n div1[0].style.margin = '10px auto';\n\n div1.append(logo);\n*/\n //add clock\n var div2 = $('<div/>');\n var p = $('<p/>');\n\n div2.append(p);\n div2[0].style.margin = '5px';\n \n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var div4 = $('<div/>');\n var t = document.createTextNode(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n var logo = new Image();\n //logo.src='/wieland_logo.jpeg';\n //logo.height=45;\n //button.appendChild(logo);\n //button.height=45;\n //button.left=50; \n //button.appendChild(b);\n button.addEventListener(\"click\", doIT.bind(null, param));\n div3.append(button);\n \n //var div5 =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/wieland_logo.jpeg\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doIT.bind(null,param));\n //div5.append(taster);\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(div5);\n toolbar.append(div4);\n //toolbar.append(div1);\n toolbar.append(div3);\n toolbar.append(div2)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n \n function doIT(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":40,"wires":[["d35bf062.029c6","2772f311.62dc1c"]]},{"id":"2772f311.62dc1c","type":"ui_ui_control","z":"4ba05176.92ace8","name":"","x":620,"y":120,"wires":[[]]},{"id":"d35bf062.029c6","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":790,"y":80,"wires":[]},{"id":"6f3b634d.7e841c","type":"ui_group","z":"","name":"Buttons","tab":"fc129880.475208","order":1,"disp":false,"width":"6","collapse":false},{"id":"fc129880.475208","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]`

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [8 January 2019 18:56 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/31 "2019-01-08T18:56:43Z")

</div>

Alright, you can do like this:

Create param as a new object, then set the payload to whatever (in this example 'test'

```auto
var param = new Object();
param.payload = 'test';

```

Now when you click the button, it will work  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ecb762cfb31020d29f4c3f119ebd7afa6dbe99cf.png)

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [8 January 2019 19:08 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/32 "2019-01-08T19:08:22Z")

</div>

Thanks for your support 😃

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [9 January 2019 11:03 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/33 "2019-01-09T11:03:56Z")

</div>

@krambriw

the button in TopBar works well. I want to hide the side-nav too, but both doesn´t work together so either I hide the side-nav or I show the button in TopBar. Any reason for this?

In the flow are both ui\_templates

`

`[{"id":"d13e291a.c98c5","type":"ui_template","z":"920bd247.0b5318","group":"79d56da6.863e74","name":"Sidebar verstecken","order":11,"width":0,"height":0,"format":"\n<script>\n $(\"md-sidenav\").hide();\n $(\"md-toolbar button\").hide(); \n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":550,"y":340,"wires":[[]]},{"id":"5861b889.53e738","type":"ui_template","z":"920bd247.0b5318","group":"24f6ffb4.136468","name":"TopBar","order":1,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var home = new Object();\n home.payload = 'Home';\n var language= new Object();\n language.payload = 'change';\n var theScope = scope;\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n/*\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/wieland_logo.jpeg'\n logo.height = 45;\n div1[0].style.margin = '10px auto';\n\n div1.append(logo);\n*/\n //add clock\n var div2 = $('<div/>');\n var p = $('<p/>');\n\n div2.append(p);\n div2[0].style.margin = '5px';\n \n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var div4 = $('<div/>');\n var t = document.createTextNode(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button.height=45;\n //button.left=50; \n button.appendChild(b);\n button.addEventListener(\"click\", doIT.bind(null, home));\n div3.append(button);\n \n //var div5 =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/home.png\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doThis.bind(null,language));\n //div5.append(taster);\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(div5);\n toolbar.append(div4);\n //toolbar.append(div1);\n toolbar.append(div3);\n toolbar.append(div2)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n \n function doIT(m){\n theScope.send(m);\n }\n \n function doThis(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":380,"y":340,"wires":[[]]},{"id":"79d56da6.863e74","type":"ui_group","z":"","name":"Buttons","tab":"aea44e8c.a6024","order":1,"disp":true,"width":"6","collapse":false},{"id":"24f6ffb4.136468","type":"ui_group","z":"","name":"TopBar","tab":"8e0f7752.ff481","order":13,"disp":false,"width":"1","collapse":false},{"id":"aea44e8c.a6024","type":"ui_tab","z":"","name":"Ausgänge","icon":"<i class=\"fa fa-lightbulb-o\" aria-hidden=\"true\"></i>","order":13},{"id":"8e0f7752.ff481","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]`

`

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [9 January 2019 15:20 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/34 "2019-01-09T15:20:53Z")

</div>

> [@Tobi](#):
>
> I want to hide the side-nav too

Sorry, this I do not know. I assume the code for this is in the dashboard nodes but I might be wrong on this

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [10 January 2019 06:24 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/35 "2019-01-10T06:24:23Z")

</div>

Ok, another question, is there a posibillity to fix the position?  
For the groups you do it with position: fixed; top: 11px; left 22px;  
Is that possible for the Topbar?

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [10 January 2019 07:28 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/36 "2019-01-10T07:28:34Z")

</div>

Sorry, I do not have such knowledge

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [10 January 2019 07:32 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/37 "2019-01-10T07:32:21Z")

</div>

ok,  
if you want to display the buttons and hide the navigation menu, you have to implement both code parts in a template, then it works

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [11 January 2019 11:25 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/38 "2019-01-11T11:25:00Z")

</div>

Nothing meaningful to add.  
Just wanted to appreciate @Tobi for great idea and reasonable implementation of what [I tried to do some time ago](https://discourse.nodered.org/t/all-tab-titles-or-icons-always-visible/66). Thank you!

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [12 January 2019 17:50 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/39 "2019-01-12T17:50:33Z")

</div>

Hi,

I slightly modded @Tobi's flow to get following:

- Previous and Next tab buttons.
- Head title click returns to the main tab.
- Date/time in custom format (kinda european).
- Merge side bar hide into top-bar controls.

My question is:  
The ui\_template node can be a part of of page or a widget in a group. Why the script works when it's widget in a group and doesn't work when it's part of of page?

```
[
    {
        "id": "bf7f52f8.7764b",
        "type": "ui_template",
        "z": "9f3346aa.d4fc48",
        "group": "721fb8ce.3dc1d8",
        "name": "TopBar",
        "order": 1,
        "width": "1",
        "height": "1",
        "format": "<script>\n $(\"md-sidenav\").hide();\n $(\"md-toolbar button\").hide(); \n</script>\n<script id=\"clockScript1\" type=\"text/javascript\">\n var home = new Object();\n home.payload = 0;\n var prev = new Object();\n prev.payload = '-1';\n var next = new Object();\n next.payload = '+1';\n var language= new Object();\n language.payload = 'change';\n var theScope = scope;\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n/*\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/wieland_logo.jpeg'\n logo.height = 45;\n div1[0].style.margin = '10px auto';\n\n div1.append(logo);\n*/\n //add clock\n var divDate = $('<div/>');\n var p = $('<p/>');\n\n divDate.append(p);\n divDate[0].style.margin = '5px';\n \n\n function displayTime() {\n var options = {weekday: 'short', year: '2-digit', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'};\n p.text(new Date().toLocaleString(\"en-GB\", options));\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var divTitle = $('<div title=\"Go to Main Screen\"/>');\n var t = document.createTextNode(\"Smart Home\"); // hier den Title eingeben\n divTitle.append(t)\n divTitle[0].style.margin = '40px auto';\n divTitle[0].style.size = '40';\n divTitle[0].addEventListener(\"click\", doIT.bind(null, home));\n \n // add button\n var divPrev = $('<div/>');\n var button1 = document.createElement(\"BUTTON\");\n var lab1 = document.createTextNode(\"Prev\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button1.height=45;\n //button.left=50; \n button1.appendChild(lab1);\n button1.addEventListener(\"click\", doIT.bind(null, prev));\n divPrev.append(button1);\n \n var divNext = $('<div/>');\n var button2 = document.createElement(\"BUTTON\");\n var lab2 = document.createTextNode(\"Next\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button2.height=45;\n //button.left=50; \n button2.appendChild(lab2);\n button2.addEventListener(\"click\", doIT.bind(null, next));\n divNext.append(button2);\n\n var div6 = $('<div/>');\n var button3 = document.createElement(\"BUTTON\");\n var lab3 = document.createTextNode(\"Main\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button3.height=45;\n //button.left=50; \n button3.appendChild(lab3);\n button3.addEventListener(\"click\", doIT.bind(null, home));\n div6.append(button3);\n \n //var divNext =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/home.png\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doThis.bind(null,language));\n //divNext.append(taster);\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(divNext);\n toolbar.append(divPrev);\n // toolbar.append(div6);\n toolbar.append(divTitle);\n //toolbar.append(div1);\n toolbar.append(divNext);\n toolbar.append(divDate)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n \n function doIT(m){\n theScope.send(m);\n }\n \n // function doThis(m){\n // theScope.send(m);\n // }\n });\n \n</script>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 440,
        "y": 1140,
        "wires": [
            [
                "4136bbf3.510a14",
                "f585c34a.1165c"
            ]
        ]
    },
    {
        "id": "4136bbf3.510a14",
        "type": "debug",
        "z": "9f3346aa.d4fc48",
        "name": "topbar",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "x": 630,
        "y": 1140,
        "wires": []
    },
    {
        "id": "f585c34a.1165c",
        "type": "ui_ui_control",
        "z": "9f3346aa.d4fc48",
        "name": "Control tabs",
        "x": 650,
        "y": 1220,
        "wires": [
            []
        ]
    },
    {
        "id": "721fb8ce.3dc1d8",
        "type": "ui_group",
        "z": "",
        "name": "Living room",
        "tab": "531ef1f0.9a426",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "531ef1f0.9a426",
        "type": "ui_tab",
        "z": "",
        "name": "MyDashboard",
        "icon": "home",
        "order": 1
    }
]
```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [12 January 2019 18:40 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/40 "2019-01-12T18:40:13Z")

</div>

If I understand the question, your `<script>` works inside a group, but _not_ when inserted in the `<head>` of the page? I would expect that, since the scripts loaded into the head of the dashboard do not have access to the Angular scope, in the same way that the other widgets do... there may be some trick to grab the Angular scope, but I'm not sure how to do that.

[Previous page](https://discourse.nodered.org/t/button-in-topbar/6377.md?page=1)

[Next page](https://discourse.nodered.org/t/button-in-topbar/6377.md?page=3)