# Any way to display a payload in the title bar?

**URL:** <https://discourse.nodered.org/t/any-way-to-display-a-payload-in-the-title-bar/42723>\
**Category:** Dashboard\
**Created:** [16 March 2021 14:19 UTC](https://discourse.nodered.org/t/any-way-to-display-a-payload-in-the-title-bar/42723 "2021-03-16T14:19:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zbyrd](https://avatars.discourse-cdn.com/v4/letter/z/13edae/32.png) [@zbyrd](https://discourse.nodered.org/u/zbyrd)\
**Post date:** [16 March 2021 14:19 UTC](https://discourse.nodered.org/t/any-way-to-display-a-payload-in-the-title-bar/42723/1 "2021-03-16T14:19:48Z")

</div>

I have a dashboard that displays industrial sensor data. Each machine gets its own tab and I use a ui\_control node to change tabs every 30 seconds so all the data can be seen. However, I would like to make the system-wide air pressure visible on **every tab** without having to manage a bunch of redundant nodes. I had the idea of displaying this payload in the title bar but I wasn't sure how to go about that. The search function turned up some flows that can display a date in this way but I'm too dumb to reverse engineer this to solve my problem. Any ideas?

---

<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:** [17 March 2021 00:48 UTC](https://discourse.nodered.org/t/any-way-to-display-a-payload-in-the-title-bar/42723/2 "2021-03-17T00:48:17Z")

</div>

I am also trying to do something similar.

I have managed to hack this together based on the clock example.  
Add this to a ui template node set to site head section.

You can follow this example to add or remove elements as needed.

Then to update the information create a ui template on each tab using my second code, set size to auto so they are invisible.

Elements are targeted by msg.topic eg

msg.topic = status  
msg.topic = user

Send a message with the relevant properties to change, eg  
msg.fontSize,  
msg.color

msg.payload contains the text to display

```auto
<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div />');
        var logo = new Image();
        logo.src = '/images/logo.png'
        logo.height = 50;
        logo.id="logo"
        div1[0].style.margin = ' auto';
        div1.append(logo);

        //add status message
        var div2 = $('<div id="status" />');
        div2[0].style.margin = '50px auto';
        div2[0].style.color ='white';
        div2[0].style.fontSize ='xx-large';
        div2[0].style.fontWeight='bold';
        
        
         //add user name
        var div3 = $('<div id="user" />');
        div3[0].style.margin = '50px auto';
        div3[0].style.color ='white';
        div3[0].style.fontSize ='xx-large';
        div3[0].style.fontWeight='bold';
        
        
        //add clock
        var div4 = $('<div id="clock"/>');
        var p = $('<p/>');
        
        div4[0].style.fontWeight='bold';
        div4[0].style.fontSize='xx-large' 
        div4.append(p);
        
        function displayTime() {
        var options = {weekday: 'long', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit',second: '2-digit'};
        p.text(new Date().toLocaleString("en-GB", options));
        }
        
        
        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(div2);
            toolbar.append(div3);
            toolbar.append(div4);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

```auto
<script>
    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>

```

---

<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 April 2021 00:49 UTC](https://discourse.nodered.org/t/any-way-to-display-a-payload-in-the-title-bar/42723/3 "2021-04-16T00:49:06Z")

</div>

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