Add Button Icon to dashboard

Hello all!

I want to add a new button so i can collapse all the groups.
image

So far i have this flow.

[
    {
        "id": "d16906d2cc3c7ede",
        "type": "inject",
        "z": "c1337e84224bd2b5",
        "name": "",
        "props": [],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 150,
        "y": 220,
        "wires": [
            [
                "b269e00d16d197b8"
            ]
        ]
    },
    {
        "id": "b269e00d16d197b8",
        "type": "function",
        "z": "c1337e84224bd2b5",
        "name": "Close all groups",
        "func": "msg.payload = {\"group\":{\"close\":[\n    \"MyGroups_GroupA\",\n    \"MyGroups_GroupB\",\n    \"MyGroups_GroupC\"\n\n]}};\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 220,
        "wires": [
            [
                "07044d4ff8890f49"
            ]
        ]
    },
    {
        "id": "07044d4ff8890f49",
        "type": "ui_ui_control",
        "z": "c1337e84224bd2b5",
        "name": "",
        "events": "all",
        "x": 760,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "5dcf1fbab82ec1fb",
        "type": "inject",
        "z": "c1337e84224bd2b5",
        "name": "",
        "props": [],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 150,
        "y": 260,
        "wires": [
            [
                "46c06bc1fbe4c03c"
            ]
        ]
    },
    {
        "id": "46c06bc1fbe4c03c",
        "type": "function",
        "z": "c1337e84224bd2b5",
        "name": "open all groups",
        "func": "msg.payload = {\"group\":{\"open\":[\n    \"MyGroups_GroupA\",\n    \"MyGroups_GroupB\",\n    \"MyGroups_GroupC\"\n\n]}};\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 260,
        "wires": [
            [
                "07044d4ff8890f49"
            ]
        ]
    },
    {
        "id": "3c86a2a18c2aec09",
        "type": "inject",
        "z": "c1337e84224bd2b5",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "42",
        "payloadType": "num",
        "x": 370,
        "y": 320,
        "wires": [
            [
                "a5f14c91df0bdd4f",
                "26acbf9803f0bf82",
                "6b277beaad37b8c5"
            ]
        ]
    },
    {
        "id": "a5f14c91df0bdd4f",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 2",
        "label": "",
        "tooltip": "",
        "group": "93c0ae27724e30ac",
        "order": 2,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 770,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "26acbf9803f0bf82",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 3",
        "label": "",
        "tooltip": "",
        "group": "6d362c521372c2da",
        "order": 3,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 770,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "6b277beaad37b8c5",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 1",
        "label": "",
        "tooltip": "",
        "group": "b87e85fbe518f1ce",
        "order": 1,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 770,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "dc44a9ded8f9acfe",
        "type": "ui_template",
        "z": "c1337e84224bd2b5",
        "group": "b87e85fbe518f1ce",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<div class=\"md-toolbar-collapse_expand_btn\">\n</div>\n<button class=\"md-icon-button md-button md-collapsebtn\" type=\"button\">\n</button>\n\n\n<style>\n    .md-toolbar-collapse_expand_btn {\n    border-radius: 50%;\n    height: 40px;\n    line-height: 24px;\n    margin: 0 6px;\n    min-width: 0;\n    padding: 8px;\n    width: 40px\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 420,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "93c0ae27724e30ac",
        "type": "ui_group",
        "name": "GroupB",
        "tab": "30414ecef55d0256",
        "order": 8,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "6d362c521372c2da",
        "type": "ui_group",
        "name": "GroupC",
        "tab": "30414ecef55d0256",
        "order": 9,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "b87e85fbe518f1ce",
        "type": "ui_group",
        "name": "GroupA",
        "tab": "30414ecef55d0256",
        "order": 7,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "30414ecef55d0256",
        "type": "ui_tab",
        "name": "MyGroups",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

I'm stuck with some HTML and CSS basics.

Thanks a lot!

Regards

You'll want to attach the button to a ui control node. Then you'll want to have the button send a payload of:

{group:{hide:["tab_name_group_name_with_underscores"]}}

You'll find more documentation in the help guide for the ui control node. But that's how you minimize a group or groups. Also, you'll want to make sure that each group is set for "Allow group to be collapsed" in the group setting.

Hi!

Thanks a lot!

Do you have any simple flow example?. I'm new about this.

Regards!

I don't. But you don't really need one. You have your button already, if my assumption is correct. All you have to do is attach a ui-control node to the button output. Then in your button, it has a line for "When clicked send:". Simply put the line I gave you before in that box and put in quotes the names of your groups. If you have multiple, it's like this:

{group:{hide:["Group1", "Group2", "New_Group", etc...]}}

If that doesn't work (Node-Red is slightly different than normal JavaScript), you'll just need to add quotes to your keys like this:

{"group":{"hide":["Group1", "Group2", "New_Group", etc...]}}

Make sense?

Ok, i get it working, but there is one issue. The node button is attached to a group and i need the button to be placed outside the group.

If i collapse GroupA the button dissapear.

This is what i have by far.

[
    {
        "id": "b269e00d16d197b8",
        "type": "function",
        "z": "c1337e84224bd2b5",
        "name": "Close all groups",
        "func": "msg.payload = {\"group\":{\"close\":[\n    \"MyGroups_GroupA\",\n    \"MyGroups_GroupB\",\n    \"MyGroups_GroupC\"\n\n]}};\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 220,
        "wires": [
            [
                "07044d4ff8890f49"
            ]
        ]
    },
    {
        "id": "07044d4ff8890f49",
        "type": "ui_ui_control",
        "z": "c1337e84224bd2b5",
        "name": "",
        "events": "all",
        "x": 820,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "46c06bc1fbe4c03c",
        "type": "function",
        "z": "c1337e84224bd2b5",
        "name": "open all groups",
        "func": "msg.payload = {\"group\":{\"open\":[\n    \"MyGroups_GroupA\",\n    \"MyGroups_GroupB\",\n    \"MyGroups_GroupC\"\n\n]}};\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 260,
        "wires": [
            [
                "07044d4ff8890f49"
            ]
        ]
    },
    {
        "id": "3c86a2a18c2aec09",
        "type": "inject",
        "z": "c1337e84224bd2b5",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "42",
        "payloadType": "num",
        "x": 430,
        "y": 320,
        "wires": [
            [
                "a5f14c91df0bdd4f",
                "26acbf9803f0bf82",
                "6b277beaad37b8c5"
            ]
        ]
    },
    {
        "id": "a5f14c91df0bdd4f",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 2",
        "label": "",
        "tooltip": "",
        "group": "93c0ae27724e30ac",
        "order": 2,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 830,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "26acbf9803f0bf82",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 3",
        "label": "",
        "tooltip": "",
        "group": "6d362c521372c2da",
        "order": 3,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 830,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "6b277beaad37b8c5",
        "type": "ui_numeric",
        "z": "c1337e84224bd2b5",
        "name": "zone 1",
        "label": "",
        "tooltip": "",
        "group": "b87e85fbe518f1ce",
        "order": 1,
        "width": 5,
        "height": 1,
        "wrap": false,
        "passthru": false,
        "topic": "",
        "topicType": "str",
        "format": "{{msg.payload}} %",
        "min": "0",
        "max": "100",
        "step": "1",
        "className": "",
        "x": 830,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "dc44a9ded8f9acfe",
        "type": "ui_template",
        "z": "c1337e84224bd2b5",
        "group": "b87e85fbe518f1ce",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .fa {\n        position: relative;\n        left: 0px !important;\n    }\n    .visible {\n        border-top-width: 3px !important;\n        border-bottom-width: 2px !important;\n        border-inline-end-color: #00605f !important;\n        border-left-color: #00605f !important;\n        border-top-color: #00605f !important;\n        border-bottom-color: #00605f !important;\n    }\n    .nr-dashboard-cardtitle::before {\n        -webkit-font-smoothing: antialiased;\n        font-family: \"Font Awesome 5 Free\";\n        font-weight: 900;\n        font-size: 18px;\n        content: \"\\f0c1\";\n        position: relative;\n        left: -7px;\n    }\n    .group-integracion{\n        font-weight: bold !important;\n    }\n    .ui-card-panel div div[style]{\n        height: initial !important;\n    }\n    .nr-dashboard-cardpanel btn-colapsar_contraer{\n        left: 0px !important;\n    }\n    .nr-dashboard-cardpanel p{\n        min-height: 20px;\n        position: relative;\n    }\n    .nr-dashboard-text .value{\n        font-weight: normal !important;\n    }\n    .nr-dashboard-text p {\n        margin-top: 0.5em;\n        margin-right: 0.3em;\n    }\n    .nr-dashboard-theme .nr-dashboard-spacer {\n        opacity: 1;\n        background-color: #00acab;\n        height: 10px !important;\n        position: relative;\n        top: 5px !important;\n    }\n    .nr-dashboard-cardcontainer {\n        background: #e2e2e2 !important;\n        height: fit-content !important;\n        width: auto !important;\n    }\n    .body.nr-dashboard-theme md-content md-card {\n        background: #e2e2e2 !important;\n        font-family: \"Roboto\", sans-serif !important;\n        font-size: 15px;\n    }\n    .nr-dashboard-theme ui-card-panel {\n        background: #e2e2e2 !important;\n    }\n    .body.nr-dashboard-theme md-content {\n        background: #f4f4f5 !important;\n    }\n    .group-integracion{\n        height: initial !important;\n    }\n    .group-integracion md-card.nr-dashboard-spacer {\n        align-items: flex-start !important;\n    }\n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n        text-align: justify;\n    }\n    .no-gap{\n        top: 0px !important;\n    }\n    .accion p.value{\n        white-space: pre-wrap; \n        font-weight: lighter;\n    }\n    .nr-dashboard-button _md collapse_btn visible {\n        \n    }\n</style>\n\n<script \nsrc=\"https://kit.fontawesome.com/698b8b1e9b.js\" crossorigin=\"anonymous\">\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 420,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "b97bc1c0.cb899",
        "type": "ui_template",
        "z": "c1337e84224bd2b5",
        "group": "",
        "name": "Clock Toolbar",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n    if($('.md-toolbar-tools').length != 0){\n        loadClock();\n    }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n    $('#clock').remove();\n    var toolbar = $('.md-toolbar-tools');\n    \n    var div = $('<div/>');\n    var p = $('<p/ id=\"clock\">');\n    \n    div.append(p);\n    div[0].style.margin = '5px 5px 5px auto';\n    toolbar.append(div);\n\n    function displayTitle(lh) {\n        p.text(lh); \n    }\n    \n    function upTime() {\n        var d = new Date();\n        p.text(d.toLocaleString());\n    }\n\n    if(document.clockInterval){ \n            clearInterval(document.clockInterval);\n            document.clockInterval = null;\n    }\n        \n    document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "global",
        "className": "",
        "x": 440,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "8dbb34861c28162c",
        "type": "ui_button",
        "z": "c1337e84224bd2b5",
        "name": "collapse button",
        "group": "b87e85fbe518f1ce",
        "order": 2,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "collapse_btn",
        "icon": "",
        "payload": "{\"group\":{\"close\":[\"MyGroups_GroupA\",\"MyGroups_GroupB\",\"MyGroups_GroupC\"]}}",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 160,
        "y": 80,
        "wires": [
            [
                "b269e00d16d197b8"
            ]
        ]
    },
    {
        "id": "93c0ae27724e30ac",
        "type": "ui_group",
        "name": "GroupB",
        "tab": "30414ecef55d0256",
        "order": 8,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "6d362c521372c2da",
        "type": "ui_group",
        "name": "GroupC",
        "tab": "30414ecef55d0256",
        "order": 9,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "b87e85fbe518f1ce",
        "type": "ui_group",
        "name": "GroupA",
        "tab": "30414ecef55d0256",
        "order": 7,
        "disp": true,
        "width": "5",
        "collapse": true,
        "className": "TempCtrlGroupSettings"
    },
    {
        "id": "30414ecef55d0256",
        "type": "ui_tab",
        "name": "MyGroups",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Ok. To put the button outside your groups, you'll need to ironically add another group and place it there. Dashboard needs groups to add elements like a button to.

Yes, i imagined that!.

Thanks!

I wonder how to add a button like the one that came with the dashboard.

image

Why that is not possible to do with a template?.

Regards!

Anything is possible to do in ui-template. That's the whole point of that node. If you want a specific icon, you'll probably need to dig through the developer's console (hit F12 on the page you want to inspect) and dig until you find the element for that icon. Use it's name and it should give you that icon. And you don't need ui-template to do that. Just set the button information to use that icon and that's what it will show up.

Uhm, ok, yes i was digging with the F12 tool. I'm not front end expert so i have to dig more.
If you reach with some example about this please share, same as me.

Thanks!

I do believe this is what you're looking for. I don't know of a way to copy/paste it all, so I took a screenshot.
image
It looks like the actual icon is called "menu".

Yes, that is correct.

The thing is how to replicate that using ui-template. I'm really lost about it and i know it can be done in a simple way.

Regards!.

If all you're wanting is to change the button icon, it is really simple. There's a field inside the button configuration panel where you can enter the icon you want to use. If all you want is the icon, leave the label blank. Read the information about the button node and you'll see a lot of the configuration options for the button. Couldn't be easier for most of the stuff. The only way to completely configure is through ui-control. But I don't think you want that level right now.

Yes, ok, i know that, but the thing is that i need to add another button with some new features like collapse and expand the whole groups.
How can i add a new button on the same "level" as the bar button?.

Regards!

I see what you're asking now. And unfortunately, I don't have an easy answer. It probably could/should be done in ui-template, but there's no guarantees as you would have to try and inject custom HTML code into the document to try and bump a button back to a specific position above the current division in the code. Unfortunately, that's beyond my knowledge and you may not even find the answers in this forum. That's more likely for a different forum that concentrates on HTML programming practices and such. But that's what you're looking to do is to place a button in a different area of the HTML than what you're declaring it in, which could probably be done with an x,y placement, but that may have weird reactions. It's no less possible.

Anyways, that's the limits of my HTML to ui-template knowledge right now. I wish you luck!

Your first approach could be to insert a button to the dashboard toolbar which sends messages.

This ui-template node would do it.

[
    {
        "id": "b97bc1c0.cb899",
        "type": "ui_template",
        "z": "22c21b6b36e350b6",
        "group": "f6f936ecdd832653",
        "name": "Button Toolbar",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<script>\n    (function(scope) {\n        scope.toolbar = angular.element('#nr-dashboard-toolbar');\n        scope.button = angular.element('#toolbar-toggle-button');\n        if(scope.button.length == 0){\n            let div = $('<div />');\n            let button = $('<button type=\"button\" id=\"toolbar-toggle-button\">Click Me!</button>');\n            div.append(button);\n            div[0].style.margin = '5px 5px 5px auto';\n            scope.toolbar.append(div);\n            scope.button = angular.element('#toolbar-toggle-button');\n        }\n        scope.button[0].onclick = function(){\n            scope.send({payload:'click', topic:'toolbar-toggle-button'});\n        }\n        scope.$on('$destroy', function() {\n            scope.button.remove();\n            scope.button = angular.element('#toolbar-toggle-button');\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1040,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "f6f936ecdd832653",
        "type": "ui_group",
        "name": "Group 2",
        "tab": "7c447e96.4b96a",
        "order": 2,
        "disp": true,
        "width": 6
    },
    {
        "id": "7c447e96.4b96a",
        "type": "ui_tab",
        "name": "Zooland Sys",
        "icon": "home",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Wow, great approach there!

How can i make it visible for every groups without make it "group" itself?.

Regards!

You may place it one extra group and turn the groups visibility to hidden by CSS. This is a complete flow example (notice my corrections to the buttons code, also):

[
    {
        "id": "22c21b6b36e350b6",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b97bc1c0.cb899",
        "type": "ui_template",
        "z": "22c21b6b36e350b6",
        "group": "c982fbb8.1deb38",
        "name": "Button Toolbar",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "\n<script>\n    (function(scope) {\n        scope.toolbar = angular.element('#nr-dashboard-toolbar');\n        scope.container = angular.element('#toolbar-toggle-container');\n        scope.button = angular.element('toolbar-toggle-button')\n        if(scope.container.length == 0){\n            let div = $('<div id=\"toolbar-toggle-container\"/>');\n            let button = $('<button type=\"button\" id=\"toolbar-toggle-button\">Click Me!</button>');\n            div.append(button);\n            div[0].style.margin = '5px 5px 5px auto';\n            scope.toolbar.append(div);\n            scope.container = angular.element('#toolbar-toggle-container');\n            scope.button = angular.element('#toolbar-toggle-button');\n        }\n        scope.button[0].onclick = function(){\n            scope.send({payload:'click', topic:'toolbar-toggle-button'});\n        }\n        scope.$on('$destroy', function() {\n            scope.container.remove();\n            scope.container = angular.element('#toolbar-toggle-container');\n            scope.button = angular.element('#toolbar-toggle-button')\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1040,
        "y": 160,
        "wires": [
            [
                "e5a0b400bfcd8d42"
            ]
        ]
    },
    {
        "id": "6a1b83e85e8fa817",
        "type": "ui_ui-button",
        "z": "22c21b6b36e350b6",
        "action": "click",
        "actionType": "str",
        "name": "",
        "group": "f6f936ecdd832653",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "x": 1070,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "946f67b71032d1ac",
        "type": "ui_dropdown",
        "z": "22c21b6b36e350b6",
        "name": "",
        "label": "",
        "tooltip": "",
        "place": "Select option",
        "group": "b616a199dcf8b585",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "BlaBla",
                "value": "blabla",
                "type": "str"
            },
            {
                "label": "HiHi",
                "value": "hihi",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 1060,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "e5a0b400bfcd8d42",
        "type": "debug",
        "z": "22c21b6b36e350b6",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1420,
        "y": 160,
        "wires": []
    },
    {
        "id": "eded5a57f3535f07",
        "type": "ui_template",
        "z": "22c21b6b36e350b6",
        "group": "c982fbb8.1deb38",
        "name": "header CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Zooland_Sys_hidden_group{\n        visibility:hidden !important;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 1050,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "c982fbb8.1deb38",
        "type": "ui_group",
        "name": "hidden_group",
        "tab": "7c447e96.4b96a",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false,
        "className": "hidden_group"
    },
    {
        "id": "f6f936ecdd832653",
        "type": "ui_group",
        "name": "Group 2",
        "tab": "7c447e96.4b96a",
        "order": 2,
        "disp": true,
        "width": 6
    },
    {
        "id": "b616a199dcf8b585",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "7aa6c27f2d3bb9bb",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "7c447e96.4b96a",
        "type": "ui_tab",
        "name": "Zooland Sys",
        "icon": "home",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "7aa6c27f2d3bb9bb",
        "type": "ui_tab",
        "name": "Tab 2",
        "icon": "dashboard",
        "order": 2
    }
]

Ok.
I'm still facing the same issue about tried to make the button visible in all the Tabs. The main goal about this is to show the button in all tabs there in the ".md-toolbar-tools" bar.

Your aproach is great but is not what im looking for yet.

I know it can be done somehow.

This is what the example looks like.

[
    {
        "id": "6ca0643743828f06",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1b585c91b83c3753",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "72a58bd852c53662",
        "name": "Button Toolbar",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<script>\n    (function(scope) {\n        scope.toolbar = angular.element('#nr-dashboard-toolbar');\n        scope.button = angular.element('#toolbar-toggle-button');\n        if(scope.button.length == 0){\n            let div = $('<div />');\n            let button = $('<button type=\"button\" id=\"toolbar-toggle-button\">Click Me!</button>');\n            div.append(button);\n            div[0].style.margin = '5px 5px 5px auto';\n            scope.toolbar.append(div);\n            scope.button = angular.element('#toolbar-toggle-button');\n        }\n        scope.button[0].onclick = function(){\n            scope.send({payload:'click', topic:'toolbar-toggle-button'});\n        }\n        scope.$on('$destroy', function() {\n            scope.button.remove();\n            scope.button = angular.element('#toolbar-toggle-button');\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 240,
        "wires": [
            [
                "082545f073fb4b69"
            ]
        ]
    },
    {
        "id": "082545f073fb4b69",
        "type": "debug",
        "z": "6ca0643743828f06",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 820,
        "y": 260,
        "wires": []
    },
    {
        "id": "e8a24a141a3f5bf4",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "0adbef6a3e5d67d1",
        "name": "header CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #tab{\n        visibility:hidden !important;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 430,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "3d405f3b28cd2afc",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "631c615823834e15",
        "name": "Button Toolbar",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<script>\n    (function(scope) {\n        scope.toolbar = angular.element('#nr-dashboard-toolbar');\n        scope.button = angular.element('#toolbar-toggle-button');\n        if(scope.button.length == 0){\n            let div = $('<div />');\n            let button = $('<button type=\"button\" id=\"toolbar-toggle-button\">Click Me!</button>');\n            div.append(button);\n            div[0].style.margin = '5px 5px 5px auto';\n            scope.toolbar.append(div);\n            scope.button = angular.element('#toolbar-toggle-button');\n        }\n        scope.button[0].onclick = function(){\n            scope.send({payload:'click', topic:'toolbar-toggle-button'});\n        }\n        scope.$on('$destroy', function() {\n            scope.button.remove();\n            scope.button = angular.element('#toolbar-toggle-button');\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "72a58bd852c53662",
        "type": "ui_group",
        "name": "Group 1 from Tab1",
        "tab": "f5a60711a3df6f32",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "631c615823834e15",
        "type": "ui_group",
        "name": "Group 2 from Tab2",
        "tab": "de1901a47084ba9b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "f5a60711a3df6f32",
        "type": "ui_tab",
        "name": "tab1",
        "icon": "dashboard",
        "order": 21,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "de1901a47084ba9b",
        "type": "ui_tab",
        "name": "Tab2",
        "icon": "dashboard",
        "order": 22,
        "disabled": false,
        "hidden": false
    }
]

As you can look, i'm using two templates nodes to point the two differents groups, so if i have 20 groups i have to have 20 templates nodes and that is what i don't want at all.

Regards!

I don't know if anyone else has a lighter code version to help you. I think to ask for a better solution might be an option. My problem is the loss of any DOM ready event to be shure the toolbar has been build up. So I use a mutation observer to get it done:

[
    {
        "id": "6ca0643743828f06",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1b585c91b83c3753",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "72a58bd852c53662",
        "name": "Text One",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<p>this is text one</p>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "e8a24a141a3f5bf4",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "c982fbb8.1deb38",
        "name": "header CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<script>\n    let observer = new MutationObserver(function(mutations) {\n        for (let mutation of mutations) {\n            if (mutation.type === 'childList') {\n                if(mutation.target.nodeName === 'MD-CONTENT'){\n                    if(mutation.addedNodes.length>0){\n                        for(let i=0; i<mutation.addedNodes.length; i++){\n                            if(mutation.addedNodes[i].nodeName === 'MD-TOOLBAR'){\n                                const toolbar = angular.element('#nr-dashboard-toolbar');\n                                let div = $('<div />');\n                                let button = $('<button type=\"button\" id=\"toolbar-toggle-button\" onclick=\"toggleGroups()\">Click Me!</button>');\n                                div.append(button);\n                                div[0].style.margin = '5px 5px 5px auto';\n                                toolbar.append(div);\n                                break;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }),\n    targetNode;\n\n    function toggleGroups(){\n        let toggleButtons = angular.element('.nr-dashboard-cardcarat');\n        for(let i=0; i<toggleButtons.length; i++){\n            toggleButtons[i].click();\n        }\n    }\n\n    // Listen to all dashboard changes\n    angular.element(async function(){\n        try{\n            targetNode = angular.element('#nr-dashboard')[0];\n            let toolbar = angular.element('#nr-dashbard-toolbar');\n            if(toolbar.length == 0){\n                observer.observe(targetNode, {\n                attributes: false,\n                childList: true,\n                characterData: false,\n                subtree: true\n                });\n            }else{\n                let div = $('<div />');\n                let button = $('<button type=\"button\" id=\"toolbar-toggle-button\" onclick=\"toggleGroups()\">Click Me!</button>');\n                div.append(button);\n                div[0].style.margin = '5px 5px 5px auto';\n                toolbar.append(div);\n            }\n        }catch(err){\n            console.error(err);\n        }\n    });\n    \n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 430,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "3d405f3b28cd2afc",
        "type": "ui_template",
        "z": "6ca0643743828f06",
        "group": "631c615823834e15",
        "name": "Text Two",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<p>this is text two</p>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "72a58bd852c53662",
        "type": "ui_group",
        "name": "Group 1 from Tab1",
        "tab": "f5a60711a3df6f32",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "c982fbb8.1deb38",
        "type": "ui_group",
        "name": "hidden_group",
        "tab": "",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false,
        "className": "hidden_group"
    },
    {
        "id": "631c615823834e15",
        "type": "ui_group",
        "name": "Group 2 from Tab2",
        "tab": "de1901a47084ba9b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": ""
    },
    {
        "id": "f5a60711a3df6f32",
        "type": "ui_tab",
        "name": "tab1",
        "icon": "dashboard",
        "order": 21,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "de1901a47084ba9b",
        "type": "ui_tab",
        "name": "Tab2",
        "icon": "dashboard",
        "order": 22,
        "disabled": false,
        "hidden": false
    }
]