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

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.

I dont think it is "officially" supported Julian.

Boo hoo! :cry:

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

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'));
}
2 Likes

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

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.

I fear you will like my thoughts even less then :frowning:

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

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:

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

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.

3 Likes

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

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

Nice:

1 Like

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 :slight_smile: v6.1.0 is already in dev and this will be part of it. As always, people can follow along on GitHub.

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

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

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