Node Development config-node missing create new button and dropdown

[Czerwe]

Hi,
i am quite new to JavaScript/Node/NodeRed development but not to coding as it.
I did follow following this tutorial 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

[JGKK]

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

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

and than in the html part:

    <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>

[Czerwe]

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

cdcapinode.html

<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

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

<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

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);
}

[knolleary]

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.

[Czerwe]

i altered the lower-case.html to:

...
<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

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

to

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

Many thanks for the quick replies.