# How can I send a message from a ui\_button inside an HTML template?

**URL:** <https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152>\
**Category:** Dashboard\
**Created:** [8 August 2019 16:50 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152 "2019-08-08T16:50:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [8 August 2019 16:50 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/1 "2019-08-08T16:50:40Z")

</div>

Hey!

I am trying to combine node-red, html and javascript.  
I have created the below button with html.

```auto
<div>
     <button type="button" class="button save" data-action="save">Save</button>
</div>

```

If Ι press the html button then I can call the below script.

```auto
<script id="test-js">  

var saveButton = wrapper.querySelector("[data-action=save]");

saveButton.addEventListener("click", function (event) {
  if (canvas.isEmpty()) {
   ............
  } else {
   .............
  }
});

 </script>

```

I would like to stop using the html button and replace it with a ui\_button.  
Is it possible?

---

<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:** [8 August 2019 22:03 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/2 "2019-08-08T22:03:05Z")

</div>

Not able to check right now but I'm fairly certain the built in help on the ui\_template node gives to an example of sending a msg from html

Also, search the forum and the [flows](https://flows.nodered.org/?term=button&type=flow&num_pages=1)

---

<div class="post-metadata">

**Author:** ![tbdltee](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tbdltee](https://discourse.nodered.org/u/tbdltee)\
**Post date:** [9 August 2019 07:55 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/3 "2019-08-09T07:55:36Z")

</div>

node-red-dashbaord has their own controller. the easiest way is to use ng-click. The send() command was already bind in the scope by node-red-dashboard. Let's try.

```auto
<button type="button" class="button save" ng-click="send({topic:'click', payload:'button was clicked'})">

```

Actually, I normally use below code in my ui dashboard

```auto
<md-button class="button save" ng-click="send({topic:'clicked', payload:'button was clicked'})">SAVE</md-button>

```

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [9 August 2019 10:40 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/4 "2019-08-09T10:40:58Z")

</div>

tbdltee thanks about the ng-click properties.

However I don't understand how to move the data-action=save from html button at the saveButton variable with ng-click.

I try this

`<md-button class="button save" ng-click="send({topic:'clicked', payload:'button was clicked', data-action:'save'})">SAVE</md-button>`

but it does not work 🙄

---

<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:** [9 August 2019 11:58 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/5 "2019-08-09T11:58:28Z")

</div>

Are you sure it's not working? Have you attached a debug node to the output of the ui\_template? Do that, deploy, click the button, see what happens.

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [9 August 2019 12:35 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/6 "2019-08-09T12:35:42Z")

</div>

Thanks for your help!!!

In the below code the two html buttons show a pop up message, different for every button.

```auto
[{"id":"5f4b8b13.af3a84","type":"ui_template","z":"5087a524.121224","group":"4e5b45cb.163f3c","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n \n\n <div>\n <button id=\"btn1\" type=\"button\" class=\"button clear\" data-action=\"clear\">Clear</button>\n <button id=\"btn2\" type=\"button\" class=\"button save\" data-action=\"save\">Save</button>\n </div>\n\n<md-button id=\"btn1\" class=\"button save\" ng-click=\"send({topic:'clicked', payload:'Clear'})\">Clear</md-button>\n<md-button id=\"btn2\" class=\"button save\" ng-click=\"send({topic:'clicked', payload:'Save'})\">Save</md-button>\n \n \n<script>\nvar x = document.getElementById(\"btn1\");\nx.addEventListener(\"click\", Function1);\n\nvar x = document.getElementById(\"btn2\");\nx.addEventListener(\"click\", Function2);\n\nfunction Function1() {\nalert (\"Clear\");\n}\n\n\nfunction Function2() {\nalert (\"Save\");\n}\n\n</script>\n\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1020,"y":760,"wires":[["27560da1.b027c2"]]},{"id":"72244df.a895eb4","type":"ui_button","z":"5087a524.121224","name":"","group":"4e5b45cb.163f3c","order":6,"width":"2","height":"2","passthru":false,"label":"CLEAR","tooltip":"","color":"","bgcolor":"","icon":"","payload":"clear","payloadType":"str","topic":"","x":760,"y":760,"wires":[["5f4b8b13.af3a84"]]},{"id":"709bca52.73b784","type":"ui_button","z":"5087a524.121224","name":"","group":"4e5b45cb.163f3c","order":6,"width":"2","height":"2","passthru":false,"label":"SAVE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"save","payloadType":"str","topic":"","x":750,"y":800,"wires":[["5f4b8b13.af3a84"]]},{"id":"27560da1.b027c2","type":"debug","z":"5087a524.121224","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1170,"y":760,"wires":[]},{"id":"4e5b45cb.163f3c","type":"ui_group","z":"","name":"Logo","tab":"2df54972.e9d336","order":1,"disp":false,"width":"4","collapse":false},{"id":"2df54972.e9d336","type":"ui_tab","z":"","name":"EVEXIA","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

How can I activate the same operation (show a popup message) with the ui\_buttons and md-button through the Function1 and Function2 of ui\_template?

---

<div class="post-metadata">

**Author:** ![tbdltee](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tbdltee](https://discourse.nodered.org/u/tbdltee)\
**Post date:** [16 August 2019 13:26 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/7 "2019-08-16T13:26:26Z")

</div>

the data-action key contain special character, i.e. - you need to put qoute char (') to make it work. It will be

`<md-button class="button save" ng-click="send({topic:'clicked', payload:'button was clicked', 'data-action':'save'})">SAVE</md-button>`

---

<div class="post-metadata">

**Author:** ![sysman83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sysman83/32/10112_2.png) [@sysman83](https://discourse.nodered.org/u/sysman83)\
**Post date:** [29 August 2019 07:47 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/8 "2019-08-29T07:47:10Z")

</div>

Thanks for your help [tbdltee](https://discourse.nodered.org/u/tbdltee). 😀😀😀

---

<div class="post-metadata">

**Author:** ![alexmed](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@alexmed](https://discourse.nodered.org/u/alexmed)\
**Post date:** [28 January 2020 16:41 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/9 "2020-01-28T16:41:39Z")

</div>

Hello! This solution in general is working for me but I have a bit different situation (and someone else might have the same) and hope you can also advice on how to solve.

my ui\_template node relies on many fields in inbound msg.payload i.e. acively uses ng-repeat etc.

problem is: when i generate payload with button click (nomatter which function) - this payload for some reason not just goes to ui\_template Output connector (in backend) but also kind of come again into Input connector of ui\_template node.

In other words, for example: if normally I have an array of Todo items to show in my msg.payload (lets call it msg.payload.todoArray) but when I click the button which generates dummy message like

ng-click="send({topic:'clicked', payload:'button was clicked'})

(Edit: for sake of clarity - this code with button containing ng-click is inside the same ui\_template node.)

ui\_template receives and proceeds this Payload and shows empty Todolist (till I update it from main flow), because there is no (obviously) todoArray field in this generated message.

On the other hand when you use Button from Dashboard nodes - it does not break anything.

Is there some trick to isolate or prevent data sent with command:

ng-click="send({topic:'clicked', payload:'button was clicked'})

...to isolate or prevent this message coming and processed by ui\_template node again?

I just want to send simple message to backend flow without breaking UI relying on msg.payload data...

The goal: to have functional buttons to be dynamically generated (not inserted as dash-nodes in Flow) by ui\_template and their click/messages obtainable in the backend. Possible its something to do with validation or scope...

Thank you and sorry for long text!

---

<div class="post-metadata">

**Author:** ![alexmed](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@alexmed](https://discourse.nodered.org/u/alexmed)\
**Post date:** [30 January 2020 14:11 UTC](https://discourse.nodered.org/t/how-can-i-send-a-message-from-a-ui-button-inside-an-html-template/14152/10 "2020-01-30T14:11:37Z")

</div>

found solution on my question above - it was enough to Uncheck this in ui\_template node (checked by default)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a3b8c400992784ab7ce7289adc0a3290e52fa1ea.png)