Toy example of dynamic menus in edit dialog (feedback request)

Share Your Nodes
1

Greetings, I needed to dynamically change the form elements inside a node edit dialog based on current configuration node selected. I couldn't find an exact match out there, but node-serialport was often mentioned as an example of this type of thing. I was able to get something working and I've published it here:

I'd very much appreciate feedback on how this was implemented and any best practices or alternative methods of achieving this kind of functionality. I'm a jQuery / frontend noob so I'm sure there is room for improvement. Also would appreciate links to other nodes that do similar functionality.

Thanks,
Mike

2

My comments are more stylistic than anything. So you should take or leave according to your style.

  • Personally, I wouldn't have posted a test node to npm and not with a node-red tag. There are already a LOT of node-red tagged nodes in the library. :smiley:

  • In my own nodes, I prefer to wrap the javascript section of the html file in an IIFE. That means that I can safely move things outside the RED.nodes.registerType function which allows the code to be properly broken into small functions and external variables. All of which makes maintenance of your code in the future a lot easier and makes bugs easier to squash.

  • You might want to consider whether you really want to continue supporting old browsers. Your html script section still uses var throughout. Moving to only support "modern" browsers (from around 2015!) would let you use let and const as well as other ES6 features. These can reduce errors and improve efficiency. That would also let you use Template literals (Template strings) which are easier to write/parse and more efficient than using string catenation.

  • Where you are walking through an array to create the select option strings, note that jQuery lets you define attributes as an object rather than having to build a complex string. As in this example taken from uibuilder:

    // Load each option - first entry will be the default
Object.values(uibuilderTemplates).forEach( templ => {
    // Build the drop-down
    $('#node-input-templateFolder').append($('<option>', {
        value: templ.folder,
        text: templ.name,
    }))
})

    Which also uses an arrow function, also from ES6 (it keeps the same this context as its parent).

3

Thanks for taking the time to respond. I've unpublished the node and will look into each of your other suggestions.

1 Like
4

by all means share the direct link to github though. people who want to can still install direct from there.

5

Indeed. Here's the link: https://github.com/mharsch/select-test