How can I send a message from a ui_button inside an HTML template?

Dashboard
1

Hey!

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

<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.

<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?

2

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

1 Like
3

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.

<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

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

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 :roll_eyes:

5

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.

6

Thanks for your help!!!

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

[{"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?

7

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>

8

Thanks for your help tbdltee. :grinning::grinning::grinning:

9

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!

10

found solution on my question above - it was enough to Uncheck this in ui_template node (checked by default)
image