How to create config node in node-red

natamongkol · 31 March 2023 06:55

I try create config node like this but it's show only text box no config, I want projectid to be a config node, I tried following many nodes with config node but it didn't work for me, How to fix it?

graphql_query.js

module.exports = function(RED) {
    function netpie_graphql_query(nodeConfig) {
        RED.nodes.createNode(this,nodeConfig);
        var node = this;
        node.on('input', function(msg) {
            var gqlquery = nodeConfig.gqlquery;

            nodeConfig.projectid = RED.nodes.getNode(nodeConfig.projectid).projectid;

            const axios = require('axios');
            let data = JSON.stringify({
            query: gqlquery,
            variables: {}
            });

            let axiosConfig = {
            method: 'post',
            maxBodyLength: Infinity,
            url: 'http://gqlv2.aaaaa.io/',
            headers: { 
                'Authorization': 'bearer '+auth.token, 
                'Content-Type': 'application/json'
            },
            data : data
            };

            axios.request(axiosConfig)
            .then((response) => {
            data = (JSON.stringify(response.data));
            msg.payload = data;
            node.send(msg);
            })
            .catch((error) => {
            //console.log(error);
            this.error("Request failed with status code 400, please check your schema");
            });
        });
    }
    RED.nodes.registerType("netpie_graphql_query",netpie_graphql_query);
}

graphql_query.html

    RED.nodes.registerType('netpie_graphql_query',{
        category: 'graphql',
        color:'#00adff',
        defaults:{

            projectid:{value:"", type:"projectid"},

            name:{value:""},
            gqlquery:{value:""}

        },
        inputs:1,
        outputs:1,
        icon:"template.svg",
        label:function(){
            return this.name||"netpie graphql";
        },
        oneditprepare: function() {
            this.editor = RED.editor.createEditor({
            id: 'gqlquery-message-editor',
            mode: 'ace/mode/text',
            value: $("#node-input-gqlquery").val()
        });
        },
        oneditsave: function() {
            $("#node-input-gqlquery").val(this.editor.getValue());
            this.editor.destroy();
            delete this.editor;
        },
        oneditcancel: function() {
            this.editor.destroy();
            delete this.editor;
        }
            
    });
    </script>

    <script type="text/html" data-template-name="netpie_graphql_query">
        <div class="form-row">
            <label for="node-input-name"><i class="fa fa-tag"></i>Name</label>
            <input type = "text" id="node-input-name" placeholder="Name">
        </div>

        <div class="form-row">
            <label for="node-input-projectid"><i class="fa fa-tag"></i>Project ID</label>
            <input type = "text" id="node-input-projectid">
        </div>

        <div class="form-row">
            <label for="node-input-gqlquery"><i class="fa fa-cog"></i> <span>Query</span></label>
            <div style="height: 250px;" class="node-text-editor" id="gqlquery-message-editor"></div>
            <input type="hidden" id="node-input-gqlquery">
        </div>

    </script>

    <script type="text/html" data-help-name="netpie_graphql_query">
        <p>netpie graphql query</p>
    </script>

graphql_query_config.js

    function projectid(nodeConfig) {
        RED.nodes.createNode(this,nodeConfig);
        this.name = nodeConfig.name;
        this.projectid = nodeConfig.projectid;
    }
    RED.nodes.registerType("projectid",projectid);
}

graphql_query_config.html

    RED.nodes.registerType('projectid',{
        category: 'config',
        defaults: {
            name: {value:""},
            projectid: {value:""}
        },
        label: function() {
            return this.name || this.("projectid");
        }
    });
</script>

<script type="text/html" data-template-name="projectid">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-projectid"><i class="fa fa-bookmark"></i> projectid</label>
        <input type="text" id="node-config-input-projectid">
    </div>
</script>

but projectid is not config node

marcus-j-davies · 31 March 2023 08:05

Hi @natamongkol - Welcome to the forums.

