# DB2 ui control node

**URL:** <https://discourse.nodered.org/t/db2-ui-control-node/98782>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 August 2025 09:33 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782 "2025-08-22T09:33:08Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [22 August 2025 09:33 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/1 "2025-08-22T09:33:08Z")

</div>

I want to detect when the Dashboard 2 user changes tabs or reloads their page. In DB1 I used the ui control node successfully to do this however in DB2 I don’t get any output from the ui-control node when changing tabs.  
Can anyone suggest a way around this?

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [22 August 2025 10:46 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/2 "2025-08-22T10:46:05Z")

</div>

I am not using the `ui control` and `event` dashboard 2 nodes for page load and page get focus, since all dashboard tabs on the same window use the same socket, and event behavior is tricky.

I use a hidden template node, which invokes a 'load' event when the page is loaded, and a 'focus' event when the user switches to the tab.

```auto
<script>
    export default {
        mounted() {
            this.send({payload:"Page 2 loaded"});

            const vThis = this; // save the base context
                window.addEventListener('focus', () => {
                vThis.send({payload:'Page 2 received focus'});
            });
        }
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [22 August 2025 10:55 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/3 "2025-08-22T10:55:50Z")

</div>

> [@john56](#):
>
> I don’t get any output from the ui-control node when changing tabs.

I am using ui-control to do exactly that. What have you selected in the drop down for “Output”?

 ![Screenshot 2025-08-22 at 5.54.54 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/85ec32e999b3bff790f727baf85b2ed0ba8f844f.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 August 2025 10:56 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/4 "2025-08-22T10:56:42Z")

</div>

There is a request to add tab change to the ui-event node, but I don't know where it is on the priority list.

> <https://github.com/FlowFuse/node-red-dashboard/issues/1722>
>
> Permit users to react to a "tab change" to (for example) populate the likes of a… ui-dropdown upon tab change when a page "Layout" is set to "Tabs"
> 
> See below referenced issue for details.
> 
> \---
> 
> 
> 
> 
> \_Originally posted by @joepavitt in \[#1669\](https://github.com/FlowFuse/node-red-dashboard/issues/1669#issuecomment-2915919542)\_
> 
> \> Just worked through this with @Steve-Mcl - it's not straight forward, but I will do my best to articulate:
> \> 
> \> - The issue arises from when and how we store "state" on a widget. When you send a \`ui\_update\` request, we (a) send it to the client, where any actively rendred widgets receive it and action it, and (b) store the state server-side in our "state store". When a widget then first rendered in the UI, we have a \`widget-load\` event which reads the "state" from the store, and displays the updated options. This works correctly.
> \> - However, we \_only\_ do this for widgets that have a \_shared state\_ across all client connections. If the "UI Dropdown" is toggled \_on\_ in the "Client Constraints" tab for Dashboard (such that each dropdown has unique state per user), then this message is \_only\_ sent to the front-end connection specified in \`msg.\_client\` (which UI Event includes), and is not stored server-side. This means that the client-side widgets not yet rendered, e.g. dropdowns on other tabs, do not receive the request to update their options, nor is it stored server-side.
> \> 
> \> \*\*Workarounds:\*\*
> \> 
> \> - Make the \`options\` universal across all client connections, you can do this in one of two ways:
> \> 1. Un-toggle \`ui-dropdown\` from the "Client Constraints" tab in the Dashboard sidebar. This will mean that all dropdowns share state across all client/user connections.
> \> 2. Add a \`change\` node in \_after\_ the \`ui-event\` node, and \`Delete\` the \`msg.\_client\` object. This will mean that only this property and dropdown will share state across all client connections
> \> - We introduce a new \`$tabchange\` event that is emitted by UI Event. This will fire the request to dynamically populate the options (and the same for any other widget in question) which gives the coverage needed.
> \> 
> \> The latter workaround is imo the correct fix here as it provides coverage across all of the user cases

---

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [22 August 2025 11:28 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/5 "2025-08-22T11:28:17Z")

</div>

> [@john56](#):
>
> I want to detect when the Dashboard 2 user changes tabs or reloads their page. In DB1 I used the ui control node successfully to do this however in DB2 I don’t get any output from the ui-control node when changing tabs.

Thank you for that @omrid.

---

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [22 August 2025 11:36 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/6 "2025-08-22T11:36:00Z")

</div>

> [@Colin](#):
>
> [Introduce a new `$tabchange` event that is emitted by UI Event · Issue #1722 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1722)

Thank you @rakgupta. I had it set to “All events” but now when I check I am getting output intermittently. It seems that the tab change event is only output when there is also a connect event.  
Thanks for your reply.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [22 August 2025 12:21 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/7 "2025-08-22T12:21:20Z")

</div>

> [@john56](#):
>
> It seems that the tab change event is only output when there is also a connect event.I

With the settings I have, I get the events triggered quite reliably. I use it to start the flows on each tab to pre-populate data when the user selects a particular tab/page. I do have another ui-control node that is set to “connect events only” - this is used to populate some global variables etc. that are used across all flows.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 August 2025 12:35 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/8 "2025-08-22T12:35:04Z")

</div>

@rakgupta We have to be careful when using the word Tab. Are you talking about multiple tabs within a single page using Tab layout, or are you talking about pages? I think that unfortunately the ui-control node uses the word tab to mean pages.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [22 August 2025 13:21 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/9 "2025-08-22T13:21:18Z")

</div>

> [@Colin](#):
>
> Are you talking about multiple tabs within a single page using Tab layout, or are you talking about pages

I’m talking about pages…. you are right - wording is confusing.

---

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [23 August 2025 11:26 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/10 "2025-08-23T11:26:33Z")

</div>

Yes, by ‘tabs’ I am referring to the means of switching between pages of the dashboard.  
Now when I use the ui control node I’m seeing output as expected for ‘connect’ and ‘change’ events as expected. Earlier I was not seeing this output and I can’t identify what has changed.

---

<div class="post-metadata">

**Author:** ![kunigunde](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kunigunde/32/103037_2.png) [@kunigunde](https://discourse.nodered.org/u/kunigunde)\
**Post date:** [29 August 2025 11:36 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/11 "2025-08-29T11:36:54Z")

</div>

@john56

I had the same problem.

I use the UI control and no debug output was generated.

The problem was that I had to start my dashboard correctly via the correct URL /dashboard and not via a subpage.

My problem is that now, when I change something, **I have to reload the dashboard via the correct URL /dashboard/ and not via a subpage, otherwise the UI control does not work correctly.**

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [29 August 2025 14:31 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/12 "2025-08-29T14:31:30Z")

</div>

> [@kunigunde](#):
>
> My problem is that now, when I change something, **I have to reload the dashboard via the correct URL /dashboard/ and not via a subpage, otherwise the UI control does not work correctly.**

Did you see my proposed solution above?

---

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [30 August 2025 11:56 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/13 "2025-08-30T11:56:54Z")

</div>

Thanks for pointing that out @kunigunde.  
I see that same issue. I need to reload the page with …/dashboard/  
…/dashboard/page1. does not work.

---

<div class="post-metadata">

**Author:** ![kunigunde](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kunigunde/32/103037_2.png) [@kunigunde](https://discourse.nodered.org/u/kunigunde)\
**Post date:** [30 August 2025 12:45 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/14 "2025-08-30T12:45:38Z")

</div>

@john56

I have added this information to an existing issue on [Github](https://github.com/FlowFuse/node-red-dashboard/issues/1371#issuecomment-3239237806).

---

<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:** [13 September 2025 12:45 UTC](https://discourse.nodered.org/t/db2-ui-control-node/98782/15 "2025-09-13T12:45:46Z")

</div>

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