# Toolbar for actions in the flow editor

**URL:** <https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904>\
**Category:** Feature Requests\
**Created:** [11 September 2021 22:13 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904 "2021-09-11T22:13:23Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 September 2021 22:13 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/1 "2021-09-11T22:13:23Z")

</div>

Hi folks,

The list of available actions becomes bigger at every Node-RED release. Lots of very useful actions have been added meanwhile.

But I have to admit that I use the actions very infrequently ( 😌 ). My brain is not capable to remember shortcut keys, and my impatient nature just prevents me from searching through the action list ...

I would find it very useful if these actions would also become available via an icon in a toolbar. Something like this:

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

Which means that every action has its own icon, and can be visible in the toolbar or not.  
And of course it should be possible to hide the toolbar, if you want to have more space for your flows:

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

I have a hard time to believe that nobody has ever asked this feature before. But can't find it on Trello or on Discourse. Perhaps I have been searching for the wrong keywords...

I'm aware that it won't be easy to implement: e.g. some actions belong together (functionally), so they perhaps need to be displayed in the toolbar also together. And people will probably start customizing it. And so on...

But it would be a very useful feature for people like me. And it would be a next step to make Node-RED accessible for less technical skilled users...

Thanks !!!  
Bart

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 23:33 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/2 "2021-09-11T23:33:31Z")

</div>

I second this motion 😛 KB shortcuts are for _freaks'o'nature_ that have functional memory 😆... not poor little old me 🤪

**EDIT** Perhaps making it a customizable toolbar, by adding a checkbox in the below mentioned scrollable action items list, for displaying an icon as desired?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 September 2021 23:34 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/3 "2021-09-11T23:34:48Z")

</div>

Hi Bart.

I am just wanting to ask what this will actually achieve?

Connecting nodes is done by the mouse and direct input.

Looking at the icons in the example you show above...... I'm not seeing what they mean.

The one you have shown as _active_ (?) (the yellow arrow..... What does it do?  
To the right there is the icon with the 4 arrows...  
Then the hand icon. Which I guess is for scrolling. But that is done by MMB and dragging.  
Though: yes, that does catch me out sometimes....

Zooming... (I guess is the next one).  
That is already at the bottom right of the edit screen - isn't it?

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 23:37 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/4 "2021-09-11T23:37:25Z")

</div>

