# Is it possible to add a new button to a custom node's Editor panel?

**URL:** <https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423>\
**Category:** Developing Nodes\
**Created:** [19 December 2022 14:47 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423 "2022-12-19T14:47:27Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 December 2022 14:47 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/1 "2022-12-19T14:47:27Z")

</div>

As the title suggests - can I add a custom button in the top button row of a custom node's Edit panel? As in the red area shown here.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0705363b0d044111340c50832574e25c9a31f7e4.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 December 2022 16:01 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/2 "2022-12-19T16:01:47Z")

</div>

I dont think it is "officially" supported Julian.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 December 2022 16:55 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/3 "2022-12-19T16:55:27Z")

</div>

Boo hoo! 😢

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [19 December 2022 23:16 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/4 "2022-12-19T23:16:04Z")

</div>

> [@TotallyInformation](#):
>
> can I

Yes, you can. Should you? Also, yes.

I added a help button to the bottom right corner of my nodes' edit panel to quickly open the sidebar help tab and nobody seems to have noticed or complained. It has worked since node-red v1 and still works in the current version.

modifying the code a little bit, I was able to place it just to the right of the delete button

 ![Screen Shot 2022-12-19 at 5.13.33 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/77cc48dbbb98930b41eb4e6621df8d28f9feadd5.png)

```auto
oneditprepare: function () {
$('<button type="button" class="ui-button ui-corner-all ui-widget leftButton"><i class="fa fa-book"></i> help</button>')
        .on('click', () => {
          RED.sidebar.help.show(this.type);
        })
        .appendTo($('div.red-ui-tray-toolbar'));
}

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 December 2022 23:29 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/5 "2022-12-19T23:29:14Z")

</div>

Thanks Kevin, I'll give it a go! Looks good.

---

<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 December 2022 23:45 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/6 "2022-12-19T23:45:39Z")

</div>

> [@kevinGodell](#):
>
> added a help button to the bottom right corner of my nodes' edit panel

I've been meaning to add such a button to the edit dialog for all nodes. I'll see if it gets remembered for 3.1.

I'm not a fan of nodes doing their own thing leading to an inconsistent user experience.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 December 2022 23:55 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/7 "2022-12-19T23:55:36Z")

</div>

I fear you will like my thoughts even less then ☹

I have a button to launch the uibuilder web page but it can be annoying to only have it on the first tab.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbce5b3e3a32349d85b81fb00bad161f774956a1.png)

So having a button that appears on all of the tabs would be super helpful. But there is already a lot of whitespace, especially on the files tab:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb20b490809d18c75ed131e95b10e00ffe8eb691.png)

Maybe it could be added next to the top tab though?

---

<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 December 2022 23:57 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/8 "2022-12-19T23:57:39Z")

</div>

To clarify, I'm mean I'm not a fan of nodes adding ux that would be reasonable to expect every node to do.

If a node wants to add a button that is very specific to that node type (such as uibuilder's 'open home'), then that's less problematic in my view.

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [20 December 2022 00:15 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/9 "2022-12-20T00:15:10Z")

</div>

> [@knolleary](#):
>
> I'm not a fan

I'm not a fan of people who aren't fans of things that I am a fan of. 🤣

All joking aside, I made the help buttons for myself because I couldn't remember how to find the help menu. I really had a hard time in the beginning because so many things felt unintuitive. But I learned it and adapted and now like all developers, I store my numbers and booleans as strings. \<- that took my head a long time to get around.

But, I like to tinker and see what things are possible, so, expect more things from me that bend the rules. 😊

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 December 2022 01:35 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/10 "2022-12-20T01:35:22Z")

</div>

Nice:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/7966d1ac10fb6114efdc4d6bc75e5eb778ed9739.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 December 2022 10:21 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/11 "2022-12-20T10:21:31Z")

</div>

so if you just add a node - presumably the Open button doesn't work as it's not actually deployed yet - so should be greyed out etc... (as-in maybe ok for docs - but maybe not best idea for open)...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 December 2022 12:11 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/12 "2022-12-20T12:11:59Z")

</div>

> [@dceejay](#):
>
> so if you just add a node - presumably the Open button doesn't work as it's not actually deployed yet - so should be greyed out etc... (as-in maybe ok for docs - but maybe not best idea for open)..

Thanks Dave, you are, of course correct and I do do that for the main buttons - added to the to-do list 🙂 v6.1.0 is already in dev and this will be part of it. As always, people can follow along on GitHub.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 December 2022 13:10 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/13 "2022-12-20T13:10:47Z")

</div>

... and presumably even if deployed - if you then edit anything in the panel but don't deploy the open button will take you to the "old" version...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 December 2022 14:07 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/14 "2022-12-20T14:07:19Z")

</div>

😉 already ahead of you on that one - and believe you me, working out the logic caused a few new frown lines to appear! But it was done quite a while back for the other buttons and inputs. So extending for the new button is easy.

Basically, if it is a new node (or newly copied/pasted or imported) or if you change the URL, you are prevented from doing anything else until you have deployed so that the folder structure and all the pointers can catch up. This is also why, if you copy/paste or import a uibuilder node, it will blank out the url so making the validation instantly fail.

---

<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:** [18 February 2023 14:07 UTC](https://discourse.nodered.org/t/is-it-possible-to-add-a-new-button-to-a-custom-nodes-editor-panel/72423/15 "2023-02-18T14:07:45Z")

</div>

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