node-red-contrib-chatbot/nodes/chatbot-generic-template.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<script type="text/javascript">

  RED.nodes.registerType('chatbot-generic-template', {
    category: 'RedBot',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      title: {
        value: '',
        validate: function(title) {
          return $.RedBot.validate.isEmpty(title) || title.length <= 80 ;
        }
      },
      subtitle: {
        value: '',
        validate: function(subtitle) {
          return subtitle == null || subtitle.length <= 80
        }
      },
      imageUrl: {
        value: ''
      },
      sharable: {
        value: true
      },
      aspectRatio: {
        value: 'horizontal'
      },
      buttons: {
        value: [],
        validate: function(buttons) {
          var valid = true;
          var idx;
          for(idx = 0; idx < buttons.length; idx++) {
            if (!$.RedBot.validate.button(buttons[idx])) {
              valid = false;
            }
          }
          return valid && buttons.length <= 3 && buttons.length >= 0;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Generic Template',
    icon: 'chatbot-generic-template.png',
    label: function() {
      return this.name || 'Generic Template';
    },
    oneditsave: function() {
      var buttons = $("#node-input-buttons-container").editableList('items');
      var node = this;
      node.buttons = [];
      var idx;
      for(idx = 0; idx < buttons.length; idx++) {
        node.buttons.push($(buttons[idx]).RB_getButtonData());
      }
    },
    oneditprepare: function() {
      $.RB_Legend();
      $('#node-input-buttons-container')
        .css('min-width','450px')
        .editableList({
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ['url', 'postback', 'call', 'login', 'newline', 'logout', 'share'],
              platforms: ['facebook', 'slack'],
              badges: true
            });
            $(container).RB_setButtonData(item);
          },
          removable: true,
          sortable: true
        });

      if (this.buttons != null) {
        this.buttons.forEach(function(button) {
          $('#node-input-buttons-container').editableList('addItem', button);
        });
      }
    },
    oneditresize: function() {
      var dialogForm = $('#dialog-form');
      var rowName = $('.form-row-name', dialogForm);
      var rowTitle = $('.form-row-title', dialogForm);
      var rowSubtitle = $('.form-row-subtitle', dialogForm);
      var rowImageUrl = $('.form-row-imageUrl', dialogForm);
      var rowLabel = $('.form-row-label', dialogForm);
      var rowCarousel = $('.form-row-carousel', dialogForm);
      var height = dialogForm.height() - rowName.height() - rowTitle.height() - rowSubtitle.height()
        - rowImageUrl.height() - rowLabel.height() - rowCarousel.height() - 40;
      $('#node-input-buttons-container').editableList('height', height);
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-generic-template">
<div class="form-row form-row-name">
  <label for="node-input-name"><i class="icon-tag"></i> Name</label>
  <input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row form-row-title">
  <label for="node-input-title">Title</label>
  <input type="text" id="node-input-title" placeholder="Title">
</div>
<div class="form-row form-row-subtitle">
  <label for="node-input-subtitle">Subtitle</label>
  <input type="text" id="node-input-subtitle" placeholder="Subtitle">
</div>
<div class="form-row form-row-imageUrl">
  <label for="node-input-image_url">Image URL</label>
  <input type="text" id="node-input-imageUrl" placeholder="Image URL">
</div>
<div class="form-row form-row-label" style="margin-bottom:0;">
  <label><i class="fa fa-list"></i> <span>Buttons</span></label>
</div>
<div class="form-row node-input-rule-container-row">
  <ol id="node-input-buttons-container"></ol>
</div>
<div class="form-row form-row-carousel">
  <label for="node-input-aspectRatio">Carousel</label>
  <select id="node-input-aspectRatio" class="platform-combo-facebook" style="width: 150px;" placeholder="Image Aspect Ratio">
    <option value="horizontal">Horizontal</option>
    <option value="square">Square</option>
   </select>
   <input type="checkbox" value="true" id="node-input-sharable" style="width: 20px; margin:0px 0px 0px 15px;">
   <span>Sharable</span>
</div>
<div class="redbot-form-legend"></div>
</script>

<script type="text/x-red" data-help-name="chatbot-generic-template"><p>Generic Template is a small card with few lines of text, an optional image and buttons.</p>
<p>Two or more generic templates can be combined together in a carousel by simply chaining <code>Generic Template node</code> (to maximum of 10). Each template can have a maximum of 3 buttons, <code>title</code> and <code>subtitle</code> are limited to 80 chars.</p>
<p>Each template can have up to 3 buttons, see <code>Buttons node</code> for a complete list of available buttons (only <code>quick-reply</code> and <code>location</code> are not available here). </p>
<p>Each <code>Generic Template node</code> has also a <em>default action</em> which acts like a <code>url</code> button. The first button of type <code>url</code> in the <em>buttons</em> section will be used as default action of the item.</p>
<p>In order to create a generic template in a upstream <code>Function node</code></p>
<pre><code>msg.payload = {
  title: &#39;my title&#39;,
  subtitle: &#39;I am a sub title&#39;,
  imageUrl: &#39;http://image.server.com/cover.png&#39;,
  buttons: [
    {
      type: &#39;url&#39;,
      url: &#39;http://javascript-jedi.com&#39;,
      label: &#39;Javascript Jedi&#39;
    }
  ],
  sharable: true,
  aspectRatio: &#39;horizontal&#39;
}
</code></pre><p>or in order to pass a collection of elements for the carousel</p>
<pre><code>msg.payload = {
  sharable: true,
  aspectRatio: &#39;horizontal&#39;,
  elements: [
    {
      title: &#39;my title&#39;,
      subtitle: &#39;I am a sub title&#39;,
      imageUrl: &#39;http://image.server.com/cover.png&#39;,
      buttons: [
        {
          type: &#39;url&#39;,
          url: &#39;http://javascript-jedi.com&#39;,
          label: &#39;Javascript Jedi&#39;
        }
      ]
    },
    {
      title: &#39;another title&#39;,
      subtitle: &#39;Second sub title&#39;,
      imageUrl: &#39;http://image.server.com/cover2.png&#39;,
      buttons: [
        {
          type: &#39;url&#39;,
          url: &#39;http://javascript-jedi.com&#39;,
          label: &#39;Javascript Jedi&#39;
        }
      ]
    }
  ]      
}
</code></pre><p>Available parameters for the <code>msg.payload</code></p>
<dl class="message-properties">


<dt>title<span class="property-type">string</span><dd>Title of the list element</dd>
<dt>subtitle<span class="property-type">string</span><dd>Sub title of the list element</dd>
<dt>imageUrl<span class="property-type">string</span><dd>Url of the image element</dd>
<dt>buttons<span class="property-type">array of [button]</span><dd>Array of buttons, see <code>Buttons node</code> for more details</dd>
<dt>sharable<span class="property-type">boolean</span><dd>The list can be shared</dd>
<dt>aspectRatio<span class="property-type">string</span><dd>Aspect ratio of the image. Valid values: <em>horizontal</em>, <em>square</em></dd>
<dt>elements<span class="property-type">array of [element]</span><dd>An array of elements for the carousel (here are the elements created by the previous chained <code>Generic Template node</code></dd>

</dl>
<p>The <code>[element]</code> object</p>
<dl class="message-properties">


<dt>title<span class="property-type">string</span><dd>Title of the generic template element</dd>
<dt>subtitle<span class="property-type">string</span><dd>Sub title of the generic template element</dd>
<dt>imageUrl<span class="property-type">string</span><dd>Url of the generic template image</dd>
<dt>buttons<span class="property-type">array of [button]</span><dd>Array of buttons, see <code>Buttons node</code> for more details</dd>

</dl>
<p><img src="https://img.shields.io/badge/platform-Facebook-blue.svg" alt="Facebook">
<img src="https://img.shields.io/badge/platform-Slack-green.svg" alt="Slack"></p>
</script>