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

**URL:** https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280
**Category:** Share Your Nodes
**Created:** [18 July 2022 16:42 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280 "2022-07-18T16:42:18Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![mharsch](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@mharsch](https://discourse.nodered.org/u/mharsch)
#### Post date: [18 July 2022 16:42 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280/1 "2022-07-18T16:42:18Z")

</div>

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:

> **[@mharsch/select-test](https://flows.nodered.org/node/@mharsch/select-test)**
>
> This toy example shows one way of dynamically changing a form in the edit node dialog based on the selection of a corresponding config node. This is based on the approach recommeneded in several threads in which node-serialport is mentioned.

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

---

<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: [19 July 2022 06:51 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280/2 "2022-07-19T06:51:53Z")

</div>

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

- 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)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 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:

---

<div class="post-metadata">

### Author: ![mharsch](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@mharsch](https://discourse.nodered.org/u/mharsch)
#### Post date: [19 July 2022 13:58 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280/3 "2022-07-19T13:58:33Z")

</div>

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

---

<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: [19 July 2022 16:53 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280/4 "2022-07-19T16:53:21Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mharsch](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@mharsch](https://discourse.nodered.org/u/mharsch)
#### Post date: [19 July 2022 17:16 UTC](https://discourse.nodered.org/t/toy-example-of-dynamic-menus-in-edit-dialog-feedback-request/65280/5 "2022-07-19T17:16:22Z")

</div>

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