# Help with header code

**URL:** <https://discourse.nodered.org/t/help-with-header-code/41835>\
**Category:** General\
**Created:** [1 March 2021 16:25 UTC](https://discourse.nodered.org/t/help-with-header-code/41835 "2021-03-01T16:25:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [1 March 2021 16:25 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/1 "2021-03-01T16:25:48Z")

</div>

Hi folks,

Can anyone help me with this please.

I have mashed up bits of code from various posts and put this in a "widget in group" template, it is to add a button to the header and also modify content and style of some text elements also on the header, from a second template set to head section.

It does work as it is now but it creates additional buttons when switching tabs-

I'm not sure if it’s possible / desirable to add both parts together so that there is only 1 scope section ?

Also how do I stop it from creating additional buttons on reloading of page ?

```auto
<script>
    (function(scope) {
        
        scope.$watch('msg', function(data) {
            var elem = document.getElementById(data.topic)
            if(elem !== null) {
                if (data.hasOwnProperty('fontFamily')) {elem.style.fontFamily = data.fontFamily}
                if (data.hasOwnProperty('fontStyle')) {elem.style.fontStyle = data.fontStyle}
                if (data.hasOwnProperty('color')) {elem.style.color = data.color}
                if (data.hasOwnProperty('fontSize')) {elem.style.fontSize = data.fontSize}
                if (data.hasOwnProperty('fontWeight')) {elem.style.fontWeight = data.fontWeight}
                if (data.hasOwnProperty('payload')) {elem.innerHTML = data.payload};
                if (data.hasOwnProperty('image')) {elem.src = data.image};
                
            }
        });
    })(scope);
</script>

<script>
    var theScope = scope;
    var button = document.createElement('BUTTON');
    button.addEventListener('click', sendPayload);
    button.innerHTML ='Refresh'
    var titleBar = document.getElementById("nr-dashboard-toolbar");
    titleBar.append(button);
    
    function sendPayload(){
        theScope.send("1");
    }
</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:** [1 March 2021 23:53 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/2 "2021-03-01T23:53:26Z")

</div>

One way (bit hacky but hey ho)... instead of blindly creating a button, check if its id already exists in the dom

e.g.

```auto
<script>
    var theScope = scope;
    var myButton = document.getElementById("my-refresh-button");
    if(!myButton) {
      var button = document.createElement('BUTTON');
      button.addEventListener('click', sendPayload);
      button.innerHTML ='Refresh'
      button.id = 'my-refresh-button'
      var titleBar = document.getElementById("nr-dashboard-toolbar");
      titleBar.append(button);
    }
    function sendPayload(){
        theScope.send("1");
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [1 March 2021 23:56 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/3 "2021-03-01T23:56:44Z")

</div>

Thanks - I was kind of thinking on those lines but not sure of syntax to check.

What about the scope part - can /should it be made into one 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:** [1 March 2021 23:58 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/4 "2021-03-01T23:58:11Z")

</div>

> [@Sean-McG](#):
>
> What about the scope part - can /should it be made into one script ?

sure

```auto
<script>
    (function(scope) {
        
        scope.$watch('msg', function(data) {
            var elem = document.getElementById(data.topic)
            if(elem !== null) {
                if (data.hasOwnProperty('fontFamily')) {elem.style.fontFamily = data.fontFamily}
                if (data.hasOwnProperty('fontStyle')) {elem.style.fontStyle = data.fontStyle}
                if (data.hasOwnProperty('color')) {elem.style.color = data.color}
                if (data.hasOwnProperty('fontSize')) {elem.style.fontSize = data.fontSize}
                if (data.hasOwnProperty('fontWeight')) {elem.style.fontWeight = data.fontWeight}
                if (data.hasOwnProperty('payload')) {elem.innerHTML = data.payload};
                if (data.hasOwnProperty('image')) {elem.src = data.image};
                
            }
        });

        var theScope = scope;
        var myButton = document.getElementById("my-refresh-button");
        if(!myButton) {
          var button = document.createElement('BUTTON');
          button.addEventListener('click', sendPayload);
          button.innerHTML ='Refresh'
          button.id = 'my-refresh-button'
          var titleBar = document.getElementById("nr-dashboard-toolbar");
          titleBar.append(button);
        }
        function sendPayload(){
            theScope.send("1");
        }

    })(scope);

</script>

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [2 March 2021 00:05 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/5 "2021-03-02T00:05:58Z")

</div>

Thanks again will check that out - while I'm on a roll

As the button is hard up against the tab name I tried  
button.margin = '50px auto';  
but that doesn't work ?

Does it need to be within a DIV ?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [2 March 2021 00:15 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/6 "2021-03-02T00:15:10Z")

</div>

Got it 😉

```auto
button.style="margin: 50px auto";

```

---

<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:** [2 March 2021 00:15 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/7 "2021-03-02T00:15:19Z")

</div>

add a style tag and give your button a class (or use the #id) then play with that.

Start with adding ...

```auto
<style>
#my-refresh-button {
    margin-left: 100px;
}
</style>

```

then tweak it in devtools (f12) till it looks right...

chrome devtools...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb73c3333d6a1b4d525040dbcc6fa21581c95223.png)

---

<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:** [16 March 2021 00:15 UTC](https://discourse.nodered.org/t/help-with-header-code/41835/8 "2021-03-16T00:15:48Z")

</div>

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