List in Node Red Dashboard


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?

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.

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

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)?

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

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?

You can add 1 field:

1 Like

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

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.


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

[{"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":"","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{{}}}{{{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.

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…

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

Thats my flow:


My ui_form:

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?

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) 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.


How to import/export a flow

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 ```)

   code goes here 

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

See this post for more details - How to share code or flow json

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