Upgrading Nodes specifically my own

Hi Pete,

Seems I'm a bit too late to avoid you suffering from a programming burn-out :wink:
But here is how I try to add new properties to my contributions. Don't know if it is a correct design, but it seemed to be working fine ...

  • A new input field is added to an existing node:

     <div class="form-row">
         <label for="node-input-newProperty"><i class="icon-tag"></i> newProperty</label>
         <input type="text" id="node-input-newProperty" placeholder="newProperty">
     </div>
    
  • To make sure it is stored (and communicated to the server-side), I add a newProperty with a default value 123 and a number validator:

    defaults: {
          newProperty: { value:123, validate:RED.validators.number() },
          ...
     }
    

    Then you will see that the validator has run, but the default value hasn't been applied (red triangle):
    image

  • To get rid of the red triangle, you can apply a custom number validator:

    defaults: {
          newProperty: { value:123, validate: function(v) { return !v || !isNaN(v) } },
          ...
     }
    

    This validator returns 'valid' if the newProperty doesn't exist ( see !v ). Indeed when I add a 'debugger' statement to the validator, you can see clearly that the newProperty doesn't exist:

    image

  • Another issue at this moment is that ( at the server-side ) the property also doesn't exist yet:

    image

    To solve that, I for a new property I always add the same default value here:

     function BlocklyNode(n) {
         RED.nodes.createNode(this,n);
         this.newProperty = n.newProperty || 123;
         ...
    

    Remark: this all happens when the user hasn't opened the config screen of the existing nodes in his flow.

  • As soon as the user opens the config screen of the node, you will see in the oneditprepare that the newProperty doesn't exist here yet (for existing nodes in your flow):

    image

    As a result the default value 123 will not be displayed on your screen:

    image

    I solve this by setting the default value again in the oneditprepare:

    oneditprepare: function() {
         $('#node-input-newProperty').val(this.newProperty || 123);
          ...
    

    Now the default value appears on the config screen:

    image

    Note that this problem only occurs for existing nodes in your flow. When you drag a new node to your flow, this default value 123 will already be available (so therefore I use || 123).

Hopefully this explains some things to you, and hopefully I didn't make things explode in your brain :wink:
Bart

5 Likes