node-red dropdown example

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To create dropdown ( select ) in node-red, use node red typedInput() function it will create dropdown list based on provided options by you.

<label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
<input type="text" id="node-input-domain" /><br/><br/>

let options = [
            { value: "infinitbility.github.io", label: "infinitbility.github.io"},
            { value: "aguidehub.com", label: "aguidehub.com"},
            { value: "sortoutcode.com", label: "sortoutcode.com"},
        ];

$("#node-input-domain").typedInput({type:"domain", types:[{
    value: "domain",
    options:options
}]})

To create multiple values select dropdown in node-red, pass the multiple: true option in node-red typedInput API it will enable multiple selections of dropdown value.

<label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
<input type="text" id="node-input-domains" />

let options = [
        { value: "infinitbility.github.io", label: "infinitbility.github.io"},
        { value: "aguidehub.com", label: "aguidehub.com"},
        { value: "sortoutcode.com", label: "sortoutcode.com"},
    ];
    
$("#node-input-domains").typedInput({type:"domains", types:[{
    value: "domains",
    multiple: true,
    options:options
}]})

Here, we are going to create our own custom node for the dropdown example.

Want to know the steps to create a node in nodes?

How to create multiple nodes in the node-red single module?

I’m not going to explain step by step process of creating or installing nodes in node-red but if want to know best practices read the above-mentioned article.

Let’s create a node…

<script type="text/html" data-template-name="dropdown">
  <div class="form-row">
    <label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
    <input type="text" id="node-input-domain" /><br/><br/>
    <label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
    <input type="text" id="node-input-domains" />
  </div>
</script>

<script type="text/html" data-help-name="dropdown">
  <p>
    A simple node that converts the message payloads into all dropdown
    characters
  </p>
</script>

<script type="text/javascript">
  RED.nodes.registerType('dropdown',{
      category: 'Toolkit',
      color: '#a6bbcf',
      defaults: {
          name: {value:""},
          domain: {value:""},
          domains: {value:""},
      },
      inputs:1,
      outputs:1,
      icon: "file.png",
      label: function() {
          return this.name||"dropdown";
      },
      oneditprepare: function() {

          let options = [
                  { value: "infinitbility.github.io", label: "infinitbility.github.io"},
                  { value: "aguidehub.com", label: "aguidehub.com"},
                  { value: "sortoutcode.com", label: "sortoutcode.com"},
              ];

          $("#node-input-domain").typedInput({type:"domain", types:[{
              value: "domain",
              options:options
          }]})

          $("#node-input-domains").typedInput({type:"domains", types:[{
              value: "domains",
              multiple: true,
              options:options
          }]})
      }

  });
</script>

module.exports = function(RED) {
    function DropdownNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        node.on('input', function(msg) {
            let obj = {domain: config.domain, domains: config.domains};
            msg.payload = obj;
            node.send(msg);
        });
    }
    RED.nodes.registerType("dropdown",DropdownNode);
}