Help with header code

General
1

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 ?

<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>
2

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

e.g.

<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>
3

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 ?

4

sure

<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>
5

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 ?

6

Got it :wink:

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

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

Start with adding ...

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

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

chrome devtools...
image