# Dynamic list in node configuration

**URL:** <https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877>\
**Category:** Developing Nodes\
**Created:** [6 February 2022 16:00 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877 "2022-02-06T16:00:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![wz2b](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wz2b/32/55839_2.png) [@wz2b](https://discourse.nodered.org/u/wz2b)\
**Post date:** [6 February 2022 16:00 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/1 "2022-02-06T16:00:05Z")

</div>

I wrote a custom node that generates a JSON payload. I would like to have the node configuration have an 'extra tags' list. The first version I wrote lets the user specify these extra tags as a json object:

{ "extraTag": "extraValue"}

but what I really want is to have it look like the injector node does, with a list of keys and values, and an [+add] button.

I'm not exactly sure how to do this, short of doing what Inject does - build it all up manually using jquery. Is there an easier way to make a list like this, or does it really necessitate custom everything? Are there other examples of nodes that have this sort of thing?

---

<div class="post-metadata">

**Author:** ![wz2b](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wz2b/32/55839_2.png) [@wz2b](https://discourse.nodered.org/u/wz2b)\
**Post date:** [6 February 2022 19:03 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/2 "2022-02-06T19:03:43Z")

</div>

Kind of answering my own question here, but after lookign for more examples I found this:

```
https://nodered.org/docs/api/ui/editableList/

```

which is used by two internal nodes: Change and Switch. That plus [another example](https://www.himpler.com/blog/editable-lists-in-node-red/) I found (not on my native language, but still understandable) got me, I think, on my way. One thing the German example had was it created a 'template' for the row. I think I'll do that as well.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [6 February 2022 19:42 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/3 "2022-02-06T19:42:22Z")

</div>

HI @wz2b

Welcome to the forums.

There many many nodes that use the editable list (I am sure)  
I am one of them.

**Creating the list element**  
[https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L47](https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L47)

**Populating the list from serialized data**  
[https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L62](https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L62)

**This is called when clicking the add button and when populating data**  
[https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L96](https://github.com/zwave-js/node-red-contrib-zwave-js/blob/ea6aab997fe192ffed390b68c556c7a5b05d0ccc/zwave-js/event-filter.html#L96)

**Its also documented here.**  
[https://nodered.org/docs/api/ui/editableList/](https://nodered.org/docs/api/ui/editableList/)

EDIT:  
Oh you found the docs 😆

---

<div class="post-metadata">

**Author:** ![wz2b](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wz2b/32/55839_2.png) [@wz2b](https://discourse.nodered.org/u/wz2b)\
**Post date:** [6 February 2022 23:24 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/4 "2022-02-06T23:24:45Z")

</div>

I did. It took me a little while because i wasn't sure of the name of the thing I was looking for. Thanks for pointing me to some other examples. I have this mostly working:

- It creates an empty list on startup
- You can click the 'add' button and add rows
- When I run the node, it does the right thing (the rows end up in the output payload)

What I don't have working yet is populating the UI list from the stored node configuration. I don't think I understand the semantics of addItem. It gets called (apparently) when one pushes the "add" button. Does this also get called with [data] = whatever the config field is set to when it starts? or does onprepareedit have to do that?

---

<div class="post-metadata">

**Author:** ![wz2b](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wz2b/32/55839_2.png) [@wz2b](https://discourse.nodered.org/u/wz2b)\
**Post date:** [6 February 2022 23:28 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/5 "2022-02-06T23:28:02Z")

</div>

Actually I re-read what you said and you already answered the question: it happens in both cases. I just thought in the case where it's getting initially populated (I from the node def config data) that I would have seen node.something to pull it out of the config. Maybe I defined the variables wrong. In html registration I did this:

`tags: {value: [], required: false}`

In my node type definitino (which is typescript) I did this:

`{ ... tags: Array<Array<string>> ...}`

in other words, it's an array of arrays of strings like:

`[[ 'a', 'b'], ['c', 'd']] ]`

---

<div class="post-metadata">

**Author:** ![wz2b](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wz2b/32/55839_2.png) [@wz2b](https://discourse.nodered.org/u/wz2b)\
**Post date:** [7 February 2022 00:53 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/6 "2022-02-07T00:53:53Z")

</div>

I think I have it. Your zwave example was an immense help. Thank you for pointing me to it.

I noticed what you were doing in prepare was creating the list, then re-selecting it. One of the things I was doing wrong was assuming .editableList actually returned the list, so I then called eList('addItem') as if it was a function. Apparently that's not the case. I've lived my whole world in react and angular and just have no experience with jQuery, so this probably looks like a n00b mistake.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [7 February 2022 07:30 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/7 "2022-02-07T07:30:50Z")

</div>

Glad your up and running.

You can see the the items being loaded on the switch node here.  
[https://github.com/node-red/node-red/blob/5293563a6a5903106a84920043f5948ab205c1c3/packages/node\_modules/%40node-red/nodes/core/function/10-switch.html#L413](https://github.com/node-red/node-red/blob/5293563a6a5903106a84920043f5948ab205c1c3/packages/node_modules/%40node-red/nodes/core/function/10-switch.html#L413)

You can add your items in bulk also in **oneditprepare** , but not sure if you then get an array in the **addItem** callback or its still triggered for each item.

**addItems**  
[https://nodered.org/docs/api/ui/editableList/#methods-addItems](https://nodered.org/docs/api/ui/editableList/#methods-addItems)

---

<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:** [8 April 2022 07:31 UTC](https://discourse.nodered.org/t/dynamic-list-in-node-configuration/57877/8 "2022-04-08T07:31:39Z")

</div>

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