# Ui-template: sending msg through a function

**URL:** <https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686>\
**Category:** Dashboard\
**Created:** [10 March 2022 23:46 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686 "2022-03-10T23:46:48Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 March 2022 08:28 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/4 "2022-03-11T08:28:39Z")

</div>

> [@regissg](#):
>
> Thanks, but how could I send the message within the function ?

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/477b90c7dd3d445852332608ea4cec6818b52b94.gif)

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

```auto
[{"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}]

```

---

_[View the full topic](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686)._