Navigate back to the homepage

node-red dropdown example

Infinitbility
Node-red
July 17th, 2022 · 1 min read
node-red dropdown example

Hi Friends 👋,

Welcome To Infinitbility! ❤️

Create a dropdown in node-red

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

1<label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
2<input type="text" id="node-input-domain" /><br/><br/>
1let options = [
2 { value: "infinitbility.com", label: "infinitbility.com"},
3 { value: "aguidehub.com", label: "aguidehub.com"},
4 { value: "sortoutcode.com", label: "sortoutcode.com"},
5 ];
6
7$("#node-input-domain").typedInput({type:"domain", types:[{
8 value: "domain",
9 options:options
10}]})

Create a dropdown in node-red with multiple select 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.

1<label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
2<input type="text" id="node-input-domains" />
1let options = [
2 { value: "infinitbility.com", label: "infinitbility.com"},
3 { value: "aguidehub.com", label: "aguidehub.com"},
4 { value: "sortoutcode.com", label: "sortoutcode.com"},
5 ];
6
7$("#node-input-domains").typedInput({type:"domains", types:[{
8 value: "domains",
9 multiple: true,
10 options:options
11}]})

node-red dropdown node example

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…

node-red-dropdown-example/index.html

1<script type="text/html" data-template-name="dropdown">
2 <div class="form-row">
3 <label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
4 <input type="text" id="node-input-domain" /><br/><br/>
5 <label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
6 <input type="text" id="node-input-domains" />
7 </div>
8</script>
9
10<script type="text/html" data-help-name="dropdown">
11 <p>
12 A simple node that converts the message payloads into all dropdown
13 characters
14 </p>
15</script>
16
17<script type="text/javascript">
18 RED.nodes.registerType('dropdown',{
19 category: 'Toolkit',
20 color: '#a6bbcf',
21 defaults: {
22 name: {value:""},
23 domain: {value:""},
24 domains: {value:""},
25 },
26 inputs:1,
27 outputs:1,
28 icon: "file.png",
29 label: function() {
30 return this.name||"dropdown";
31 },
32 oneditprepare: function() {
33
34 let options = [
35 { value: "infinitbility.com", label: "infinitbility.com"},
36 { value: "aguidehub.com", label: "aguidehub.com"},
37 { value: "sortoutcode.com", label: "sortoutcode.com"},
38 ];
39
40 $("#node-input-domain").typedInput({type:"domain", types:[{
41 value: "domain",
42 options:options
43 }]})
44
45 $("#node-input-domains").typedInput({type:"domains", types:[{
46 value: "domains",
47 multiple: true,
48 options:options
49 }]})
50 }
51
52 });
53</script>

node-red-dropdown-example/index.js

1module.exports = function(RED) {
2 function DropdownNode(config) {
3 RED.nodes.createNode(this,config);
4 var node = this;
5 node.on('input', function(msg) {
6 let obj = {domain: config.domain, domains: config.domains};
7 msg.payload = obj;
8 node.send(msg);
9 });
10 }
11 RED.nodes.registerType("dropdown",DropdownNode);
12}

Let’s check the output of HTML file of the node

Node-red, dropdown example
Node-red, dropdown example

I have selected some values from both dropdowns and let test them in node-red flow and check the output in debugging.

Node-red, dropdown debug example
Node-red, dropdown debug example

node-red-dropdown-example Github Repo

multi-node-example node-red Github Repo

Create custom node in node-red

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

node-red environment variables example

node-red environment variables example

Example of environment variables in the node-red with step-by-step guide.

July 17th, 2022 · 1 min read
how to add new line in string in typescript?

how to add new line in string in typescript?

TypeScript, add new line example with step-by-step guide.

July 16th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]