# Dynamically display multiple output text nodes

**URL:** <https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014>\
**Category:** General\
**Created:** [1 August 2020 14:35 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014 "2020-08-01T14:35:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [1 August 2020 14:35 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/1 "2020-08-01T14:35:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [1 August 2020 15:26 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/2 "2020-08-01T15:26:17Z")

</div>

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

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [1 August 2020 17:47 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/3 "2020-08-01T17:47:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 August 2020 18:34 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/4 "2020-08-01T18:34:50Z")

</div>

see this recent thread where Bart had fun styling inputs - [Dashboard text input node - avoid global state](https://discourse.nodered.org/t/dashboard-text-input-node-avoid-global-state/30744/14)

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [1 August 2020 21:30 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/5 "2020-08-01T21:30:17Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 August 2020 22:06 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/6 "2020-08-01T22:06:46Z")

</div>

> [@davej](#):
>
> how do I retrieve

P.S. David has asked the same question in another [discussion](https://discourse.nodered.org/t/dashboard-text-input-node-avoid-global-state/30744/16), so I have answered it there.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 August 2020 22:06 UTC](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/7 "2020-08-15T22:06:52Z")

</div>

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