Problem with custom button using template node and dynamic label

[NodeRookie]

Hello,
I've an issue with a custom button showing a value received from the msg.value.

I created a very basic flow to show the problem. I created 2 buttons, on the left hand side using the button node and on the right hand side using the template node. The button text contains the time from {{msg.payload.text}}.

Now when pressing the buttons it looks like this:

For the button using the template node, the button text disapeared. The button node for sure works fine.
When injecting a new msg.payload.text to the button, it is showed again.
The question is, what can I do to prevent the message text to disapear when pressing the button?

The reason for using the template node is, I want to style a more fancy button, which is not possible with the button node, but this is not relevant for this problem.

Sample flow:

[{"id":"db7339fe1d38e71f","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"237208b4d90b3f5e","type":"ui_button","z":"db7339fe1d38e71f","name":"Button Node ","group":"554b035586d8f0a6","order":3,"width":3,"height":1,"passthru":false,"label":"{{msg.payload.text}}","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"close","payloadType":"str","topic":"topic","topicType":"msg","x":590,"y":240,"wires":[["ee91989ae801d683"]]},{"id":"7e0e22cfaa0e385f","type":"ui_template","z":"db7339fe1d38e71f","group":"554b035586d8f0a6","name":"Template Node","order":4,"width":3,"height":1,"format":"<md-button ng-click=\"send({payload: 'close'})\" style=\"height: 100%\">\n    {{msg.payload.text}}\n</md-button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":600,"y":120,"wires":[["99547ec1699401cb"]],"outputLabels":["out"]},{"id":"ca14e098ce7425d6","type":"inject","z":"db7339fe1d38e71f","name":"","props":[{"p":"payload.text","v":"19:27","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":310,"y":180,"wires":[["7e0e22cfaa0e385f","237208b4d90b3f5e"]]},{"id":"b9545b67dcdc1c70","type":"ui_text","z":"db7339fe1d38e71f","group":"554b035586d8f0a6","order":1,"width":3,"height":1,"name":"","label":"Button Node","format":"","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":590,"y":80,"wires":[]},{"id":"97c2b2e006a2ce34","type":"ui_text","z":"db7339fe1d38e71f","group":"554b035586d8f0a6","order":2,"width":3,"height":1,"name":"","label":"Template Node","format":"","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":600,"y":200,"wires":[]},{"id":"99547ec1699401cb","type":"debug","z":"db7339fe1d38e71f","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":840,"y":120,"wires":[]},{"id":"ee91989ae801d683","type":"debug","z":"db7339fe1d38e71f","name":"debug 9","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":840,"y":240,"wires":[]},{"id":"554b035586d8f0a6","type":"ui_group","name":"Default","tab":"55de4a8bef2cedc5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"55de4a8bef2cedc5","type":"ui_tab","name":"Buttontest","icon":"dashboard","disabled":false,"hidden":false}]

[E1cid]

The button node uses internal code to rewrite the Dom element.

You will have to write some code and make the onclick a function and rewrite the button text dom element you would need to give the button a class or id. There are examples in the template help text and a web search on getElementById or getElementByClassName also DOM elements. Or use JQuery. There is a learning curve.

Here is an example

[{"id":"ca14e098ce7425d6","type":"inject","z":"db7339fe1d38e71f","name":"","props":[{"p":"payload.text","v":"19:27","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":510,"y":140,"wires":[["7e0e22cfaa0e385f"]]},{"id":"7e0e22cfaa0e385f","type":"ui_template","z":"db7339fe1d38e71f","group":"554b035586d8f0a6","name":"Template Node","order":4,"width":3,"height":1,"format":"<md-button id=\"my_unique_id1234\" ng-click=\"send({payload:action('close', 'my_unique_id1234')})\" style=\"height: 100%\">\n    {{msg.payload.text}}\n</md-button>\n<script>\n\nthis.scope.action = function(text, id) { \n    let element = document.getElementById(id);\n    element.innerHTML = text;\n    return text; \n    }\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":700,"y":140,"wires":[["99547ec1699401cb"]],"outputLabels":["out"]},{"id":"99547ec1699401cb","type":"debug","z":"db7339fe1d38e71f","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":900,"y":140,"wires":[]},{"id":"554b035586d8f0a6","type":"ui_group","name":"Default","tab":"55de4a8bef2cedc5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"55de4a8bef2cedc5","type":"ui_tab","name":"Buttontest","icon":"dashboard","disabled":false,"hidden":false}]

Or feed the output back into the template, which also has issues and may result in infinite loop if not careful.

[edit] If you require the same value in the button, deselect store output message in store state this will most likely sort your issue of the value disappearing. You could then ignore my example of writing to the DOM element.

[jbudd]

I tried feeding the output back into the template as @E1cid said but couldn't make it work (due to javascript ignorance).

I think this works though:

[{"id":"4a6046f1ca6ac684","type":"ui_button","z":"762ba9c488ac3630","name":"Button Node ","group":"554b035586d8f0a6","order":3,"width":3,"height":1,"passthru":false,"label":"{{msg.payload.text}}","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"close","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":200,"wires":[["227a0f2a6afa0af1"]]},{"id":"ea8e7909fdef3c9f","type":"ui_template","z":"762ba9c488ac3630","group":"554b035586d8f0a6","name":"Template Node","order":4,"width":3,"height":1,"format":"<md-button ng-click=\"send({payload: 'close'})\" style=\"height: 100%\">\n    <div ng-bind-html=\"msg.payload\"></div>\n</md-button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":620,"y":100,"wires":[["de8804d66f331d40","f5dcb01ad3e3df88"]],"outputLabels":["out"]},{"id":"a63dfbdc09fcc6ba","type":"inject","z":"762ba9c488ac3630","name":"","props":[{"p":"payload.text","v":"19:27","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":90,"y":200,"wires":[["4a6046f1ca6ac684","b076433971c16940"]]},{"id":"0227367cfe582204","type":"ui_text","z":"762ba9c488ac3630","group":"554b035586d8f0a6","order":1,"width":3,"height":1,"name":"","label":"Button Node","format":"","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":370,"y":40,"wires":[]},{"id":"e1861c2eed42254d","type":"ui_text","z":"762ba9c488ac3630","group":"554b035586d8f0a6","order":2,"width":3,"height":1,"name":"","label":"Template Node","format":"","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":380,"y":160,"wires":[]},{"id":"de8804d66f331d40","type":"debug","z":"762ba9c488ac3630","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":100,"wires":[]},{"id":"227a0f2a6afa0af1","type":"debug","z":"762ba9c488ac3630","name":"debug 9","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":200,"wires":[]},{"id":"b076433971c16940","type":"change","z":"762ba9c488ac3630","name":"","rules":[{"t":"set","p":"fudge","pt":"flow","to":"payload.text","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":180,"y":100,"wires":[["f5dcb01ad3e3df88"]]},{"id":"f5dcb01ad3e3df88","type":"change","z":"762ba9c488ac3630","name":"msg.payload = flow.fudge","rules":[{"t":"set","p":"payload","pt":"msg","to":"fudge","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":100,"wires":[["ea8e7909fdef3c9f"]]},{"id":"554b035586d8f0a6","type":"ui_group","name":"Default","tab":"55de4a8bef2cedc5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"55de4a8bef2cedc5","type":"ui_tab","name":"Buttontest","icon":"dashboard","disabled":false,"hidden":false}]

Obviously if you want to change the displayed label, feed it into the first change node. To redisplay, send a message to the second change node.
If you do it this way, be sure not to tick "Pass through messages from input"!

But I'm intrigued that you want to style the template in a way not possible with the button node. What do you want to do to it?

[E1cid]

@jbudd

I tried feeding the output back into the template as @E1cid said but couldn't make it work (due to javascript ignorance).

You would need to alter the payload a bit.

[{"id":"ca14e098ce7425d6","type":"inject","z":"db7339fe1d38e71f","name":"","props":[{"p":"payload.text","v":"19:27","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":510,"y":140,"wires":[["7e0e22cfaa0e385f"]]},{"id":"7e0e22cfaa0e385f","type":"ui_template","z":"db7339fe1d38e71f","group":"554b035586d8f0a6","name":"Template Node","order":4,"width":3,"height":1,"format":"<md-button ng-click=\"send({payload:{text:'close',initial: msg.payload.text}})\" style=\"height: 100%\">\n    {{msg.payload.text}}\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":700,"y":140,"wires":[["99547ec1699401cb","7e0e22cfaa0e385f"]],"outputLabels":["out"]},{"id":"99547ec1699401cb","type":"debug","z":"db7339fe1d38e71f","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":900,"y":140,"wires":[]},{"id":"554b035586d8f0a6","type":"ui_group","name":"Default","tab":"55de4a8bef2cedc5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"55de4a8bef2cedc5","type":"ui_tab","name":"Buttontest","icon":"dashboard","disabled":false,"hidden":false}]

[jbudd]

But when you click the button in the template, the text changes to "CLOSE" (NB upper case).
I interpreted the OP as wanting it to stay as 19.27.

[E1cid]

It was an example so you could see a change and see how it worked, obviously you could feedback any value you wished, and later move any value to whatever property you wished.
The OP can manipulate the examples for their own use, and in doing so learn how it works.
The upper case is the angular ng styling of the template node, you would need to correct that with CSS.

[NodeRookie]

Thanks for the proposal.

I want to make the button look like this:

It is to control the rollos. So the button shall have the symbol on the left hand side and the for the up and down arrow buttons the opening and closing times. The stop button shows the position. Hope in the next cycle they will evolve further.
I was not able to achieve this with the button nodes. For sure I can add an icon to it, but it doesn't look so nice.

The "circel approach" I saw already in a similar case during crawling the web for solutions. I would like to avoid it and go for a function handling it inside the template node.

[NodeRookie]

Yes you are right, the time should stay as button text until it's get changed from outside, e.g. due to the little movement of the sunset/sunrise times each day.

[NodeRookie]

Thanks, will try to solve it with an appropriate function on the click event.

I tried to deselect 'Add output messages to stored state.', but this didn't solve it.

[E1cid]

Strange, as when i click it stays 19:27. Maybe try refreshing browser to clear cache and try again.

[NodeRookie]

Yes you're right. My Notebook crashed and I had to reboot. Now it works when this option is deselcted.
But is it reliagble? I had also the effect that the

ng-click="send({payload: 'close'})"

didn't work in the beginning. No message was send on the click event. But suddenly it started to work. Tried as well to implement a function, which feels a kind of more stable.