Can't send a msg.topic in a scope.send for UI control

General
1

Basically, I'm trying to send the name of the topic in a scope.send function in a template node in order to make the button of my template send to a different tab. The code I'm using is this :

<script>
(function(scope) {

let client = document.getElementById('{{msg.client}}');

client.addEventListener('mousedown', e => {
   scope.send({payload: '{{msg.topic}}'})
});


})(scope);

</script>

This works and does exactly what I want when I replace {{msg.topic}} by the name of the Tab I want the UI to be redirected to, but since I want this to be dynamic, I want it to be the topic that allows for tab redirecting. Anyone knows what's wrong with this approach or code?

2

If i understood correctly maybe something like this ?

<script>
(function(scope) {

   scope.$watch('msg', function(msg) {
      if (msg && msg.client) {
      console.log("Message received from Node-red", msg)
      // Do something when msg arrives
      let client = document.getElementById(msg.client);
      
      if (client) {
         client.addEventListener('mousedown', e => {
         scope.send({payload: msg.topic})
         });
      }
      
   }});

})(scope);

</script>

you wait for the msg to be available in scope.$watch and then do the eventListener
and only if the msg has a msg.client property and further check if getElementById has returned something

3

Basically, I'm not very sure I correctly understand how scope functions work. Since I'm copy-pasting this exact template like a dozen times, it seems like it's calling the function for every instance of the template that I have, along with kind of breaking my template UI (background image disappears, clicking on all templates is disabled).

Your code works in the sense that it does send me to the correct UI Tab, but afterwards everything just breaks. Do you know if having multiple instances of the same template is the cause?

4

Basically, I think I simplified what I want to do : I have multiple template nodes, and when I click on them, I'd like for them to shoot a payload of the name of the Tab that they correspond to in a UI Control node. Hope that clarifies it!

Thank you so much for your help.

5

its clear .. but i dont know if it can be done easily without having to go in each ui_template node and on the main wrapping div element adding :

<div ng-click="send({payload: 'Home'})" style=" width:100%; height:100%; background-color:green;">
More elements 
</div>

but this way is hard coding the Tab name (Example : Home )

Second way a bit more dynamic :

<div ng-click="send({payload: $event.target.closest('.masonry-container').id.replace('Tab_', '')})" style=" width:100%; height:100%; background-color:red;"></div>
6

Catch the event (e.g. ng-click) by your own handler. Then you get the current event target and traverse to its top ui-card-panel element. The id of the ui-card-panel is like

< tab name >_< group_name >

You can send this information to NR

This is an example:

[
    {
        "id": "e3947d5bbc316eda",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f7f49c8728b85a22",
        "type": "debug",
        "z": "e3947d5bbc316eda",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 730,
        "y": 360,
        "wires": []
    },
    {
        "id": "bbd264562450abf6",
        "type": "ui_template",
        "z": "e3947d5bbc316eda",
        "group": "30e064314a04f0bd",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .button-ripple{\n        overflow:hidden;\n        width:100%;\n        height:100%;\n        left:0;\n        top: 0;\n        position:absolute;\n        display:block;\n        z-index:1;\n        border-radius: inhirit;\n        background-clip: padding-box;\n        background-color: rgba(255,255,255,0);\n        transition: all 0.55s cubic-bezier(0,0,0.6,1) ;\n        -webkit-transform: translateZ(1);\n    }\n    .button-ripple:active{\n        left:50%;\n        width:0%;\n        background-color: rgba(255,255,255,0.1);\n        transition: all 0s;\n    }\n</style>\n\n<div class=\"nr-dashboard-button\">\n    <md-tooltip md-direction=\"center\">My Button</md-tooltip>\n    <button id=\"myButton_ccd3e21e\" class=\"md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"mybutton\">\n        <span>my Label</span>\n        <div class=\"button-ripple\"></div>\n    </button>\n</div>\n<script type=\"text/javascript\">\n  \n(function(scope) {\n    scope.OnButtonClick = function(evt){\n        const cardPanelElement = evt.currentTarget.closest('ui-card-panel');\n        const arrNames = cardPanelElement.id.split('_');\n        objPayload = {};\n        objPayload.tab = arrNames[0];\n        objPayload.group = arrNames[1];\n        scope.send({payload: objPayload});\n    }\n    \n    scope.$watch('msg', function(msg) {\n        \n    });\n})(scope);\n\n</script>\n  \n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 520,
        "y": 360,
        "wires": [
            [
                "f7f49c8728b85a22"
            ]
        ]
    },
    {
        "id": "30e064314a04f0bd",
        "type": "ui_group",
        "name": "TestGroup",
        "tab": "fa0a520e5739912d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "fa0a520e5739912d",
        "type": "ui_tab",
        "name": "TestTab",
        "icon": "dashboard",
        "order": 5,
        "disabled": false,
        "hidden": false
    }
]
7

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