# 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:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [10 March 2022 23:46 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/1 "2022-03-10T23:46:48Z")

</div>

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;

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

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 March 2022 00:31 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/2 "2022-03-11T00:31:01Z")

</div>

Here are two ways to send messages

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [11 March 2022 07:47 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/3 "2022-03-11T07:47:33Z")

</div>

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

---

<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}]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 March 2022 09:44 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/5 "2022-03-11T09:44:23Z")

</div>

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

```auto
(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>

```

---

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [11 March 2022 11:20 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/6 "2022-03-11T11:20:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 April 2022 11:21 UTC](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/7 "2022-04-10T11:21:05Z")

</div>

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