# Node Development config-node missing create new button and dropdown

**URL:** <https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798>\
**Category:** General\
**Created:** [23 June 2020 10:54 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798 "2020-06-23T10:54:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Czerwe](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@Czerwe](https://discourse.nodered.org/u/Czerwe)\
**Post date:** [23 June 2020 10:54 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/1 "2020-06-23T10:54:52Z")

</div>

Hi,  
i am quite new to JavaScript/Node/NodeRed development but not to coding as it.  
I did follow following [this tutorial](https://nodered.org/docs/creating-nodes/config-nodes) but fail to get an dialog to create a new Configuration Node.

I whould like to have a drop down of all, already created remote-servers and the option to create a new one. How should the html part of the node should look like?

thanks

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [23 June 2020 11:01 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/2 "2020-06-23T11:01:09Z")

</div>

In the defaults part of your nodes script you need to add this:

```auto
yourNodeConfig: {value:"", type: "yourNode-config"},

```

and than in the html part:

```auto
    <div class="form-row">
        <label for="node-input-yourNodeConfig"><i class="fa fa-cog"></i> Config</label>
        <!-- Node-Red will replace this input element by a drop-down (with available configurations) -->
        <input type="text" id="node-input-yourNodeConfig">
    </div>

```

---

<div class="post-metadata">

**Author:** ![Czerwe](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@Czerwe](https://discourse.nodered.org/u/Czerwe)\
**Post date:** [23 June 2020 11:41 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/3 "2020-06-23T11:41:48Z")

</div>

I am definitly doing something wrong.  
I have the feeling the naming is important.  
Here are my files:  
First the ConfigNode files:

cdcapinode.html

```auto
<script type="text/javascript">
    RED.nodes.registerType('cdcapinode',{
        category: 'config',
        defaults: {
            host: {value:"localhost",required:true},
            port: {value:1234,required:true,validate:RED.validators.number()},
        },
        label: function() {
            return this.host+":"+this.port;
        }
    });
</script>

<script type="text/html" data-template-name="cdcapinode">
    <div class="form-row">
        <label for="node-config-input-host"><i class="icon-bookmark"></i> Host</label>
        <input type="text" id="node-config-input-host">
    </div>
    <div class="form-row">
        <label for="node-config-input-port"><i class="icon.9
            -bookmark"></i> Port</label>
        <input type="text" id="node-config-input-port">
    </div>
</script>

```

cdcapinode.js

```auto
module.exports = function(RED) {
    function CdcApiNode(n) {
        RED.nodes.createNode(this,n);
        this.host = n.host;
        this.port = n.port;
    }
    RED.nodes.registerType("cdcapinode",CdcApiNode);
}

```

Then the nodes that should use it:

lower-case.html

```auto
<script type="text/javascript">
    RED.nodes.registerType('lower-case',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            server: {value:"", type:"cdcapinode"},
            name: {value:""},
            prefix: {value:""},
        },
        inputs:1,
        outputs:1,
        icon: "hash.png",
        label: function() {
            return this.name||"lower-case";
        }
    });
</script>

<script type="text/html" data-template-name="lower-case">
    <div class="form-row">
     <label for="node-input-cdcapinode"><i class="fa fa-cog"></i> cdcapinode</label>
     <input type="text" id="node-input-cdcapinode">
    </div>
    
    <div class="form-row">
        <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">
     <label for="node-input-prefix"><i class="icon-tag"></i> Prefix</label>
     <input type="text" id="node-input-prefix">
    </div>

</script>

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

```

lower-case.js

```auto
module.exports = function(RED) {
    function LowerCaseNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        node.on('input', function(msg) {
            msg.payload = msg.payload.toLowerCase();
            node.send(msg);
        });
    }
    RED.nodes.registerType("lower-case",LowerCaseNode);
}

```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 June 2020 11:58 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/4 "2020-06-23T11:58:13Z")

</div>

You are right to say the naming of the properties and the html elements is the key to this.

In your `lower-case` node, you have defined the `server` property as being the reference to the `cdcapinode` node.

In the edit dialog, the corresponding input should then have an id of `node-input-server` - you currently have it set to `node-input-cdcapinode` which is wrong.

---

<div class="post-metadata">

**Author:** ![Czerwe](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@Czerwe](https://discourse.nodered.org/u/Czerwe)\
**Post date:** [23 June 2020 12:52 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/5 "2020-06-23T12:52:18Z")

</div>

i altered the **lower-case.html** to:

```auto
...
<script type="text/html" data-template-name="lower-case">
    <div class="form-row">
     <label for="node-input-cdcapinode"><i class="fa fa-cog"></i> cdcapinode</label>
     <input type="text" id="node-input-server">
    </div>
...

```

and now it works.

as **knolleary** mentioned i changed

```auto
<input type="text" id="node-input-cdcapinode">

```

to

```auto
<input type="text" id="node-input-server">

```

Many thanks for the quick replies.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 July 2020 12:52 UTC](https://discourse.nodered.org/t/node-development-config-node-missing-create-new-button-and-dropdown/28798/6 "2020-07-07T12:52:24Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.