Input node creation timing

Developing Nodes
1

Hey,

I know the following should work but probably has to do with the time it gets called... My question is how to fix it and where. As Im still fairly new to java please dont overcomplicate things :stuck_out_tongue:

I want to fetch the users number of outputs from the input field called npumps.
What I get is undefined (hence my suspicion there is a timing issue between calling the input and displaying the number).

How do I fix it so that whenever a user inputs the number it updates the amount of outputs...
I looked through the example of the function node but those are so dynamically written I cant follow the code really well.

Any help would be appreciated.

<script type="text/javascript">
    RED.nodes.registerType('pumpgroup',{
        category: 'wbd typical',
        color: '#e4a363',
        defaults: {
            name: {value:"pumpgroup name"},
            number : {value:0},  
            npumps : {value:1}   //number of pumps in this group defines the outputs
        },
        inputs:1,
        outputs:n_pumps(), 
        inputLabels: "Usage see manual",
        outputLabels: "",//["Object Control %","change state","Alarm","Notification","Debugging","group object info"],
        icon: "font-awesome/fa-server",
        //define label function
        label: function() {
            return this.name||"pumpgroup";
        }
        
    });
    //fetch number of pump input
    function n_pumps(){
        let n = $("#node-input-number").val();
        alert(n);
        return n;
        }
</script>
2

If you want to update it dynamically, you need a jQuery watcher on the input field. An on change event is fired when the field changes value and that is what you want to use to change the number of outputs dynamically.

If you want an example, have a look at the uib-sender node in uibuilder as that has a switch that changes the number of outputs between zero and one.

3

Hi @znetsixe

It is mentioned briefly in the docs here, but if you want to be able to dynamically set the number of outputs your node has, then it needs to include outputs in its defaults object.

This tells the editor that the value may change and it will update the node as needed.

        defaults: {
            name: {value:"pumpgroup name"},
            number : {value:0},  
            npumps : {value:1},   //number of pumps in this group defines the outputs
            outputs: { value: 1 }
        },
        inputs: 1,
        outputs: 1,

So you could rename npumps to outputs and just use that property wherever you use npumps, or you could add an oneditsave function to copy the value of npumps to outputs whenever the edit dialog is closed. Something like this:

oneditsave: function() {
   this.outputs = $("node-input-npumps").val()
}
4

Cheers knolleary,
I read that part about the outputs and totally missed the meaning haha. Appoligies for the "stupid" question :wink:

Post edit :

@knolleary
the code misses a # in the $("node-input-npumps") just for anyone reading this post and trying to replicate the results > sharing my edited version looks like (for other people as myself missing some information).

<script type="text/javascript">
    RED.nodes.registerType('pumpgroup',{
        category: 'wbd typical',
        color: '#e4a363',
        defaults: {
            name: {value:"pumpgroup"},
            number : {value:0},  
            npumps : {value:1},   //number of pumps in this group defines the outputs
            outputs:{value:$("#node-input-npumps").val()}
        },
        inputs:1,
        outputs: 1,//n_pumps(), 
        inputLabels: "Usage see manual",
        outputLabels: "",
        icon: "font-awesome/fa-server",
        //define label function
        label: function() {
            return this.name||"pumpgroup";
        },
        //when editing this node save the number of outputs defined by user
        oneditsave: function() {
            this.outputs = $("#node-input-npumps").val();
        }
        
    });

</script>

<script type="text/html" data-template-name="pumpgroup">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i>Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-number"><i class="fa fa-tag"></i>Number</label>
        <input type="text" id="node-input-number" placeholder="0">
    </div>
    <div class="form-row">
        <label for="node-input-npumps"><i class="fa fa-tag"></i>number of pumps</label>
        <input type="number" id="node-input-npumps" placeholder="0">
    </div>
    <div class="form-tips"><b>Tip:</b> This is here to help.</div>
    </div>

</script>

<script type="text/html" data-help-name="pumpgroup">
    <p>A pump group node for liquids or gasses</p>
</script>
1 Like