# Changing Group title bar text separately for different msg object value instances

**URL:** <https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-template\
**Created:** [11 February 2025 09:00 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306 "2025-02-11T09:00:12Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 09:00 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/1 "2025-02-11T09:00:13Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d44df010be8c7c204b06a4e3f48b0a747377d60f.png)

Hi, is there any way to change Group Title Bar text for separate instances?  
I could edit the first using

```auto
<style>
    .nr-dashboard-cardtitle {
        font-family: 'Courier New', monospace !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }
</style>

```

within ui\_template node.

And below within function node:

```auto
msg.status = msg.status || {};

if (msg.payload && Array.isArray(msg.payload)) {
    
    msg.status.value = "on";
    msg.status.color = "green";
} else {
    
    msg.status.value = "off";
    msg.status.color = "red";
    
    
    msg.error_details = msg.payload;  

   
    let length = (msg.payload && Array.isArray(msg.payload)) ? msg.payload.length : 22;
    
  
    msg.payload = Array.from({ length }, () => ({ value: "ERR" }));
}

```

Unfortunately, whenever I create different instances of ui\_template node for different flows for different groups, all those values which are intended to go to their respective group title texts, directly go to title text for Group 1. Does any one know how I can just make it so that I could only send those values to their respect Group title texts? Thank you.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 February 2025 10:20 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/2 "2025-02-11T10:20:06Z")

</div>

Don't show the group name, then use a separate html entity div, span, etc to add your own title

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 10:34 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/3 "2025-02-11T10:34:20Z")

</div>

But will it replace the exact area where "off" and "group 2" are located? My requirement is that it should show there on title text (different for different groups). I'm trying to find another solution by trying to assign smth like msg.id in function node and trying to use msg.id as identifier in ui\_template node, but failing miserably.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 February 2025 10:37 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/4 "2025-02-11T10:37:30Z")

</div>

> [@yxuser](#):
>
> But will it replace the exact area where "off" and "group 2" are located?

To some degree yes, the groupd name area should diminish, and you should be able to style the template to look similar. You will need to experiment.

You could also try targeting the group name dom element

> **[get element and alter at DuckDuckGo](https://duckduckgo.com/?q=get%2Belement%2Band%2Balter&ia=web)**
>
> DuckDuckGo. Privacy, Simplified.

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 10:46 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/5 "2025-02-11T10:46:42Z")

</div>

I'm a noob in front end and back end programming. Thus, the issue. I've just started and my first exposure is node red. As for your response, can I not use .nr-dashboard-cardtitle where template type is "widget in group" to somehow link each instance to it's own card title? Changing temp type to section breaks the layout.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 February 2025 10:50 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/6 "2025-02-11T10:50:51Z")

</div>

I would suggest if you are new to abandon node-red-dashboard and look at [https://dashboard.flowfuse.com/](https://dashboard.flowfuse.com/).  
AS the first is deprecated and the second is it's replacement.

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 10:58 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/7 "2025-02-11T10:58:19Z")

</div>

Yes I had thought of 2 options: Dashboard 2.0 or UI Builder, I thought UI builder would be better with aesthetics and customization so went with UI Builder which turned out to be more confusing for me as it seemed like proper Front End development.

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 11:00 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/8 "2025-02-11T11:00:05Z")

</div>

My whatever experience was, it was in default UI dash in node-red, where angularJS bindings like {{}} worked to pass {{msg.payload}} values, I got confused on how to achieve that without understanding javascript syntax and semantics, thus I continued with UI Dash.

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [11 February 2025 12:29 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/9 "2025-02-11T12:29:44Z")

</div>

> [@E1cid](#):
>
> AS the first is deprecated and the second is it's replacement

Do you prefer UI Builder or dashboard 2.0 more?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 February 2025 12:33 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/10 "2025-02-11T12:33:38Z")

</div>

The question is really what you prefer

uibuilder is not beginner level and has a greater learning curve, but @TotallyInformation is very good at helping.

Dashboard 2 is more entry level and there are may users here to help.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 February 2025 15:45 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/11 "2025-02-11T15:45:46Z")

</div>

> [@E1cid](#):
>
> uibuilder is not beginner level and has a greater learning curve, but @TotallyInformation is very good at helping.

The first is somewhat a matter of opinion. The latter a matter of truth. 🤣

If you follow the Intro example, you would be up and running in seconds. But yes, you do need to then start to learn HTML and CSS and possibly a little JavaScript. BUT, the issue you are seeing here is no harder to deal with in UIBUILDER than it is in either of the Dashboards. Though admittedly, it is slightly _different_.

> [@E1cid](#):
>
> Dashboard 2 is more entry level and there are may users here to help.

But once you go outside what Dashboard and its many extension nodes provide, I believe that D2 becomes _more_ complex than UIBUILDER. With UIBUILDER, you only need HTML knowledge but with D2, you would also need Vue and possibly also Vuetify knowledge.

Of course, if you only ever need to use the provided nodes, D2 may well be easier to use.

* * *

What UIBUILDER doesn't do is enforce a specific way of doing things. So in that sense, it might be considered to be a little more complex at the start since you will wish to make some up-front decisions that D2 has already made for you. Then it mostly keeps out of your way by simply enhancing native HTML capabilities and providing 2-way comms. Even if you later want to change your approach or introduce new features or other front-end libraries, you will be able to accommodate that easily.

Horses for courses. 😄

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [12 February 2025 05:28 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/12 "2025-02-12T05:28:15Z")

</div>

> [@TotallyInformation](#):
>
> What UIBUILDER doesn't do is enforce a specific way of doing things. So in that sense, it might be considered to be a little more complex at the start since you will wish to make some up-front decisions that D2 has already made for you

Yes this is the reason I chose UIBuilder over D2, as I would prefer more freedom even if things are complex at first. Didn't want to be limited by D2's way of doing things. I'll start with the walkthrough you provided for UIB

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 February 2025 11:14 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/13 "2025-02-12T11:14:02Z")

</div>

> [@yxuser](#):
>
> I'll start with the walkthrough you provided for UIB

I'll be around if you want any help. 🙂

And, as always, I'd love feedback. About the walkthrough but more generally about uibuilder as well. It gets hard to spot some basic issues when you are so close to the project so a new set of eyes might spot something missing or poorly explained.

---

<div class="post-metadata">

**Author:** ![yxuser](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Post date:** [13 February 2025 04:13 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/14 "2025-02-13T04:13:25Z")

</div>

> [@TotallyInformation](#):
>
> It gets hard to spot some basic issues when you are so close to the project so a new set of eyes might spot something missing or poorly explained.

This is a very valuable mindset. I'll surely let you know when I face difficulties.

---

<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:** [15 March 2025 04:13 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306/15 "2025-03-15T04:13:47Z")

</div>

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