I can't help notice this.

 return this.name || this.("projectid");

Should it be

 return this.name || this.projectid

Its to early in the morning for me to know if this.("projectid") is valid syntax.

Also, I don't think its invalid to do, but be careful naming config entries to a name that represents its own type name

RED.nodes.registerType('projectid',{})
projectid: {value:""}

I cant see anything else that would be a problem - but again its early

natamongkol · 31 March 2023 08:10

now i fix it but not working

return this.name || this.projectid;

marcus-j-davies · 31 March 2023 08:17

I would rename the config entry in your config node also.

From

 defaults: {
   name: {value:""},
   projectid: {value:""}
},

To

 defaults: {
   name: {value:""},
   id: {value:""}
},

If you think about the module its self.

module.exports = function (RED) {

  function projectid(nodeConfig) {
          RED.nodes.createNode(this,nodeConfig);
          this.name = nodeConfig.name;
  
           /* This could be causing a problem, as it maybe re-evaluating its self  */
          this.projectid = nodeConfig.projectid;
      }
      RED.nodes.registerType("projectid",projectid);
}

again, I'm not sure, it just sticks out at me, if trying it, ensure to rename references to it also

natamongkol · 31 March 2023 08:29

i try it but not work I've been stuck with this problem for 2 days now. I don't know how to fix this problem. I tried another node example using config node and tried to follow but it didn't work.

marcus-j-davies · 31 March 2023 08:40

Anything in the start up logs that might lend a clue, can you paste them here?
assuming you are using a ~recent Node RED version?

unless my eyes are giving up on me - other than the points I made, I cant see anything else.

knolleary · 31 March 2023 08:43

Noooo! id is a reserved property name.

marcus-j-davies · 31 March 2023 08:49

Uuhhh

id was probably not the best choice in my example

Completely forgot about that gem!

knolleary · 31 March 2023 08:55

I have just copied all of the provided files to my local node-red instance and:

