# 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:** 1

<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: [4 January 2019 10:17 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/1 "2019-01-04T10:17:04Z")

</div>

Hi,

I have already added a logo, text and date and time to TopBar. Now I want to implement a button that keeps me going back to my home screen. How could I best implement this and how can I read out the current status of the button in the TobBar to pass it to the ui\_control?

Thanks,

Tobi

---

<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: [7 January 2019 07:22 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/2 "2019-01-07T07:22:56Z")

</div>

Does anyone know how this works?

---

<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: [7 January 2019 07:33 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/3 "2019-01-07T07:33:42Z")

</div>

The template info sidebar shows how to add a button. Combine this with how you already add to the topbar..

---

<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: [7 January 2019 09:09 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/4 "2019-01-07T09:09:05Z")

</div>

I´m able to implement a button with this code:

> ```
> > 
> > var div3 = $('<div/>');
> > var button = document.createElement("BUTTON");
> > var b = document.createTextNode("Home")
> > button.appendChild(b);
> > //button.ng-click="send({payload:'1'})";
> > div3.append(button);
> 
> ```

but the ng-click option doesn´t work

![button_inTopBar](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4995a8f7be42ba5953a7218f88ac41303c1d033f.png)

---

<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: [7 January 2019 10:25 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/5 "2019-01-07T10:25:52Z")

</div>

TYou may need to use CSS to set it's z-index higher so it is not covered by another element. Use a browsers code inspector to look at that element and then add `z-index: 99` and see if you can click it.

if you don't know about `z-index` then take a look at [https://www.w3schools.com/cssref/pr\_pos\_z-index.asp](https://www.w3schools.com/cssref/pr_pos_z-index.asp)

---

<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: [7 January 2019 10:59 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/6 "2019-01-07T10:59:01Z")

</div>

ok I'll take a look at it, more important right now is how I can send a payload with the button

---

<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: [7 January 2019 11:40 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/7 "2019-01-07T11:40:41Z")

</div>

What is your current flow?

---

<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: [7 January 2019 11:49 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/8 "2019-01-07T11:49:12Z")

</div>

