Custom node with HTML logic ... jQuery? Location of logic?

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?

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 :slight_smile:

There is a convention for input fields but not really for anything else as far as I am aware.

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.

1 Like

To add to Julian's reply, the docs are worth checking: https://nodered.org/docs/creating-nodes/properties#custom-edit-behaviour

oneditprepare (not onEditPrepare) is the key place to put your logic.

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: https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/nodes

2 Likes

Well, that was easy :sunglasses:

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.

Oops! Sorry about that.