Upgrading Nodes specifically my own

Developing Nodes
11

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