Dynamically display multiple output text nodes

General
1

I am looking for any suggestions to a problem.
I have an incoming MQTT message containing an array of objects. The number of objects could be from zero to n.

I want to display each element in the array in an output text node and for each output text node, I want to provide a text input node. So 5 elements in the array = 5 output text nodes and 5 input nodes. (The input nodes are to allow the user to enter a description) . Putting all the elements into a ui table isn't going to work for this due to the need to enter a line of text for each element.

I have scratched around and the only idea I have come up with is to define each text out/input node in its own group and hide the group. Problem with this is that I would have to set an upper limit of array elements which I really don't want to do and it is a bit kludgy.

Simple problem but I haven't fathomed out a simple solution.

2

You could do this all in html using the template
a simple example

[{"id":"9c0950b1.c61b1","type":"inject","z":"4484ee28.caa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"chart1","payload":"[\"text1\",\"text2\"]","payloadType":"json","x":140,"y":320,"wires":[["4bc18ffc.98da38"]]},{"id":"de1cd353.5326c","type":"inject","z":"4484ee28.caa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"chart1","payload":"[\"text1\",\"text2\",\"text3\"]","payloadType":"json","x":153.3333282470703,"y":385.3333435058594,"wires":[["4bc18ffc.98da38"]]},{"id":"4bc18ffc.98da38","type":"function","z":"4484ee28.caa3c","name":"","func":"var html = \"\";\nfor (var i in msg.payload){\n    html = html + '<label for=\"w' + i + '\">A title ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\nmsg.template = html;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":340,"wires":[["2b69d2df.753636"]]},{"id":"2b69d2df.753636","type":"ui_template","z":"4484ee28.caa3c","group":"165e1e1a.e752fa","name":"","order":2,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":570,"y":340,"wires":[[]]},{"id":"165e1e1a.e752fa","type":"ui_group","z":"","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

i have just done text areas but you could add text input form. There is an example in the info help text that show how to send a message.

1 Like
3

Thanks for the example. It helps me understand the method.
I would ideally like to maintain the same 'look and feel' that Node Red has with its own text input and output nodes and not deviate from that. I haven't yet found how to mirror that.

4

see this recent thread where Bart had fun styling inputs - Dashboard text input node - avoid global state

1 Like
5

Thanks @dceejay
That is a good example . I somehow missed it in my searching.
One thing that eludes me is how do I retrieve the input text using that example? I don't want to have to use a button but rather the same that NR does with a or .
More searching hasn't surfaced an example as to how to grab the entered text and a look at Web Developer tools at a NR text node hasn't made me feel any the wiser!

6

P.S. David has asked the same question in another discussion, so I have answered it there.

7

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