Ui-template: sending msg through a function

Dashboard
1

I have tried all day to send a message through a function within the ui-template.

Here is a very basic example (one of many tries) inspired from the ui-template help and few other but to be frank I am not familiar with the scope concept and it is not working. Any help will be very welcome;

<md-button ng-click="myfunction(Clair)">Clair</md-button>
<script>
(function(scope) {
    function myfunction(name) {
        scope.send({payload:name});
    };
})(scope);
</script>
2

Here are two ways to send messages

<script>
this.scope.action = function(value) { return value; }
</script>
<md-button ng-click="send({payload:action('clair')})">clair</md-button>

<!–– or with no script -->
<md-button ng-click="send({payload:'clair1'})">clair1</md-button>
3

Thanks, but how could I send the message within the function ?

My example does not make much sense but it is only to keep it simple and understand the principles

4

Here is a more complete example.
Note the following...

  • buttonName in the HTML is bound to scope.buttonName in the script
  • scope.func is set as a function & so is avaiable to call in ng-click as func(...)
  • When a msg arrives from node-red side, we can adjust scope.buttonName and it is immediately reflected in the dashboard button text
<md-button id="{{'my_button_'+$id}}" ng-click="func($event)">{{buttonName}}</md-button>

<script>
    (function(scope) {
        scope.buttonName = "clare";

        scope.func = function($event) {
            console.log("button clicked (you will see me in the console)");
            scope.send({payload:scope.buttonName});
        }

        //watch for incoming messages
        scope.$watch('msg', function(msg) {
            console.log("msg received", msg);
            if (msg && msg.topic == "set-button-text") {
                // Set button text when msg.topic == "set-button-text"
                scope.buttonName = msg.payload;
            }
        });
    })(scope);
</script>

Demo...
chrome_NYhflnPLqL

Flow (use CTRL+I to import)...

[{"id":"7e5679cc6a223311","type":"ui_template","z":"c2233fc1d8cc5c3b","group":"81dd3718.b97888","name":"","order":1,"width":0,"height":0,"format":"<md-button id=\"{{'my_button_'+$id}}\" ng-click=\"func($event)\">{{buttonName}}</md-button>\n\n<script>\n\n\n    (function(scope) {\n        scope.buttonName = \"clare\";\n\n        scope.func = function($event) {\n            console.log(\"button clicked (you will see me in the console)\");\n            scope.send({payload:scope.buttonName});\n        }\n\n        //watch for incoming messages\n        scope.$watch('msg', function(msg) {\n            console.log(\"msg received\", msg);\n            if (msg && msg.topic == \"set-button-text\") {\n                // Set button text when msg.topic == \"set-button-text\"\n                scope.buttonName = msg.payload;\n            }\n        });\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2780,"y":120,"wires":[["8ac528363579be05"]]},{"id":"e66177ee39c19a5b","type":"inject","z":"c2233fc1d8cc5c3b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set-button-text","payload":"sarah","payloadType":"str","x":2590,"y":120,"wires":[["7e5679cc6a223311"]]},{"id":"8ac528363579be05","type":"debug","z":"c2233fc1d8cc5c3b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":2770,"y":180,"wires":[]},{"id":"a5d7db11fcf7c2d2","type":"inject","z":"c2233fc1d8cc5c3b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"set-button-text","payload":"clare","payloadType":"str","x":2590,"y":80,"wires":[["7e5679cc6a223311"]]},{"id":"81dd3718.b97888","type":"ui_group","name":"Home","tab":"4e11db25.239e94","order":1,"disp":true,"width":"8","collapse":true,"className":""},{"id":"4e11db25.239e94","type":"ui_tab","name":"Buttons","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
5

To send a msg using your function the function needs to be a property in scope.

(function(scope) {
    scope.myfunction = function(payload,topic) {
        let msg = {
            payload,
            topic,
            another:"test"
        }
        scope.send(msg);
    };
})(scope);
</script>
<md-button ng-click="myfunction('Clair
','topic1')">Clair</md-button>
6

Thanks greatly!

Node Red is a great solution rather easy to learn and use but as soon as you move to template to improve the UI, it is another game...
I was trying to use (learn) HTML/CSS basic features but I guess I need also to better master the scope concept and Angular in general.
Any recommendation on the best way to do that?