How to change Dashboard group names via msg.payload

Dashboard
1

Sorry folks for another dumb question.

I've been away and come back to this task.

To simplify some flows, I realised that I am making my life difficult because I am getting sensor data from sensors, but WHAT they are may change.
eg: Outside temp may become Pool temp.
So, rather than having the devices send their "names" and have to edit all that when one is changed, I was thinking that on THAT side of things, I get "temp1", "temp2", "temp3" and so on.
Then, when their data is received and "sorted" (collated?) a node adds a bit to the msg..... and the gauge/chart/what ever who gets it gets the name to show from the message.
I've got that part working and want to "expand" it to the entire GROUP.

(See attached)

So the gauge/chart can be named but say I have sensors and they are giving data for "room1" and someone decides to change "room1" to "garage".
Rather than edit the name via the editor, can I inject something into the TEMPLATE NODE and it changes the name of the group?

I know this node can change the justification of the title in the group. But the actual text?

I know it is going to be easy, but I have looked. Seems my time away has not helped with me recalling all the names/terms.

Sorry.

Thanks in advance.

Screenshot%20from%202018-12-22%2010-52-32
Screenshot from 2018-12-22 10-52-32.png1360×768 47.9 KB

2

Hi @Trying_to_learn,

Here's a flow to do just that, make sure you change the original group name placeholder in the ui_template

