\
**Category:** General\
**Created:** [28 October 2019 16:27 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237 "2019-10-28T16:27:10Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@kolban](https://discourse.nodered.org/u/kolban)\
**Post date:** [28 October 2019 16:27 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237/1 "2019-10-28T16:27:10Z")
I'm working on a custom node that can have many core _modes_. When a user configures the properties of the node, I am imagining a radio button area to select between the modes:
- mode 1
- mode 2
- mode 3
Depending on which mode is selected, I wish to present the user with configuration options specific for that mode.
Now the questions:
- Where should I place my JavaScript to handle the visibility logic? For example when mode1 is selected, hide/show various fields. Should it be in the HTML file or can I place the JavaScript in a separate JS source file?
- Are there any conventions for referencing elements in the configuration panel? For example, if I have a text input field called "name", I want to make sure I reference _my_ name field and not another field somewhere on the page also called "name".
- Are there any available client (browser) side libraries that I can assume exist to help me manipulate the configuration panel? For example, jQuery?
---
**Author:**  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 October 2019 16:41 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237/2 "2019-10-28T16:41:01Z")
> [@kolban](#):
>
> Where should I place my JavaScript to handle the visibility logic
It must be in the onEditPrepare function in the html file. You can use functions of course to make things easier to follow. Check out the code for the uibuilder node for examples.
I expect that you _could_ call other js files - most simply by delivering them directly from your main js file as you would with an API - again uibuilder may give you some clues.
Personally, I develop my html file in 4 separate files, one for each section (code, ui and help) and a master template. Then I have a command line tool that merges them. You've probably guessed by now that uibuilder has that code 🙂
> [@kolban](#):
>
> Are there any conventions for referencing elements in the configuration panel?
There is a convention for input fields but not really for anything else as far as I am aware.
> [@kolban](#):
>
> Are there any available client (browser) side libraries that I can assume exist to help me manipulate the configuration panel?
Yes, both jQuery and jQuery UI are available to you. D3.js is also available of course (it is used for the graphical elements of the Editor) but probably not as helpful.
A few other libraries are available but are not documented so couldn't be garenteed to stay. You can see them in the Sources tab of your developer tools.
Actually, I notice from that an external js reference in node-red-contrib-later that I'd forgotten about! Let me dig out a reference.
---
**Author:**  [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [28 October 2019 16:47 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237/3 "2019-10-28T16:47:13Z")
To add to Julian's reply, the docs are worth checking: [Node properties : Node-RED](https://nodered.org/docs/creating-nodes/properties#custom-edit-behaviour)
`oneditprepare` (_not_ `onEditPrepare`) is the key place to put your logic.
> [@kolban](#):
>
> Are there any conventions for referencing elements in the configuration panel?
You should pick names that are not like to cause clashes. For example, giving an input an id of `name` or `input` is a bad idea. It is a good idea to prefix your ids with the something unique for your node, such as its type.
Many of the core nodes do this sort of thing. The best thing would be to find a node that does something similar to what you want, and then check out how it does it - they are all to be found here: [node-red/packages/node\_modules/@node-red/nodes at master · node-red/node-red · GitHub](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/nodes)
---
**Author:**  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 October 2019 16:47 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237/4 "2019-10-28T16:47:19Z")
Well, that was easy 🕶
>
That is, in fact, delivered the way I suggested:
>
Note one slight gotya on line 141 of the js fle though. `require.resolve` only works if the package defines a `main` entry in package.json.
But in your case, you can simply reference a local file. Alternatively, you can "mount" a folder containing static resources - again uibuilder has some examples - just remember to unmount them in the `done` part of your node's js file otherwise redeployment of the node results in multiple references and a memory leak.
---
**Author:**  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 October 2019 16:58 UTC](https://discourse.nodered.org/t/custom-node-with-html-logic-jquery-location-of-logic/17237/5 "2019-10-28T16:58:24Z")
> [@knolleary](#):
>
> `oneditprepare` ( _not_ `onEditPrepare` ) is the key place to put your logic.
Oops! Sorry about that.