Unable to insert HTML button from JavaScript

[aadam]

Hello,

I'm fairly new to Node Red and am working to create a dynamic UI interface.

I'm trying to send the code for button from a function node and execute it inside a UI template Node.

What confusing me is why the button code will work when pasted into the template node, but not when inserted inside a <div ng-bind-html="msg.payload | trusted"></div>

Could someone please tell me why the msg.payload on the Top Example is not the same as the Bottom Example?

[{"id":"a0a700c4.bb3d38","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a79473be.5d78b8","type":"ui_template","z":"a0a700c4.bb3d38","group":"360ae98f.ef268e","name":"Top Example","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":710,"y":300,"wires":[["aa2abf62.3ec0f8"]]},{"id":"aeef6183.c68988","type":"function","z":"a0a700c4.bb3d38","name":"Send HTML Button from JS","func":"msg.payload = '<md-button ng-click=\"send({payload:true)\">Please Work</md-button>';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":300,"wires":[["a79473be.5d78b8"]]},{"id":"68f8ce2a.301478","type":"inject","z":"a0a700c4.bb3d38","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":340,"wires":[["aeef6183.c68988","aeec1969.0fd96"]]},{"id":"aa2abf62.3ec0f8","type":"debug","z":"a0a700c4.bb3d38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":860,"y":300,"wires":[]},{"id":"aeec1969.0fd96","type":"ui_template","z":"a0a700c4.bb3d38","group":"360ae98f.ef268e","name":"Bottom Example","order":0,"width":0,"height":0,"format":"<md-button ng-click=\"send({payload: true})\">Click me</md-button>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":360,"wires":[["8eb7a205.8254b"]]},{"id":"8eb7a205.8254b","type":"debug","z":"a0a700c4.bb3d38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":870,"y":360,"wires":[]},{"id":"360ae98f.ef268e","type":"ui_group","name":"Default","tab":"3f36586c.c666a","order":1,"disp":true,"width":"6","collapse":false},{"id":"3f36586c.c666a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[TotallyInformation]

Are you actually going to use any of the other features of Dashboard? If you are only using ui_template nodes, you would probably be better off using uibuilder.

[aadam]

The project (currently) is entirely series of dashboard templates.

I've looked several times into setting up uibuilder and still cannot for the life of me understand if it's even installed correctly. I've imported all the examples from your wiki and they all generally look like this on my side.

I'll spend time over the weekend learning uibuilder, but if the <md-button ng-click="send({payload:true)">Please Work</md-button> code could be sent & executed dynamically, I'd be mostly done with the series of dashboard templates approach.

Update: installing uibuilder through palette manager, command prompt, separate installing of Node.js, several restarts seems to have fixed the uibuilder install.

[aadam]

@TotallyInformation

I think I've figured enough of uibuilder to code the project if you can help me over a dilema: How can the index.html & index.js files be editted, saved, and executed through Node Red functions?

I'm working to create an interface which adds & removes rows of 1 button, 2 dropdowns & 3 textareas based on a user input.
My novice assumption is that I'll need to take the user input, recreate the UI code, and then send the new code to index.html & index.js files to execute for the changes to take effect.

In your view, what is the best way to proceed?

[TotallyInformation]

Why would you want to dynamically edit a front-end file? This is pretty much an anti-method.

Don't get me wrong, it CAN be done with uibuider - well sort-of, not quite in the way you describe. But I would certainly discourage it.

Using something like VueJS (or even JQuery for that matter), you can create a repeating section of HTML code that will instantiate as many buttons and other components as you need. Look at the repeat atribute of VueJS.

That way, you create the code up front but in a way that the code expands itself based on an input array.

Does that help?

[aadam]

Yes.

You've given me a clear idea--use repeating attribute of VueJS-- and that is probably more valuable than the original question which would've lead to dynamically editing a front-end file.

[TotallyInformation]

Well, now that you know the right direction. I can also say that you can pass JavaScript via a msg to a uibuilder front-end. The setting to do that is under advanced settings. But really, it isn't a great idea in virtually every case I can think of. And it can be quite a bad security weakness if you aren't really careful.

Anyway, have fun and stay safe.