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?
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 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.
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?
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:
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.
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.
