# UI\_PAGE Layout TABS - Get active UI\_PAGE Active tab

**URL:** <https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231>\
**Category:** FlowFuse\
**Tags:** dashboard-2\
**Created:** [21 July 2025 11:03 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231 "2025-07-21T11:03:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 11:03 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/1 "2025-07-21T11:03:40Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1e35afd26a6651c33ae0887464d4732a147e9ad0.png)

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?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33134434d91f070d6b2865136bf1824a64d7fda8.png)

Thanks a lot  
Yves

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 July 2025 11:28 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/2 "2025-07-21T11:28:43Z")

</div>

The UI Event node will emit when a user lands on a tab: [Control ui-control | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-control#change-tab-page)

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

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 11:48 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/3 "2025-07-21T11:48:27Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b915f743de31b35cab7a8c0cc8e09c516be6255.png)

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.

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

Thanks a lot, your advice are always appreciated

Yves

---

<div class="post-metadata">

**Author:** ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)\
**Post date:** [21 July 2025 11:59 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/4 "2025-07-21T11:59:37Z")

</div>

Hi Yves,

I encountered the same problem and opened a GitHub issue for it: [Issue 1579](https://github.com/FlowFuse/node-red-dashboard/issues/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:

```auto
[
    {
        "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!

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 12:40 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/5 "2025-07-21T12:40:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 13:34 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/6 "2025-07-21T13:34:57Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Roland](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@Roland](https://discourse.nodered.org/u/Roland)\
**Post date:** [21 July 2025 14:53 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/7 "2025-07-21T14:53:23Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 15:19 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/8 "2025-07-21T15:19:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [21 July 2025 15:32 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/9 "2025-07-21T15:32:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Roland](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@Roland](https://discourse.nodered.org/u/Roland)\
**Post date:** [21 July 2025 16:09 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/10 "2025-07-21T16:09:09Z")

</div>

You're welcome

---

<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:** [25 July 2025 16:09 UTC](https://discourse.nodered.org/t/ui-page-layout-tabs-get-active-ui-page-active-tab/98231/11 "2025-07-25T16:09:50Z")

</div>

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