# Add a custom button to node config UI and onclick() for it

**URL:** <https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394>\
**Category:** Developing Nodes\
**Created:** [19 October 2021 06:27 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394 "2021-10-19T06:27:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kakyoism](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kakyoism/32/46283_2.png) [@kakyoism](https://discourse.nodered.org/u/kakyoism)\
**Post date:** [19 October 2021 06:27 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394/1 "2021-10-19T06:27:25Z")

</div>

I'm trying to add a button to my custom node's configuration UI.  
So in `node.html` I did this

```auto
<script type="text/html" data-template-name="my_node">
    <div class="form-tips"><i class="fa fa-hand-o-down"></i> Press the button to unlock the node backend</div>
    <div class="form-row">
        <label for="node-input-unlock" style="width:20%">
            <button id="node-input-unlock" onclick="unlock(this)">Unlock</button>
        </label>
    </div>
</script>

<script type="text/javascript" src='./config.js'></script>

```

Then in my JS code

```auto
let alert = require('alert');

function unlock(btn) {
	alert("message");
}

```

I've installed the dependency `alert` in my `node_modules`, and restarted the server and client.

But when clicking on the button, nothing happens while I expect to see a pop-up messagebox.

What am I missing?

---

<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:** [19 October 2021 06:49 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394/2 "2021-10-19T06:49:23Z")

</div>

Without additional build steps you cannot use `require` in client side JavaScript.

But as `alert` is a standard built-in function in all browsers, there is no need to require anything.

You should also be checking the browser JavaScript console for errors.

---

<div class="post-metadata">

**Author:** ![kakyoism](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kakyoism/32/46283_2.png) [@kakyoism](https://discourse.nodered.org/u/kakyoism)\
**Post date:** [19 October 2021 07:02 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394/3 "2021-10-19T07:02:00Z")

</div>

Thanks. Just removed alert and used `console.log` instead.

It seems that my external script is not found. Errors in browser read:

```auto
vendor.js:2 GET http://127.0.0.1:1880/config.js 404 (Not Found)

```

```auto
(index):1 Uncaught ReferenceError: unlock is not defined
    at HTMLButtonElement.onclick ((index):1)

```

I saved `config.js` under the same custom node folder along with `node.html` and `node.js` of my node.

The inlined-JS in HTML works:

```auto
<script>
function unlock(btn) {
	console.log('hello');
}
</script>

```

Where should I put my supporting scripts file?  
I prefer linking HTML to external scripts because I found that VS Code breakpoints don't work with scripts inside the HTML.

---

<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:** [19 October 2021 07:30 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394/4 "2021-10-19T07:30:45Z")

</div>

Your node's html file should already have a JavaScript section with the call to `RED.nodes.registerType(...)` in.

So most nodes will place additional javascript they want in there as well:

```auto
<script type="text/html" data-template-name="my_node">
    <div class="form-tips"><i class="fa fa-hand-o-down"></i> Press the button to unlock the node backend</div>
    <div class="form-row">
        <label for="node-input-unlock" style="width:20%">
            <button id="node-input-unlock" onclick="unlock(this)">Unlock</button>
        </label>
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('node-type',{
        // node definition
    });

    function unlock(btn) {
        console.log('hello');
    }
</script>

```

The problem here is you are now defining `unlock` on the global namespace - that will clash with all of the other javascript loaded in the editor.

There are two things to do to avoid this:

1. wrap your code in a self-executing function. This prevents it from leaking into the global namespace.
2. Setup the click handling in your node's `oneditprepare` function

```auto
<script type="text/html" data-template-name="my_node">
    <div class="form-tips"><i class="fa fa-hand-o-down"></i> Press the button to unlock the node backend</div>
    <div class="form-row">
        <label for="node-input-unlock" style="width:20%">
            <!-- removed the onclick handler -->
            <button id="node-input-unlock">Unlock</button>
        </label>
    </div>
</script>

<script type="text/javascript">

(function() {

  RED.nodes.registerType('node-type',{
    // node definition
    oneditprepare: function() {
      $("#node-input-unlock").on("click", function(evt) {
        // the button has been clicked
      });
    }
  });

})();
</script>

```

As for loading extra javascript files, please read this section of the docs: [Loading extra resources in the editor : Node-RED](https://nodered.org/docs/creating-nodes/resources) - it explains where to put those files in your module and how to load them in the editor.

---

<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:** [2 November 2021 07:30 UTC](https://discourse.nodered.org/t/add-a-custom-button-to-node-config-ui-and-onclick-for-it/52394/5 "2021-11-02T07:30:46Z")

</div>

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