Button in TopBar

Dashboard
41

I also would love to be able to have a global ui-template that works in all pages for such use cases. Unfortunately I don't know how to do this and often resort to duplicating code for each page.

42

By definition, any script that you place into the <head> element of the dashboard is available to all the dashboard "pages" -- which are all part of the Single Page Application (SPA) that is the dashboard...

The biggest difference is that <script>...</script> sections embedded inside the body of the dashboard are executed as the page is rendered. By contrast, the script code inside the page head is just "sitting there", waiting to be called by the body of the page. So, I believe you can just put your common code inside named functions in the head, parameterize the argument list, and then pass in the data or elements as inputs wherever you need some UI logic in your ui_template code.

Hope that makes sense... if you can post some more specific code that you want to call from multiple pages, I can try to re-work it for you.

43

Thank you, Steve. That's clear explanation why the JS doesn't work from the head.

Err... I'm not UI programmer, just learning how to deal with Node-Red. An example "how to call functions from the head" in the page body under Node-Red restrictions could help.

44

@shrickus

What is the arrangement in the TopBar? can I somehow set the position of the individual components?

After I changed the font size of my text, everything is moved to the left, that does not look nice:

    var div4 = $('<div/>');
    var span = document.createElement('span');
    span.style.fontSize = '150%';
    //span.style.textAlign="center"; //donĀ“t work
    span.appendChild(document.createTextNode('TRAINING'));
    div4.append(span);
45

Remember fontsize using % says set this to nn% of what ever size the parent element uses

46

ok, thanks for the tip, but it looks ok.

my problem is the position of the components in the TopBar

47

That's solved by using CSS styling -- but i don't have your page, so I cannot tell you how right now.
Open the browser's Dev Console F12, select the Top bar elements, and see what styles you want to apply. Once it looks good, copy those directives back into your ui_template code...

48

Ok if I changed it in the browser Dev Console it work. But I donĀ“t know how to set the position in the code.

> // add Text
>         var div4 = $('<div/>');
>         var span = document.createElement('span');
>         span.style.fontSize = '150%';
>         //span.style.textAlign="center"; // donĀ“t work
>         span.appendChild(document.createTextNode('TRAINING'));
>         div4.append(span);
>         div4.style.left: 80vw;
49

I believe that <span> elements are not block elements, so will only take as much width as their contents. Try putting the alignment on the div4 element instead?

All of this setting of styles using js code is not very standard, or maintainable. Instead, I would just give the topbar a specific id or class:, and use regular css directives, something like this:

<style>
    #topbar {
        left: 80vw;
        text-align: center
    }
    #topbar span {
        font-size: 150%;
    }
</style>

<div id="topbar">
    <span>TRAINING</span>
</div>
50

Can I add elements to the Topbar or Toolbar in this way?
if I understand it correctly, I enter the following code into a new UI template node and this adds then the item to the topbar?

51

Ah, sorry -- too many discussions! I forgot we were talking about working in the <head> of the page...

But yes, you can put the CSS <style> element into the page head -- that means the script to add dom elements would only have to populate content of the topbar, not all the styling.

52

ok, I will try it

53

I did not manage that,

Another question
If add the button so it is in the middle:

 var div4 = $('<div/>');
        div4.left="80vw";
        var t = document.createTextNode("TRAINING"); // 
        div4.append(t)
        div4[0].style.margin = '40px auto';
        div4[0].style.size = '40';

If I add the button with <span>, it shifts to the left and takes all other elements in the TopBar with to the left

 var div4 = $('<div/>');
        var span = document.createElement('span');
        span.style.fontSize = '150%';
        span.style.textAlign="center"; // donĀ“t work
        span.appendChild(document.createTextNode('TRAINING'));
        div4.append(span);
                 
        //div4.style.textAlign = "center";
54

Have you tried what I suggested 2 days ago?

55

yes, I tried, but it did not work.
If I do it this way, nothing is shown to me in the TopBar, from my added elements

  // add Text
        var div4 = $('<div/>');
        var span = document.createElement('span');
        span.style.fontSize = '150%';
        //span.style.textAlign="center"; // donĀ“t work
        span.appendChild(document.createTextNode('TRAINING'));
        div4.append(span);
        
        div4.style.textAlign ="center";
56

Hi,

I would like to change the title in the TopBar depending on the payload, is this possible? So that when user A logs on title A appears and for user B title B

57

No, but you can add text as previously discussed.

58

ok, so i can only display a static text in TopBar?

59

you can make any extra test as dynamic as you like.

60

Maybe I do not understand them correctly, but my question was, can I display a text (=title) Dynamic in TopBar?