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

Dashboard
,
1

image
image1283Ă—272 15.6 KB

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

<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:

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.

2

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

3

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.

4

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

5

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.

6

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

7

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.

8

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.

9

Do you prefer UI Builder or dashboard 2.0 more?

10

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.

11

The first is somewhat a matter of opinion. The latter a matter of truth. :rofl:

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.

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. :smile:

12

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

1 Like
13

I'll be around if you want any help. :slight_smile:

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.

14

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

1 Like