> [Tobi](https://discourse.nodered.org/u/Tobi)

[3h](https://discourse.nodered.org/t/button-in-topbar/6377/4)

I´m able to implement a button with this code:

> ```auto
> > 
> var div3 = $('<div/>');
> var button = document.createElement("BUTTON");
> var b = document.createTextNode("Home")
> button.appendChild(b);
> //button.ng-click="send({payload:'1'})";
> div3.append(button);
> 
> ```

but the ng-click option doesn´t work

![button_inTopBar](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4995a8f7be42ba5953a7218f88ac41303c1d033f.png)

I want to send a payload with this button in the topbar.

This is my code in the ui\_template :

```
  <script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;
/*
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '/wieland_logo.jpeg'
        logo.height = 45;
        div1[0].style.margin = '10px auto';

        div1.append(logo);
*/
        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';
        

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        // add Text
        var div4 = $('<div/>');
        var t = document.createTextNode("TRAINING"); // hier den Title eingeben
        
        div4.append(t)
        div4[0].style.margin = '10px auto';
        div4[0].style.size = '10';
      
        
        
        
        // add button
        var div3 = $('<div/>');
        var button = document.createElement("BUTTON");
        var b = document.createTextNode("Home")
        button.appendChild(b);
        //div3.position: fixed;
        //div3.right: 150px;
        //button.ng-click="send({payload:'1'})";
        div3.append(button);
        
        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div4);
            //toolbar.append(div1);
            toolbar.append(div3);
            toolbar.append(div2)
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

---

<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 07:58 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/9 "2019-01-08T07:58:53Z")

</div>

I still have not managed to send a payload from the button 🙈, which I can then process further

Any tips on how this could work

---

<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 08:56 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/10 "2019-01-08T08:56:01Z")

</div>

your ng-click is still commented out...

---

<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 09:49 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/11 "2019-01-08T09:49:20Z")

</div>

i know, but if i embed it, i will not see anything in TopBar

![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bcac3b09f7bcde560883ba0669d8c8bfc020f01f.png)

This is the view after embed ng-click

---

<div class="post-metadata">

### Author: ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)
#### Post date: [8 January 2019 10:18 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/12 "2019-01-08T10:18:51Z")

</div>

Well, if you use `button.ng-click="send({payload:'1'})";` then it won't work as `-` can't be a part of a name, it's translated as `button.ng` minus `click="send({payload:'1'})";` and it does not make sense.

To add onClick dynamically use this code:  
`button.addEventListener('click', function() {alert(1);/*send({payload:'1'})*/});`  
however, `send()` function is not available to me for some reason even when trying to save the reference in the template scope like:

```auto
var sendFn = send;
button.addEventListener('click', function() {sendFn({payload:'1'})});

```

I get `ReferenceError: send is not defined` (the same with `node.send` -\> `node is not defined`).

---

<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 10:24 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/13 "2019-01-08T10:24:18Z")

</div>

> [@Marooned](#):
>
> button.addEventListener('click', function() {alert(1);/_send({payload:'1'})_/});

Thanks for the tip.

Now a pop-up window will open, but I can not handle this information anymore. Would you have an idea for that?

---

<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 11:03 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/14 "2019-01-08T11:03:12Z")

</div>

At the top of your function you need to reference the scope

```
<script id="clockScript1" type="text/javascript">
var clockInterval;
(function (scope) {

```

then at the bottom - pass it in..

```
        addToToolbarTimer = setInterval(addToToolbar, 250);
})(scope);

```

Then somewhere inside you function just before the add button

```
        function send(m) { scope.send(m); }
    
    // add button
```

---

<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 12:32 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/15 "2019-01-08T12:32:21Z")

</div>

Just simplified your example a bit. As mentioned, you need to reference the scope

```auto
<script id="buttonScript" type="text/javascript">
var theScope = scope;

// add button
var div = $('<div/>');
var button = document.createElement("BUTTON");
var b = document.createTextNode("Home")
button.appendChild(b);
button.addEventListener("click", doIt);
div.append(button);

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

function addToToolbar() {
    var toolbar = $('.md-toolbar-tools');
    if(!toolbar.length) return;
    toolbar.append(div);
    clearInterval(addToToolbarTimer);
}

addToToolbarTimer = setInterval(addToToolbar, 250);

function doIt() {
    theScope.send("1");
}

</script>

```

---

<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 13:31 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/16 "2019-01-08T13:31:29Z")

</div>

maybe I'm too stupid but if I change the code I will not see anything in the TopBar:

```
<script id="clockScript1" type="text/javascript">
    var theScope = scope;
    var clockInterval;
    $(function () {
        if (clockInterval) return;
/*
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '/wieland_logo.jpeg'
        logo.height = 45;
        div1[0].style.margin = '10px auto';

        div1.append(logo);
*/
        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';
        

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        // add Text
        var div4 = $('<div/>');
        var t = document.createTextNode("TRAINING"); // hier den Title eingeben
        div4.append(t)
        div4[0].style.margin = '40px auto';
        div4[0].style.size = '40';
      
        // add button
        var div3 = $('<div/>');
        var button = document.createElement("BUTTON");
        var b = document.createTextNode("Home")
        button.appendChild(b);
        button.addEventListener("click", doIT);
        div3.append(button);
        
        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div4);
            //toolbar.append(div1);
            toolbar.append(div3);
            toolbar.append(div2)
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
   
        function doIT(){
            theScope.send("change");
        }
    });
    
</script>

```

and thats the result in Dahboard

 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bcac3b09f7bcde560883ba0669d8c8bfc020f01f.png)

---

<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 13:54 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/17 "2019-01-08T13:54:49Z")

</div>

Your code works just perfect for me (using Chrome if that matters)  
Did you refresh the browser after you deployed it?

---

<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 13:56 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/18 "2019-01-08T13:56:43Z")

</div>

maybe thats the problem, I´m working with firefox or microsoft edge.

Yes I did a refresh

---

<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 14:02 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/19 "2019-01-08T14:02:24Z")

</div>

Normally I w ork with a macbook, just tried it with Safari it works fine  
Also with Edge from a win10 box, works fine

---

<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 14:04 UTC](https://discourse.nodered.org/t/button-in-topbar/6377/20 "2019-01-08T14:04:43Z")

</div>

This is the flow

PS I made a small change to allow you to send the value as parameter instead of hard-coded (maybe not needed)

```auto
[{"id":"c340cad4.302a18","type":"ui_template","z":"d01d2553.fd9838","group":"cac67f0e.f01fa","name":"","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var param = 'lets 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 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":false,"fwdInMessages":true,"templateScope":"local","x":490,"y":1270,"wires":[["db91e661.418798"]]},{"id":"db91e661.418798","type":"debug","z":"d01d2553.fd9838","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":660,"y":1270,"wires":[]},{"id":"cac67f0e.f01fa","type":"ui_group","z":"","name":"Button Top","tab":"95753136.fcd6d","disp":true,"width":"6","collapse":false},{"id":"95753136.fcd6d","type":"ui_tab","z":"","name":"Button tab","icon":"dashboard","order":1}]

```

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