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

kolban · 28 October 2019 16:27

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?

TotallyInformation · 28 October 2019 16:41

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

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.

knolleary · 28 October 2019 16:47

To add to Julian's reply, the docs are worth checking: Node properties : Node-RED

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: node-red/packages/node_modules/@node-red/nodes at master · node-red/node-red · GitHub

TotallyInformation · 28 October 2019 16:47

Well, that was easy

github.com

Lighthouse-Automation/node-red-contrib-later/blob/master/later/later.html#L27




THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->


<script src='node-red-contrib-later/later.min.js'></script>


<script type="text/javascript">
    var schedValidate = function(val) {
        return ((val.length === 0) || (later.version && (later.parse.text(val).error < 0)));
    }
    //Set later to use local time rather than UTC
    if (later.version) {
        later.date.localTime();
    }

That is, in fact, delivered the way I suggested:

github.com

Lighthouse-Automation/node-red-contrib-later/blob/master/later/later.js#L137-L158


//Add a route to the 'later.js' instance installed with this node, so the html file can use it
RED.httpAdmin.get('/node-red-contrib-later/:file', function (req, res) {
    var laterDir = false;
    try {
        laterDir = path.dirname(require.resolve('later'));
    }
    catch(e) {
        debug("'Later' node path not resolved - " + e.name + ':' + e.message);
    }
    fs.readFile(path.join(laterDir, req.params.file), function (err, data) {
        if (err) {
            /* For some reason we can't load the parser for the editor....
            Send some dummy script for the html, basically DON'T CRASH THE EDITOR */
            debug('Could not serve later :' + err.message);
            res.set('Content-Type', 'text/javascript').send(
                'later = function() {return { get_error: "' + err.message + '"};}();');
        } else {
            debug('Later loaded from :' + laterDir);
            res.set('Content-Type', 'text/javascript').send(data);
        }

This file has been truncated. show original

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.

TotallyInformation · 28 October 2019 16:58

Oops! Sorry about that.

Topic		Replies	Views
Ideas for simplifying custom node creation Developing Nodes	19	495	16 March 2024
UIBUILDER newbee conceptual question node-red <->UIBUILDER<->frontend General uibuilder	6	254	8 February 2024
[Announce] uibuilder - the next phase! Part 1 Share Your Nodes uibuilder	10	1218	17 April 2022
Dynamic text in panel Developing Nodes	6	696	24 March 2019
Syntax Highlighting when creating a custom node General	3	461	23 August 2019

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

Related topics