# List in Node Red Dashboard

**URL:** <https://discourse.nodered.org/t/list-in-node-red-dashboard/83763>\
**Category:** Dashboard\
**Created:** [16 December 2023 18:13 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763 "2023-12-16T18:13:59Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [16 December 2023 18:13 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/1 "2023-12-16T18:13:59Z")

</div>

Hello,

I would like to insert a window in Node Red Dashboard in which I can enter a previously undefined number of article numbers. I have the following scenario: I want to enter different articles with their article numbers at a packing station. However, it is not known in advance how many items will be packed at the packing station. I would like to enter the article numbers in a kind of list, when the packing process is complete, I would like to confirm this with a button on the dashboard, with the name "Packing process completed" for example. The numbers are only forwarded when the button is pressed. Are there any options here in Node Red?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 December 2023 19:03 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/2 "2023-12-16T19:03:07Z")

</div>

> [@Schlitz](#):
>
> Are there any options here in Node Red?

Yes, there certainly are. But nothing in Dashboard itself without the use of a ui\_template node which will need a bit of HTML for you to create.

UIBUILDER as an alternative, actually has a list creator in the `uib-element` node. You could use that with the uibuilder node or you could send the output to a `uib-html` node and use the resulting html in Dashboard via a template.

There are lots of other things that could also be done but without knowing your level of knowledge of JavaScript and HTML, hard to give more detail.

---

<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:** [16 December 2023 19:16 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/3 "2023-12-16T19:16:51Z")

</div>

There are several extra nodes to help including ui-list and ui-table

---

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [16 December 2023 23:02 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/4 "2023-12-16T23:02:44Z")

</div>

Thanks for the answers.

Is there possibly a simple way to implement this? I am an beginner. It doesn't necessarily have to be a list, I just want to enter several data (numbers) in a field one after the other and pass them on together (ideally by pressing a button)?

---

<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:** [16 December 2023 23:17 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/5 "2023-12-16T23:17:05Z")

</div>

Have a look at the ui-form node, you could submit a list of numbers using a multi line input, the form also has a submit button

---

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [17 December 2023 00:22 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/6 "2023-12-17T00:22:54Z")

</div>

Okay, nice call. But here I have to specify the number of fields beforehand (?). So if I add 5 fields, but then possibly want to enter 6 numbers, I have one too few. If I enter the numbers one after the other in one field, I have to separate them manually with a comma, otherwise I end up with a large number... are there any possibilities?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [17 December 2023 07:10 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/7 "2023-12-17T07:10:35Z")

</div>

You can add 1 field:

> [@E1cid](#):
>
> using a multi line input

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 December 2023 09:56 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/8 "2023-12-17T09:56:51Z")

</div>

To help us recommend the best solution please tell us what you are going to do with the data once you have it.

---

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [17 December 2023 12:55 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/9 "2023-12-17T12:55:23Z")

</div>

The multi line input works. I then save the entered data in a MongoDB.

However, I then have another problem. Some of the numbers entered should have an addition to bring them to a certain standard. For example, the numbers entered under childEPCs should have the addition "urn:epc:id:sgtin" before the number entered. If I now use the multi line, only the first entry receives this addition.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b860819375d02004aec4ffec37fdd0d137173ae.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2ea53ba79add4f35c9c4791046aa696d2dc50cdb.png)

---

<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:** [17 December 2023 13:34 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/10 "2023-12-17T13:34:22Z")

</div>

The you will need to split the output from the form and add the extra parentid's, then rejoin.  
here is an example of how to do that, using lowcode

```auto
[{"id":"ccd289245bc6e3fd","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"parentID","v":"urn:zz:xx:cc:","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":180,"y":2600,"wires":[["0c233c81a6f78369"]]},{"id":"0c233c81a6f78369","type":"template","z":"d1395164b4eec73e","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"1\n2\n3\n4\n5","output":"str","x":340,"y":2600,"wires":[["058b14a2ba795850"]]},{"id":"058b14a2ba795850","type":"split","z":"d1395164b4eec73e","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":470,"y":2600,"wires":[["0a4935fe856528c0","5be0ec1be8794121"]]},{"id":"0a4935fe856528c0","type":"template","z":"d1395164b4eec73e","name":"","field":"parts.ch","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{{parts.ch}}}{{{parentID}}}","output":"str","x":400,"y":2660,"wires":[["d03d33dac6ad19e0","5be0ec1be8794121"]]},{"id":"5be0ec1be8794121","type":"debug","z":"d1395164b4eec73e","name":"debug 2461","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":630,"y":2560,"wires":[]},{"id":"d03d33dac6ad19e0","type":"join","z":"d1395164b4eec73e","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":530,"y":2660,"wires":[["cbcf34e525bff31d"]]},{"id":"cbcf34e525bff31d","type":"debug","z":"d1395164b4eec73e","name":"debug 2460","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":670,"y":2660,"wires":[]}]

```

You could also split in your function then append the id's to the last four and rejoin to.

---

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [17 December 2023 18:45 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/11 "2023-12-17T18:45:35Z")

</div>

Can you explain how to implement the Split up in a Function?  
How do i bring them together After that? If I use a join node, I have to determine the number of elements beforehand, but this can vary in my Szenario…

---

<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:** [17 December 2023 19:02 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/12 "2023-12-17T19:02:37Z")

</div>

Sure, if you provide an example flow with your function and the ui form, and a text representation of your required output.

---

<div class="post-metadata">

**Author:** ![Schlitz](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Schlitz](https://discourse.nodered.org/u/Schlitz)\
**Post date:** [18 December 2023 08:37 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/13 "2023-12-18T08:37:16Z")

</div>

Thats my flow:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76a2912f22216defdc86963896fd6e8502bf7664.png)

My ui\_form:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21b67d387e2f1f374e2a10017652bd3ce9b6e1f6.png)

The output:  
"parentID" - Only one number (123), which should receive the addition "urn:epc:id:grai": urn:epc:id:grai:123  
"childEPCs" - several numbers, each of which should receive the suffix "urn:epc:id:sgtin"  
(The remaining entries remain the same for the time being)

The addition can also change (there are 3-4 different ones)... Is there a possibility here, for example when entering the numbers in the dashboard, to tick which addition is now appended?

---

<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:** [18 December 2023 09:32 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/14 "2023-12-18T09:32:52Z")

</div>

When i said example flow, I did not mean images, as they can not be copied and imported into node read. I also asked for an text version of the full output that you expect from the function node.

The following will help you do this.

There’s a great page in the docs ([Working with messages : Node-RED](https://nodered.org/docs/user-guide/messages)) that will explain how to use the debug panel to find the right path to any data item.

Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.

![BX00Cy7yHi](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd1f333a9e043b061b39917c328b0094d3e52d30.gif)

[How to import/export a flow](https://nodered.org/docs/user-guide/editor/workspace/import-export)

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<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:** [17 January 2024 09:33 UTC](https://discourse.nodered.org/t/list-in-node-red-dashboard/83763/15 "2024-01-17T09:33:42Z")

</div>

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