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>