[
    {
        "id": "fd906307.03686",
        "type": "ui_template",
        "z": "1f6b105a.a3f8d",
        "group": "a9b59c6a.acaa5",
        "name": "Change Group Name",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<script>\n(function($scope) {\n$scope.msg = {'payload':'Original Group Name'} // initial group placeholder name\n\n$scope.$watch('msg', function() {\n    if ($scope.msg){\n        $(\".nr-dashboard-cardtitle:contains('\"+ $scope.oldtitle + \"')\").text($scope.msg.payload);\n        $scope.oldtitle = $scope.msg.payload\n    }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 1140,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "b8903897.7ab7f8",
        "type": "inject",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "topic": "",
        "payload": "New Group Name",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 890,
        "y": 500,
        "wires": [
            [
                "fd906307.03686"
            ]
        ]
    },
    {
        "id": "1214d96b.d43227",
        "type": "inject",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "topic": "",
        "payload": "Original Group Name",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 880,
        "y": 460,
        "wires": [
            [
                "fd906307.03686"
            ]
        ]
    },
    {
        "id": "a9b59c6a.acaa5",
        "type": "ui_group",
        "z": "",
        "name": "Original Group Name",
        "tab": "cc16d42c.cb9c08",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "cc16d42c.cb9c08",
        "type": "ui_tab",
        "z": "",
        "name": "Tab",
        "icon": "wifi",
        "order": 1
    }
]
3

Thanks for that.

Much appreciated.

(Alas.....)

Ok, I did what you said - I hope.....

See pictures.

Buttons pressed and I checked the GUI page.
No change with button presses.

Screenshot%20from%202018-12-22%2013-01-34
Screenshot from 2018-12-22 13-01-34.png1360×768 101 KB
Screenshot%20from%202018-12-22%2013-01-43
Screenshot from 2018-12-22 13-01-43.png1360×768 111 KB
Screenshot%20from%202018-12-22%2013-01-48
Screenshot from 2018-12-22 13-01-48.png1360×768 47.3 KB

4

You forgot to change the Original Group Name string in the ui_template to TEMP.

Here's an even better ui_template code, as the one I gave earlier could backfire if you have groups with names that are similar, this one will do a strict match:

<script>
(function($scope) {
$scope.oldGroupName = 'TEMP' // initial group placeholder name

$scope.$watch('msg', function() {
    if ($scope.msg){
        $("p.nr-dashboard-cardtitle").each(function(){
            if($(this).text().trim() == $scope.oldGroupName.trim()){
                p = $(this);
                p.text($scope.msg.payload);
                 $scope.oldGroupName = $scope.msg.payload
            }
        })
    }
 });
})(scope);
</script>
5

(Again) Thanks.

I thought you meant in the group of the node.

But!!!!!

(Sorry)

Your post just now has:

When I open the node and extract the code I get:

(have to get it from your original post as I did what you said and it didn't work. Then I saw a difference.)

"format": "<script>\n(function($scope) {\n$scope.msg = {'payload':'Original Group Name'} // initial group placeholder name\n\n$scope.$watch('msg', function() {\n    if ($scope.msg){\n        $(\".nr-dashboard-cardtitle:contains('\"+ $scope.oldtitle + \"')\").text($scope.msg.payload);\n        $scope.oldtitle = $scope.msg.payload\n    }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 1140,
        "y": 480,
        "wires": [
            []
        ]
    },

The syntax has changed.

Where you have saying (now)

The original code translated to:

$scope.msg = {'payload':'TEMP'} // initial group placeholder name

I'll play with it but I have now checked myself 3 times.

That line has changed from the first version to the new one.

This is the code (now) from the node:

[{"id":"b173ff12.f763e","type":"ui_template","z":"7c7f2d66.26e524","group":"f59d4de4.88757","name":"Change Group Name","order":1,"width":0,"height":0,"format":"<script>\n(function($scope) {\n$scope.oldGroupName = 'TEMP'\n\n$scope.$watch('msg', function() {\n    if ($scope.msg){\n        $(\".nr-dashboard-cardtitle:contains('\"+ $scope.oldtitle + \"')\").text($scope.msg.payload);\n        $scope.oldtitle = $scope.msg.payload\n    }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":470,"y":2140,"wires":[[]]},{"id":"f59d4de4.88757","type":"ui_group","z":"","name":"TEMP","tab":"503e0814.c173b8","order":2,"disp":true,"width":"6","collapse":false},{"id":"503e0814.c173b8","type":"ui_tab","z":"","name":"Real World Control2","icon":"dashboard","order":12}]

Nothing else has changed from the original scenario.
Pressing the "inject new name" doesn't change anything.
But I am not discounting I am still missing something.

6

Yeah I changed it a bit😉 You can replace the whole ui-template code with the latest version and it should work. Note that the whole function also changed. Instead of looking for titles that only contains the group name it now checks for every group name titles and checks if they are equal.

7

No problems.

Alas you saying that doesn't help.

For some reason it still isn't changing the name.
I got your new code and put it in the node and deployed it.
Then pressed the new name button. No change.

Not that I am saying the code is wrong, but looking at it I have some questions:
Why do I need the "original name group" injection?

Dunno if this is related, but..... (and this will need a lot of digging by me.....)

Other screens have gone a bit "wonky".
(When I deployed the flow with both versions of your code - 4 injection points) and I went back to the GUI view........

I was on another page. (Dunno why that is/was) and the buttons are......
Not as expected.

I deleted the 6 nodes and did another deploy and it is the same. Tried to force refresh the page. Same.

The names of the buttons (in green) are not normal.
Other buttons on other pages have since gone that way too.

No big - I hope. I will reboot and try again. That is on a test machine.
But the test machine is THIS machine.

(rebooting shortly)

Screenshot%20from%202018-12-22%2017-53-50
Screenshot from 2018-12-22 17-53-50.png1360×768 274 KB

8

The inject nodes are not necessary and were just provided for a quick way to test. Although an input with a msg.payload is necessary. I'm not sure what happenned to your buttons but I doubt its related. From your latest pic, I don't see that you have a group called TEMP, do you have one or you changed it? The group changing template needs to be set to be on the same dashboard tab as the group name you want to change.

9

Thanks.

It wasn't I was blaming. It is just that it was detected while looking at this problem.
(I would have not seen it at all but for the fact that the web page changed when I DEPLOYED the update and I went back to the web page.)

No big. As said, this is a test machine. Though I am now interested what happened.
The real machine's screen is good.

Back to your reply:
Ok. I guess you just included a couple of inputs to show the name changing. What threw me was that you had an "Original name" and "New name" rather than "New name 1" and "New name 2".

Yes the node is on the same group as the TEMP group I want to change. (See ...... https://sea2.discourse-cdn.com/flex016/uploads/nodered/optimized/2X/d/d0925627a95d2283c51149503e6ce161a8fe19a7_1_690x389.png)

Alas though either the old or new code have no result.

Don't worry. (No offence to you.) It just seems there is something else happening which I am not seeing (to say) and just now it isn't critical. I'll put it on the back burner and get back to it.

Appreciate the help though.

10

You are right, my choice of input names could have been clearer. I hope you get it sorted out. I may have overlooked something but it was working for me. If you want to debug, you could open your chrome developper tool (press f12) look at the console tab, is there any error? Also you could insert the following line: console.log($(this).text.trim() + " " + $scope.msg.oldGroupName + " " + $scope.msg.payload)
Just before the 2nd "if" and screenshot the result from your chrome console after you deploy and inject a new payload. Good luck!

11

Thank you for sharing this script!
I have a little problem. When the name is changed, the little collapse/expand arrow disappears.
Am I doing something wrong?

12

This is 3 years old.

Can you be a bit more specific?

Since then my machine has been rebuilt and I lost all the stuff on the machine - different event.

So I can't help if you aren't a bit more clear on WHICH script.