fixed the return this.name || this.("projectid"); line to be this.projectid
added the missing <script> tag at the start of both HTML files
added the missing module.exports = function(RED) { line at the start of graphql_query_config.js

(The last two I assume were copy/paste errors when sharing the code rather than actually missing in your files)

With that done, it works as expected:

What version of Node-RED are you using? Are you fully restarting Node-RED (the runtime, not just reloading the editor) after making changes to the files?

One other recommendation is given you are defining one type as netpie_graphql_query I would not use projectid as the type for your config node - it is too generic. I suggest changing it to netpie_graphql_projectid or something a bit more specific.

natamongkol · 31 March 2023 09:09

Node-RED version: v3.0.2, I restart node-red every time I modify the node file, Can you please check if all this is correct?

const auth = require('../../../../dashboard/module/auth');
module.exports = function(RED) {
    function netpie_graphql_query(nodeConfig) {
        RED.nodes.createNode(this,nodeConfig);
        var node = this;
        node.on('input', function(msg) {
            var gqlquery = nodeConfig.gqlquery;

            nodeConfig.projectid = RED.nodes.getNode(nodeConfig.projectid).projectid;

            const axios = require('axios');
            let data = JSON.stringify({
            query: gqlquery,
            variables: {}
            });

            let axiosConfig = {
            method: 'post',
            maxBodyLength: Infinity,
            url: 'http://gqlv2.netpie.io/',
            headers: { 
                'Authorization': 'bearer '+auth.token, 
                'Content-Type': 'application/json'
            },
            data : data
            };

            axios.request(axiosConfig)
            .then((response) => {
            data = (JSON.stringify(response.data));
            msg.payload = data;
            node.send(msg);
            console.log(this.projectid);
            })
            .catch((error) => {
            //console.log(error);
            this.error("Request failed with status code 400, please check your schema");
            });
        });
    }
    RED.nodes.registerType("netpie_graphql_query",netpie_graphql_query);
}

<script type = "text/javascript">
    RED.nodes.registerType('netpie_graphql_query',{
        category: 'graphql',
        color:'#00adff',
        defaults:{

            projectid:{value:"", type:"projectid"},

            name:{value:""},
            gqlquery:{value:""}

        },
        inputs:1,
        outputs:1,
        icon:"template.svg",
        label:function(){
            return this.name||"netpie graphql";
        },
        oneditprepare: function() {
            this.editor = RED.editor.createEditor({
            id: 'gqlquery-message-editor',
            mode: 'ace/mode/text',
            value: $("#node-input-gqlquery").val()
        });
        },
        oneditsave: function() {
            $("#node-input-gqlquery").val(this.editor.getValue());
            this.editor.destroy();
            delete this.editor;
        },
        oneditcancel: function() {
            this.editor.destroy();
            delete this.editor;
        }
            
    });
    </script>

    <script type="text/html" data-template-name="netpie_graphql_query">
        <div class="form-row">
            <label for="node-input-name"><i class="fa fa-tag"></i>Name</label>
            <input type = "text" id="node-input-name" placeholder="Name">
        </div>

        <div class="form-row">
            <label for="node-input-projectid"><i class="fa fa-tag"></i>Project ID</label>
            <input type = "text" id="node-input-projectid">
        </div>

        <div class="form-row">
            <label for="node-input-gqlquery"><i class="fa fa-cog"></i> <span>Query</span></label>
            <div style="height: 250px;" class="node-text-editor" id="gqlquery-message-editor"></div>
            <input type="hidden" id="node-input-gqlquery">
        </div>

    </script>

    <script type="text/html" data-help-name="netpie_graphql_query">
        <p>netpie graphql query</p>
    </script>

module.exports = function(RED) {
    function projectid(nodeConfig) {
        RED.nodes.createNode(this,nodeConfig);
        this.name = nodeConfig.name;
        this.projectid = nodeConfig.projectid;
    }
    RED.nodes.registerType("projectid",projectid);
}

<script type="text/javascript">
    RED.nodes.registerType('projectid',{
        category: 'config',
        defaults: {
            name: {value:""},
            projectid: {value:""}
        },
        label: function() {
            return this.projectid
        }
    });
</script>

<script type="text/html" data-template-name="projectid">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-projectid"><i class="fa fa-bookmark"></i> projectid</label>
        <input type="text" id="node-config-input-projectid">
    </div>
</script>

i try this but not work

knolleary · 31 March 2023 09:17

I had to strip out the require and the input message handling code in your .js file, but with rest of it as you provide it works:

natamongkol · 31 March 2023 09:17

i don't know why don't work for me but work for you

knolleary · 31 March 2023 09:26

In the browser's javascript console, can you run:

RED.nodes.getType('projectid')

and share the output?

natamongkol · 31 March 2023 09:32

knolleary · 31 March 2023 09:35

Have you run that in a window with the Node-RED editor open?

natamongkol · 31 March 2023 09:36

yes i open node-red tab and run RED.nodes.getType('projectid')

knolleary · 31 March 2023 09:36

Then I really don't understand... if you were in a window with the Node-RED editor loaded, then RED would definitely be defined.

natamongkol · 31 March 2023 09:38

Should I also write the package.json file?

knolleary · 31 March 2023 09:40

Please show me a full screenshot of the browser window, with the node-red editor open, and the console with that error in

natamongkol · 31 March 2023 09:46

it's node-red in Flowengine

Topic		Replies	Views
Custom config node General	2	579	3 August 2020
Node Development config-node missing create new button and dropdown General	5	483	7 July 2020
Stuck using config node multiple times Developing Nodes	4	448	13 March 2022
Trying to add a configuration node within a configuration node Developing Nodes	3	146	24 February 2024
Preset Configuration Nodes? General	0	329	31 January 2019

How to create config node in node-red

Related Topics