# Dynamically change dashboard menu names without change of UI tab name

**URL:** <https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [18 January 2023 17:34 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876 "2023-01-18T17:34:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [18 January 2023 17:34 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/1 "2023-01-18T17:34:23Z")

</div>

Anybody knows, if it is possible to dynamically change some menu item names in node red dashboard, independent of the UI tab name? In fact giving them an `alias`.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [18 January 2023 18:55 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/2 "2023-01-18T18:55:44Z")

</div>

I don't have an answer, but out of curiosity, what is the use-case?

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [18 January 2023 19:28 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/3 "2023-01-18T19:28:26Z")

</div>

Keep a standard name for UI tab for showing and hiding, but UI-tab can be used for different devices thus always the same name. But menu should be friendly name that can change according to device used.

If possible that would be nice, but I have a plan B, but this is less friendly 🙂

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [18 January 2023 20:37 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/4 "2023-01-18T20:37:34Z")

</div>

Sounds like a good use-case, although it could also be confusing when tab names in the UI change all the time... Unfortunately, I can't help you with the std dashboard.

In FlexDash you can change the "title" of a tab as it shows in the tab bar as well as the icon (but there isn't a drop-down menu the way the std dashboard has it)...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 January 2023 23:16 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/5 "2023-01-18T23:16:37Z")

</div>

No that isn’t possible with node-red-dashboard

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 January 2023 05:14 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/6 "2023-01-19T05:14:24Z")

</div>

Not quite ...  
With `ui_template` node you can reach to the menu item label like this

```auto
<script>
    (function(scope) {
    scope.$watch('msg', function(msg) {
      if (msg) {
        // defined menu item name is aria-label of the menu button
        // select that button's parent and find a paragraph in it
        // set text of that paragraph to the msg.payload
        let defaultLabel = 'Two'
        $( "button[aria-label="+defaultLabel+"]").parent().find('p').text(msg.payload)
      }
    });
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [19 January 2023 13:18 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/7 "2023-01-19T13:18:35Z")

</div>

> [@hotNipi](#):
>
> ```auto
> // defined menu item name is aria-label of the menu button
> // select that button's parent and find a paragraph in it
> // set text of that paragraph to the msg.payload
> 
> ```

@hotNipi I don't understand this part. I am no expert in this.  
Can you explain a bit further, please?

How do I compose the `msg.payload`? Maybe, msg.payload = "New name" ?

```auto
let defaultLabel = 'Two' // Is this the name of UI tab ??

```

Ok, I stay corrected. It is working well!!

The UI template should be part of the UI tab. That wasn't the case with me.  
Thanks very much. That is exactly what I wanted!

The name next to the hamburger is still the UI tab name, but that is not really a problem.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 January 2023 13:38 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/8 "2023-01-19T13:38:55Z")

</div>

let defaultLabel = 'Two' // Is this the name of UI tab?

Yes.

How to compose msg?

For this example msg.payload should be new name you wanted to show.

This example shows basics how to change the menu item label. How it can be used depends on your wishes and dashboard buildup and many more things. To advise it takes to know more about those. But if you can make this example working you probably find most of it by yourself.

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [20 January 2023 07:05 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/9 "2023-01-20T07:05:45Z")

</div>

@hotNipi It almost works perfectly, but when other UI tab is active and you refresh the screen, then the UI tab name is there again in the menu. Can that be solved some how?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 January 2023 11:41 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/10 "2023-01-20T11:41:48Z")

</div>

For sure. Are you targeting one menu item only or several (may be all)?

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [20 January 2023 12:12 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/11 "2023-01-20T12:12:02Z")

</div>

> [@hotNipi](#):
>
> For sure. Are you targeting one menu item only or several (may be all)?

@hotNipi No, just 4 out of 10 UI tabs. But if easier for all renaming, that is also an option

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 January 2023 13:12 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/12 "2023-01-20T13:12:33Z")

</div>

As dashboard can't remember "on fly" changes you'll need to send such changes any time the dashboard initializes (reload) (and mostly also when tab changes)  
As the `ui_template` lives only at one specific tab - the code inside it can't do anything if that tab is not currently alive.  
So you'll need to have duplicates of that functionality for each tab so it can work no matter the current tab is.

On top of that, you'll need to have some definition of the menu stored at server side. (global context maybe)  
Let's say an array of menu items where every item is an object with default name and current name

```auto
menu = [
{defaultLabel:"Home",currentLabel:"Home"},
{defaultLabel:"Away",currentLabel:"Avay"}
....
]

```

As the menu is defined as an array, the code inside the `ui_template` must be changed to accept that array and deal with it a bit more abstract manner.

```auto
<script>
    (function(scope) {
    scope.$watch('msg', function(msg) {
      if (msg) {

      // msg.payload expected to be an array of objects something like this

      /*
        [{defaultLabel:"Home",currentLabel:"Lovely"},
        {defaultLabel:"Away",currentLabel:"Suddenly"},
        {defaultLabel:"Work",currentLabel:"Mandatory"}]      
      */
        
        if(!Array.isArray(msg.payload)){
          return
        }
        msg.payload.forEach(menuItem => {

          //menuItem -> {defaultLabel:"Home",currentLabel:"Something"}

          // for each object (menuItem) in array lets find proper menu button
          // defined menu item name is also aria-label of the menu button
          // select that button's parent and find a paragraph in it
          // set text of that paragraph to the menuItem.currentLabel
          $("button[aria-label="+menuItem.defaultLabel+"]").parent().find('p').text(menuItem.currentLabel)
        })
      }
    });
})(scope);
</script>

```

When you need to change some name, you just get the menu object from context, find correct item in it, change the `currentLabel` value and store the menu object in context.  
After that, the changed menu also needed to be sent to all those `ui_templates` (because of you don't know (and you really shouldn't care) which one is currently active)

Also the current menu state needs to be sent when dashboard initializes. For that there is` ui_control` node. No mater the payload, using it just as an event based trigger, again send current menu state to dashboard.

That's all in theory.  
I can make full example based on this story but I do prefer that you first at least try to manage it working by yourself.

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [20 January 2023 18:04 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/13 "2023-01-20T18:04:36Z")

</div>

@hotNipi Thanks for your extensive explanation. I learned a lot this way.  
This is indeed the solution in my case.

I have implemented it as you suggested, and I think now it is 100% full-proof.

Thanks again for your support !!!!

---

<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:** [3 February 2023 18:04 UTC](https://discourse.nodered.org/t/dynamically-change-dashboard-menu-names-without-change-of-ui-tab-name/73876/14 "2023-02-03T18:04:38Z")

</div>

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