# Customized Dashboard toolbar does not update after TAB change

**URL:** <https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [30 December 2022 14:58 UTC](https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959 "2022-12-30T14:58:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![svho](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@svho](https://discourse.nodered.org/u/svho)\
**Post date:** [30 December 2022 14:58 UTC](https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959/1 "2022-12-30T14:58:33Z")

</div>

In my project (raspberry, MQTT, SignalK(NMEA0183), node-red) to implement a navigation plotter, I would like to display the information time and GPS position in the toolbar. In addition, button NEXT / BACK should be available. This also works, unfortunately the toolbar does not update properly when changing TAB. More and more elements are being added.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6daa8e4987dcfe879c03d38b18a78b128422d0ea.jpeg)

The customized toolbar is created via a ui\_template. Created from clock in toolbar. Unfortunately, a template has to be created for each tab, because it does not run when integrated into the head section.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a0c766649fda5447ac82795558385ab3a7f3b51.png)

Do you have an idea how an automatic refresh of the toolbar can be triggered after tab change or how the problem can be solved?

I hope the question is correctly asked in my first post here.

```auto

<script id="buttonScript" type="text/javascript">

var theScope = scope;

        // add buttonNEXT
        var div = $('<div/>');
        var button = document.createElement("BUTTON");
        var img = new Image();
        img.src = '/next-button-icon.png';
        img.height = 50 ;
        button.appendChild(img);
        button.addEventListener("click", doIt);
        button.setAttribute('style', 'background-color: transparent; border-style: none');
        div.append(button);
 
 
        // add buttonBACK
        var div1 = $('<div/>');
        var button1 = document.createElement("BUTTON");
        var img = new Image();
        img.src = '/round-line-left-arrow-icon.png';
        img.height = 50 ;
        button1.appendChild(img);
        button1.addEventListener("click", doItBACK);
        button1.setAttribute('style', 'background-color: transparent; border-style: none');
        div1.append(button1);
 
        
              //add positionlong
        var divlong = $('<div/>');
        var plong = $('<plong id="headerStatuslong" />');
        divlong[0].style.margin = '1px 1px 1px auto';
        divlong.append(plong);
        
        
                    //add positionlat
        var divlat = $('<div/>');
        var plat = $('<plat id="headerStatuslat" />');
        divlat[0].style.margin = '1px 1px 1px auto';
        divlat.append(plat);
        
        
        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');
        div2.append(p);
        div2[0].style.margin = '5px 5px 5px auto';
        
        
        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
            clockInterval = setInterval(displayTime, 1000);

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

function addToToolbar() {
    var toolbar = $('.md-toolbar-tools');
    if(!toolbar.length) return;

    
    toolbar.append(div1);    
    toolbar.append(divlat);
    toolbar.append(divlong);
    toolbar.append(div2);
    toolbar.append(div);      

    
    
    
    clearInterval(addToToolbarTimer);
}

 addToToolbarTimer = setInterval(addToToolbar, 250);

var msgNEXT = { payload:"NEXT" }
var msgBACK = { payload:"BACK" }

function doIt() {
    theScope.send(msgNEXT);
 }

function doItBACK() {
    theScope.send(msgBACK);
}
 
</script>

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [30 December 2022 22:24 UTC](https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959/2 "2022-12-30T22:24:58Z")

</div>

Have you looked at the `ui_control node`?

---

<div class="post-metadata">

**Author:** ![svho](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@svho](https://discourse.nodered.org/u/svho)\
**Post date:** [31 December 2022 10:10 UTC](https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959/3 "2022-12-31T10:10:07Z")

</div>

Hi, yes. ui\_control node is working correctly. It gets the message Change TAB and executes it

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f59e608e2ee38bf907560b962d9f7432820799cc.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:** [14 January 2023 10:10 UTC](https://discourse.nodered.org/t/customized-dashboard-toolbar-does-not-update-after-tab-change/72959/4 "2023-01-14T10:10:39Z")

</div>

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