> [@Trying\_to\_learn](#):
>
> I am just wanting to ask what this will actually achieve?

Finding and clicking on an icon instead of a buried action (or heaven forbid, remembering the KB shortcut... if any) would be much like the connecting of nodes with a mouse... easier 😃

> [@Trying\_to\_learn](#):
>
> Looking at the icons in the example you show above...... I'm not seeing what they mean.

I think that was just a copy/pasted **example** from a word processor program or something.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 September 2021 23:39 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/5 "2021-09-11T23:39:04Z")

</div>

> [@Gunner](#):
>
> I think that was just a copy/pasted **example** from a word processor program or something.

Ok, yeah... But to me it doesn't help me to understand what is meant to be achieved.

Grouping can be ......

Examples of what is wanting to be done would be handy to help the case/cause.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 23:42 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/6 "2021-09-11T23:42:43Z")

</div>

> [@Trying\_to\_learn](#):
>
> But to me it doesn't help me to understand what is meant to be achieved.

> [@BartButenaers](#):
>
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fcada48328a35d11c4fe980a547f90dabe88b1bd.png)

Basically use a toolbar icon instead of clicking on **Hamburger** - **View** - **Action List** - then scrolling to find the wanted action... and finally clicking on said action (_hoping not to hit the wrong one because they are named similar at times... Ask me how I know_ 😳 )

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 September 2021 23:49 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/7 "2021-09-11T23:49:40Z")

</div>

Yikes!

I had never seen that at all!

(A whole new world has just appeared!) 😉

I get the confusion with key assignments though. (and even mouse controls for scrolling, etc)  
I use a few different programs and each - of course - are different.  
The number of times I trip up using the wrong mouse controls for scrolling (etc) is on going.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [11 September 2021 23:54 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/8 "2021-09-11T23:54:31Z")

</div>

I guess the only _problem_ is: finding appropriate icons.

Because the icon needs to be intuitive to what it is doing - or else it is hurting the idea behind it.  
If it isn't, you are only _moving_ the problem from: remembering keys to do things to: remembering what icon does what.

eg:  
Group selection:  
Two icons some to mind.  
(and using a paint programs icons this time)  
There is the `crop` icon  
of there is the `lasso` icon. (Probably better)

Sorry, but only that I am not using those things as much - maybe - as others, it isn't a _problem_ for me. But as I said: You really need intuitive icons for this, or you are just opening another can of worms.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [12 September 2021 00:22 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/9 "2021-09-12T00:22:14Z")

</div>

> [@Trying\_to\_learn](#):
>
> finding appropriate icons.

Gives the HMI devs something to do besides coding 😛

Some of the icons could use similar iconology as is already used elsewhere

Eg. I commonly use the action list to enable/disable selections of nodes (BTW, no KB shortcuts availed for that). The whole flow can already be enabled/disabled using the side bar, so those icons could be repurposed for selected nodes as well

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

> [@Trying\_to\_learn](#):
>
> If it isn't, you are only _moving_ the problem from: remembering keys to do things to: remembering what icon does what.

But unlike KB shortcuts, icons can have popups with words...

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 September 2021 06:22 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/10 "2021-09-12T06:22:02Z")

</div>

> [@Gunner](#):
>
> Perhaps making it a customizable toolbar, by adding a checkbox in the below mentioned scrollable action items list, for displaying an icon as desired?

Hi @Gunner,  
Indeed an action could have some properties in the :

- Boolean indicating whether the action is \ ***visible** in the toolbar or not.
- Text that represents the (e.g. FontAwesome) _ **icon name** _, which has a default value that might be overriden by the user.
- (Optionally) Text that represents the group name.

And those actions could be edited in the User Settings:

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

So perhaps instead of using a group name, another way of working would be to group them here somehow in the editableList (e.g. by adding spacers between groups...).

Or you can drag icons in the toolbar (similar to dragging tabsheets), which is the same as dragging them in this editableList.

I had not added this information in the original post, too avoid talking too quickly quickly about implementation details. Which is one of my other bad habbits 😌

> [@Trying\_to\_learn](#):
>
> I am just wanting to ask what this will actually achieve?

I spend quite some time in Node-RED, but only in developing nodes. Which means I have few time left to use the flow editor. And at those few moments in the flow editor, then I e.g. want to align nodes. And then I keep aligning them manually, just because there is not the toolbar that I'm used to work with ...  
I completely understand that the actions will be _ **very** _ usefull and fast for people that use the flow editor very often, but not for me ...

> [@Trying\_to\_learn](#):
>
> Looking at the icons in the example you show above...... I'm not seeing what they mean.

Oh no... I just googled the keywords _"flow editor toolbar"_ and did a copy/paste on a Node-RED screenshot. Because I am not going to spend my valuable free time in screenshots, when I don't know if my feature request will be accepted anyway. So I have no idea what those icons represent.

> [@Gunner](#):
>
> I think that was just a copy/pasted **example** from a word processor program or something.

Damn. Busted already 🤣

> [@Trying\_to\_learn](#):
>
> But to me it doesn't help me to understand what is meant to be achieved.

Well it is very simple. There are two kind of folks on this blue planet:

- The ones that can remember shortcuts. So they like shortcuts and they can use them very fast.
- The ones that can't remember shortcuts. So they dislike shortcuts and they love toolbars.

I assume you belong to the first group, and I certainly to the second group. I don't think there is any way that folks from one group can convince folks from another group. So I am not even going to try it...

The first group has their shortcuts already, so it would be very nice if they would openminded and allow the second group to have their belovely toolbar 🙂

> [@Trying\_to\_learn](#):
>
> I guess the only _problem_ is: finding appropriate icons

Totally true. A badly choosen icon will mislead us over and over again...

But I am going to wait a bit now, before starting to discuss about which toolbar icons to use. Would love to hear the opinion from the dark forces of Node-RED about the toolbar itself. Because the toolbar proposal might not be accepted, or there is no time to implement it in the the near future, or ...

---

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [12 September 2021 07:11 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/11 "2021-09-12T07:11:57Z")

</div>

> [@BartButenaers](#):
>
> Well it is very simple. There are two kind of folks on this blue planet:
> 
> - The ones that can remember shortcuts. So they like shortcuts and they can use them very fast.
> - The ones that can't remember shortcuts. So they dislike shortcuts and they love toolbars

I'd say there are three groups 😉

- the third group loves both worlds and will use shortcuts if it makes sense (for example `Ctrl-Shift D`) .

Hovering over an icon should not only show the description but also the linked shortcut. That way it will be easy to remember, after a while, hopefully.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 September 2021 07:19 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/12 "2021-09-12T07:19:06Z")

</div>

> [@rko](#):
>
> I'd say there are three groups

Yes you are absolutely right. No arguments agains that 😉

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [12 September 2021 21:21 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/13 "2021-09-12T21:21:48Z")

</div>

Bart,

I wasn't wanting to _attack_ your effort. I get that my view of NR is different to other people's, ad there are people who code rather than use.

I'm in the latter. You are in the former. In many ways I would like to enjoy both worlds.

I hope that clears up any misunderstanding. Again, it wasn't meant to be an attack. I was only asking.

I hope someone who is good with graphics reads this and offers to create the icons needed.  
(No, that isn't me sneaking in an offer. I am not good with graphics stuff. Though I may have a go if given the _specs_ for what is needed.)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 September 2021 21:48 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/14 "2021-09-12T21:48:33Z")

</div>

> [@Trying\_to\_learn](#):
>
> I wasn't wanting to _attack_ your effort.

Hey Andrew,  
Oh no. I absolutely had not the impression that you were attacking this proposal.  
I am already glad to get some feedback!  
There is nothing more worse than announcing something, and nobody responding to it...  
We can only get a decent proposal if we get to know how different kind of users would do it.

Moreover: every time that you append stuff to this discussion, the chances are getting bigger that the dark forces of Node-RED accidentally read my feature request. Without me having to mention them explicit.

So please keep going 🤣

---

<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:** [13 September 2021 07:32 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/15 "2021-09-13T07:32:48Z")

</div>

@BartButenaers I've said before, I do keep a closer eye on this category than others. There is no need to goad a response - particular when its the weekend and I'm not sat glued to the forum.

My honest answer is I'm not sure whether a toolbar is a good fit or not. I wary of over-cluttering the UI, and the toolbar would be a finite amount of space for an ever growing list of actions.

Making it customisable could be an option, but I'm also wary of giving the user more choices to deal with.

Putting aside the technical details of how it would work (such as choices of icons, whether it should be customisable etc etc etc), the issue you state is about keeping track of what actions are available.

I think it is true to say the list of actions will always outgrow any screen real-estate, but there are things we can do to help.

In the 2.1 release, the main menu has been extended to have both an 'Edit' menu - with more of the relevant actions listed:

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

As well as a new 'Arrange' menu that (_spoilers_) exposes a bunch of the new actions coming in the release:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90467b97cd8e3b6dab441e2879c7cddf1dbf2eb5.png)

You can also see in those screenshots that we now list keyboard shortcuts on the menu.

(You can see these things being developed over the last few weekly live streams I do - [Twitch](https://twitch.tv/knolleary))

I appreciate this isn't the same convenience as having a button directly in the UI for your favourite action, but it will help with general discoverability of commonly useful actions.

The other piece I wanted to explore was the toolbar we already have at the bottom of the workspace - where the zoom buttons are. That whole strip is already a pluggable component that can have extra items added via an API. For example, if you have nrlint installed, you get a summary of the lint results with a button to open the lint sidebar:

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

My todo list includes adding Project status to that footer - to give more convenient access to git status and things like that.

I don't see that becoming a full-blown toolbar in the way you describe, but there could be a way to expose actions down there.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 September 2021 17:52 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/16 "2021-09-13T17:52:47Z")

</div>

> [@knolleary](#):
>
> I've said before, I do keep a closer eye on this category than others. There is no need to goad a response - particular when its the weekend and I'm not sat glued to the forum

I absolutely don't expect anybody to be here fulltime on the forum, so try to avoid mentioning people. Was only joking with the guys...

> [@knolleary](#):
>
> I wary of over-cluttering the UI, and the toolbar would be a finite amount of space for an ever growing list of actions.

Indeed most people would like to have as much space as possible for their flows, which is why it should be able to hide it.

> [@knolleary](#):
>
> In the 2.1 release, the main menu has been extended to have both an 'Edit' menu - with more of the relevant actions listed:

Ah that looks very interesting indeed!!!  
Such a logical structure of the actions absolutely helps, instead of having to search through a long flat list of actions.

> [@knolleary](#):
>
> but it will help with general discoverability of commonly useful actions.

Yes indeed, that is a big improvement to find an action quickly. That will certainly be inviting enough to start using actions more and more...

> [@knolleary](#):
>
> Making it customisable could be an option, but I'm also wary of giving the user more choices to deal with.

Did you have ever some bad experiences with this kind of customizations? I can't imagine a real life case at the moment where things could go wrong with a toolbar, but I assume some users can be very inventive and (ab)using it in a way that it isn't designed for ...

Thanks for your extensive feedback !!

---

<div class="post-metadata">

**Author:** ![phedders](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/phedders/32/33548_2.png) [@phedders](https://discourse.nodered.org/u/phedders)\
**Post date:** [15 September 2021 11:18 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/17 "2021-09-15T11:18:58Z")

</div>

Please don't turn it into a monstrosity like the MS ribbon - where you spend half your life puzzling over what all the stupid hieroglyphs mean and laboriously hovering over each in turn to be able to read the words. A few select well chosen and clear icons can be useful - But the ribbon is a mess where a well ordered hierarchical menu would be better - oh like MS used to use...

(Yes there are a few 'office' warriors who know all the glyphs and the ribbon does work for them - I guess for the developers it is the same. But for most people it is a nuisance.)

---

<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:** [14 November 2021 11:19 UTC](https://discourse.nodered.org/t/toolbar-for-actions-in-the-flow-editor/50904/18 "2021-11-14T11:19:47Z")

</div>

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