UI_PAGE Layout TABS - Get active UI_PAGE Active tab

[ylechasseur]

In the Layout section of ui_page, I’m using TABS.

So, for this page, I have several tabs. I have a Save button that is common to all the tabs, and I’d like to know which tab is active when the user clicks on it. Is it possible?

Thanks a lot
Yves

[joepavitt]

The UI Event node will emit when a user lands on a tab: Control ui-control | Node-RED Dashboard 2.0

You could use that to track it for the given user?

[ylechasseur]

Hi Joe,
Thanks for the quick reply. UI_Control works great for "Normal Node-Red tabs" but for them created in tab layout ui_page, I never get any message or reaction from it, even if I put it to monitor all events. It catching all events for the side bar icons without any problem.

In this exemple, I click on the second icon on the side bar. This open this page with all these Embedded tabs. From these, I can't get any events when click in UI_control.

Thanks a lot, your advice are always appreciated

Yves

[aitor]

Hi Yves,

I encountered the same problem and opened a GitHub issue for it: Issue 1579

Currently, the ui_control node doesn't provide feedback when switching between tabs.

In the meantime, I've found a workaround that you might find useful:

[
    {
        "id": "df43142233a26f31",
        "type": "ui-template",
        "z": "0f700032737e9c68",
        "group": "fa5b29b40662d5ba",
        "page": "",
        "ui": "",
        "name": "uiEvent - TabLoaded",
        "order": 17,
        "width": "0",
        "height": "0",
        "head": "",
        "format": "<script>\nexport default {\n  methods: {\n    notify() {\n      this.send(\"tabLoaded\");\n    }\n  },\n  mounted() {\n    this.notify();\n  }\n}\n</script>",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 708,
        "y": 104,
        "wires": [
            []
        ],
        "icon": "font-awesome/fa-arrow-circle-o-right"
    },
    {
        "id": "fa5b29b40662d5ba",
        "type": "ui-group",
        "name": "tabLoaded",
        "page": "3b55700ea78c34ca",
        "width": "24",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "3b55700ea78c34ca",
        "type": "ui-page",
        "name": "Page Name",
        "ui": "",
        "path": "/page10",
        "icon": "home",
        "layout": "grid",
        "theme": "default",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    }
]

This script sends a payload when the tab where this template node is located loads. I hope it helps you!

[ylechasseur]

Hi Aitor,

Thanks a lot! I may be missing something in my process. When I load the root tab on the page, the main tab includes a link that updates content across all tabs. Since each tab displays information based on a selection made in the first tab, this action triggers a ui_event tab load. The concept is great, but I’ll try to refine it so that the ui_event only triggers when the user performs an action directly within the selected tab.

Best regards

Yves

[ylechasseur]

I did this small change. When a value is changed in the selected ui_group on the page

<script>
export default {
  methods: {
    notify() {
      this.send("Electronics");
    }
  },
  mounted() {
   this.$socket.on('msg-input:' + this.id, (msg) => {                                
                if (msg && msg.topic === "Electronics") {
                        this.notify();
                }
             })
  }
}
</script>

[Roland]

Hi, I have had the same problem. I use a template node on page level which sends the name of the active tab. Maybe it helps - another solution.

<template>
</template>

<script>
    var context = this;
    
    window.onclick = function ( ) { getTab() }

    function getTab ()
      {
      var x = document.getElementsByClassName("v-slide-group__content")[0];
      var y = x.getElementsByClassName("v-btn");
      var z = x.getElementsByClassName("v-btn__content");

      for (var i = 0; i < y.length; i++)
        {
        for (var j = 0; j < y[i].attributes.length; j++)
          {
          if (y[i].attributes[j].name === "aria-selected") context.send(z[i].innerHTML.split("<")[0] + "=" + y[i].attributes[j].value);
          }
        }
      }

    // Use send() function to pass on data back into Node-RED:
    this.send('Component has loaded')

    // Subscribe to the incoming msg's
    this.$socket.on('msg-input:' + this.id, function(msg) {
        // do stuff with the message
        //alert('message received: ' + msg.payload)
        if (msg.payload === "change") { getTab() };
    })
    
</script>

<style>
</style>

[ylechasseur]

Hi Roland, I will give a try and let you know .. it seems to be very good. Just to let you know it is very appreciated

Yves

[ylechasseur]

It is simply GREAT !! thanks a lot is very very appreciated

[Roland]

You're welcome