node-red-contrib-spark/spark/spark-payload-parser.html

Node-RED Nodes to integrate with the Cisco Webex Teams API

<script type="text/x-red" data-template-name="Webex Teams Payload Parser">
  <div class="form-row" style="margin-bottom:0;">
      <label><i class="fa fa-list"></i> Parser</span></label>
  </div>

  <div class="form-row node-input-parser-container-row">
      <ol id="node-input-parser-container"></ol>
  </div>

  <hr/>

  <div class="form-row">
    <label for="node-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Optional name">
  </div>
</script>

<script type="text/x-red" data-help-name="Webex Teams Payload Parser">
  <p>The Webex Teams Parse Node allows parsing of specific properties from the JSON
    <code>msg.payload</code> received from either the "Webex Teams Webhook Node" or
    the "Webex Teams API Node".
  </p>

  <!-- Configuration -->
  <p><strong>Configuration</strong></p>
  <p>Define each <i>"property"</i> to parse from the inbound
    <code>msg.payload</code>. Optionally, define a <i>"name"</i> to remap the
    property name used in the oubound JSON object. This allows remapping of
    properties such as <code>msg.payload.id</code> to
    <code>msg.payload.roomId</code>. If <i>"name"</i> is left undefined, it will
    use the same value as the original property.
  </p>

  <p>Add additional rows to define multiple properties and names to construct
    the output JSON object.
  </p>

  <!-- Input -->
  <p><strong>Input</strong></p>
  <p>This Node accepts input from either the "Webex Teams API Node" or
    "Webex Teams Webhook Node".
  </p>

  <!-- Output -->
  <p><strong>Output</strong></p>
  <p>By convention, the output from the Webex Teams Parser will have a
    <code>msg.payload</code> property. This contains a new JSON object with only
    the properties defined (and optionally remapped) in the Node configuration.
  </p>

  <!-- Footer -->
  <p>For further details and examples, reference the
    <a href="https://github.com/cumberlandgroup/node-red-contrib-spark/blob/master/README.md" target="_blank">README.md</a>
    file in the github repository.
  </p>
</script>

<script type="text/javascript">
  // register the Webex Teams api node
  RED.nodes.registerType('Webex Teams Payload Parser', {
    category: 'cisco_webex_teams',
    paletteLabel: 'parser',
    color: '#C0DEED',
    defaults: {
      name: {
        value: ''
      },
      parsers: {
        value: [{key: '', as: ''}],
      }
    },
    inputs: 1,
    outputs: 1,
    icon: 'spark-node-red.png',
    label: function() {
      if(this.name) {
        return this.name;
      }

      if(this.parsers && this.parsers.length > 0 && this.parsers[0].key !== '') {
        var label = [];
        for(var i = 0; i < this.parsers.length; i++) {
          label.push(this.parsers[i].key);
        }
        return 'Parser → ' + label.join(', ');
      } else {
        return "Webex Teams Payload Parser";
      }
    },
    labelStyle: function() {
      return this.name ? 'node_label_italic' : '';
    },
    oneditprepare: function() {
      var form = this;

      $('#node-input-parser-container').css('min-height','300px').css('min-width','450px').editableList({
        addItem: function(container,i,opt) {
          var parser = opt;

          var row = $('<div/>').appendTo(container);

          var parseKey = $('<input/>',{style:'width: 200px; margin-right: 5px',class:'node-input-parser-key',type:'text',placeholder:'property'})
            .appendTo(row);

          var parseAs = $('<input/>',{style:'width: 200px',class:'node-input-parser-as',type:'text',placeholder:'name (optional)'})
            .appendTo(row);

          parseKey.val(parser.key);
          parseAs.val(parser.as);

        },
        removable: true
      });

      if(!form.parsers || form.parsers.length === 0) {
        form.parsers = [{key: '', as: ''}];
      }

      for (var i = 0; i < form.parsers.length; i++) {
        var parser = form.parsers[i];
        $('#node-input-parser-container').editableList('addItem', parser);
      }

    },
    oneditsave: function() {
      var form = this;

      var parsers = $("#node-input-parser-container").editableList('items');
      form.parsers = [];

      parsers.each(function(i) {
        var p = $(this);

        var parser = {
          key: p.find('.node-input-parser-key').val(),
          as: p.find('.node-input-parser-as').val()
        };

        form.parsers.push(parser);
      });

    }
  });
</script>