Config node not showing

Hi, I am trying to create a custom node and the only item I am struggling with is the config node. I have created the files ' anna.js / anna.html /anna-config.js/anna-config.html and a package.json; I've mentioned the nodes in my package.json under node-red/nodes, referenced the property of my ' remote server' in the input of the anna.html, called the node in the anna.js; and the node is showing in NR under the category I have set, I can see the config node in the pallette, but when I open the node, there is no configuration option given. I am sure I am overlooking something simple, but I can't seem to find it. Any hints are appreciated. Files are below:

anna-config.html

<script type="text/javascript">
    RED.nodes.registerType('anna-config',{
        category: 'config',
        color: '#af3',
        defaults: {
            host: {value:"",required:true},
            ip: {value:"", required: true},
            },
            
        	credentials:{
            	{username:"",required: true, type :"text"},
            	{password:"", required: true, type:"password"},
            },
            label : function() {
            return this.host+":"+this.ip;
            }
            
    });
</script>

<script type="text/html" data-template-name="anna-config">
    <div class="form-row">
        <label for="node-config-input-host"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-host" placeholder="smile">
    </div> 
    <div class="form-row">
        <label for="node-config-input-ip"><i class="fa fa-tag"></i> ip adres</label>
        <input type="text" id="node-config-input-ip" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-config-input-username"><i class="fa fa-tag"></i> smile</label>
        <input type="text" id="node-config-input-username" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-config-input-password"><i class="fa fa-tag"></i> password</label>
        <input type="text" id="node-config-input-password" placeholder="">
    </div>
</script>

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

anna-config.js

module.exports = function(RED){

function smile(config)	{
		RED.nodes.createNode(this,config);
		
			this.host = config.host;
			this.ip = config.ip; 

        }
		
	RED.nodes.registerType("anna-config", smile);
        }

anna.html

<script type="text/javascript">
    RED.nodes.registerType('anna',{
        category: 'Thermostaat',
        color: '#af3',
        defaults: {
            name: {value:""},
            smile: {value:"", type:"anna-config"},
        	},
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
		return this.smile||"anna";
        }
    });
</script>

<script type="text/html" data-template-name="anna">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="naam">
    </div> 
    
    <div class="form-row">
        <label for="node-input-smile"><i class="icon-tag"></i>Smile</label>
        <input type="text" id="node-input-smile" placeholder="">
    </div>

</script>

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

anna.js


module.exports = function(RED){

	function anna(config){
	
		RED.nodes.createNode(this,config);
		
		 this.smile = RED.nodes.getNode(config.smile);
		 	
		 	
		 
 		if (this.smile) {
            // Do something with:
            //  this.server.host
            //  this.server.port
        } else {
            // No config node configured
        }
    }
RED.nodes.registerType("anna", anna);
}

package.json

{
  "name": "node-red-contrib-anna",
  "version": "1.0.0",
  "description": "anna",

    "node-red" : {
          "nodes": {
            "anna": "anna.js",
            "anna-config": "anna-config.js"
          	}
    }
}

Hi @Richardmarobert!
Welcome to this forum!

There are a few things I can annotate - unsure if this is going to solve your issue:

A config node (usually) will not be exposed in the node-red/nodes object - as it is not supposed to be accessible via the palette.
If Node-RED isn't loading anna-config: Did you try to put both classes (anna & anna-config) in the same file?

It is enough to define <input id="node-input-smile">; no type necessary!

Hi @ralphwetzel , thank you!

Node-red is loading / showing the config node, in the configuration palette without any errors. The normal Anna-node is also showing, and I can put it on the canvas. But what I would expect is when I open the properties of the node, to have the configuration option available; to add the properties of the Anna-config. But this is not showing. The annoying part is, that I have been able to do it before.

Don't you have a syntax error in anna-config.html? The indentation doesn't match the {} nesting. Look in the browser console.

thanks @tve !

I probably have - and corrected it. It wasn't a critical error, though. Didn't change the behavior, unfortunately. Thank you for spotting it, though!

There's no "configuration palette" I'm aware of. Could you please provide a screenshot so we're talking about the same part of Node-RED?

Here as well a screenshot would be helpful...

If you're not posting the code verbatim then how do you expect us to help you??

"Hey, it's not working, this is approximately what my code looks like"??

@ralphwetzel sorry for being not clear. The configuration node is not appearing - see the screenshot. If I look at the palette, two nodes appear - one of them being the configuration node.

@tve I don't expect anything. Any help is welcome; like - what is the code verbatim ?

Posting the code you have verbatim (exactly). Not some approximation before you made some more changes and fixed some bugs...

It takes time to read your posts and read the code and look for what doesn't match. The least you can do is post the exact code and exact symptoms. Also uploading your node to github or similar is a good idea so someone can easily install it to see the issue...

@tve ah, thank you. It was -and now is - the exact code, tbh. I have deleted the additional } after you mentioned it and it didn't change the behavior. Pardon my ignorance.

Thanks for the suggestion to upload it to GitHub:

@Richardmarobert Have you noted the naming requirement for node-RED contrib nodes?
https://nodered.org/docs/creating-nodes/packaging#naming

This is your issue: Your syntax for the credentials object is wrong. You're missing the property identifiers:

        	credentials:{
            	p1: {username:"",required: true, type :"text"},
            	p2: {password:"", required: true, type:"password"},
            },

There's another typo in the file you posted on GitHub:
<s cript>

As a side note: VS Code was flagging this in the second I opened the file. You should get a hand on this or another IDE to support your development activities. Saves you a lot of trouble...

2 Likes

Final statement: anna-config will show up in the config side panel only after it's been configured at least once. That's why it doesn't appear where you're looking for it.
Once configured, it's there:

image

1 Like

@ralphwetzel The IDE suggestion did it. The credentials were within an additional set of brackets, too much as Visual Code pointed out quickly. Thanks, problem solved.

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