# Sidebar for flows instead of tabs

**URL:** <https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310>\
**Category:** Feature Requests\
**Created:** [9 March 2021 07:14 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310 "2021-03-09T07:14:31Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeroenst](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeroenst/32/22682_2.png) [@jeroenst](https://discourse.nodered.org/u/jeroenst)\
**Post date:** [9 March 2021 07:14 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/1 "2021-03-09T07:14:31Z")

</div>

I have a lot of flows in Nodered which is not handy to work with.

When I have to select a flow I have to horizontal scroll the tabs for ages to find the flow I want to edit.

Of course there is a list flows button, but that only shows a few flows and so I have to remember the name of the tab to search it, which I can't.

I would like an option to show all the flows in an additional vertical sidebar like the nodes.

Because of vertical presentation more tabs can be displayed on a screen and scrolling is easier because of a vertical scroll bar.

Maybe it's an idea to create 2 (or 3) submenus in the node list, nodes and flows (and subflows), which are shown as buttons at the top of the node list?

I.E.: In an IDE like Visual Studio, all the files (like tabs in Nodered) are shown on the left in a tree which works more easily than the tabs in Arduino IDE. Also there a buttons to the left side of the filetree to select the function of the sidebar (explorer, search etc.) so maybe it's an idea to take this as an example?

My current Nodered version is: 1.2.9

 ![Screenshot from 2021-03-09 08-13-51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/6697732cdd8d764383b76d38617e7d6f3ae2cf6e.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:** [9 March 2021 07:22 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/2 "2021-03-09T07:22:12Z")

</div>

It's not likely to happen any time soon but you can do something via CSS...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/0150f890463467c95ca63fd725e6321cd18139a0.png)

> [@Feature Suggestion: Flow Tabs on left side. remove/hide/popup nodelist](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/3):
>
> That blocks the debug window or any other panel so i do not think it is a solution for me. For now i created a custom stylesheet and used chrome extension stylish to apply it it is just a first draft /\* Apply using stylish chrome extension \*/ .scroll-container::-webkit-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } #red-ui-workspace \> div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable \> div.red-ui-tab-button.red-ui-tab-scroll.red-ui-tab-scro…

---

<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:** [9 March 2021 07:43 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/3 "2021-03-09T07:43:43Z")

</div>

> [@jeroenst](#):
>
> E.: In an IDE like Visual Studio, all the files (like tabs in Nodered) are shown on the left in a tree which works more easily than the tabs in Arduino IDE. Also there a buttons to the left side of the filetree to select the function of the sidebar (explorer, search etc.) so maybe it's an idea to take this as an example?

What about the tree view in the info sidebar that lists all tabs and nodes, with buttons next to them to show them in the workspace and lets you quickly search and find anything in your flows? Is the only issue the fact it's in the right not the left?

---

<div class="post-metadata">

**Author:** ![jeroenst](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeroenst/32/22682_2.png) [@jeroenst](https://discourse.nodered.org/u/jeroenst)\
**Post date:** [12 March 2021 06:30 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/4 "2021-03-12T06:30:52Z")

</div>

That is indeed something that helps me out.

But still the Visual Studio layout is easier to use for me.

Files/flows on the left feels more natural, I hope the Visual Code layout can be an inspiration for the future.

Anyway thanks for helping out!

---

<div class="post-metadata">

**Author:** ![JoeWiseman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joewiseman/32/37679_2.png) [@JoeWiseman](https://discourse.nodered.org/u/JoeWiseman)\
**Post date:** [15 April 2021 15:55 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/5 "2021-04-15T15:55:18Z")

</div>

> [@Feature Suggestion: Flow Tabs on left side. remove/hide/popup nodelist](https://discourse.nodered.org/t/feature-suggestion-flow-tabs-on-left-side-remove-hide-popup-nodelist/36371/3):
>
> For now i created a custom stylesheet and used chrome extension stylish to apply it it is just a first draft /\* Apply using stylish chrome extension \*/ .scroll-container::-webkit-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } #red-ui-workspace \> div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable \> div.red-ui-tab-button.red-ui-tab-scroll.red-ui-tab-scro…

I'm running Redmatic on a CCU3 from homematic, also working with a lot of flows.  
As I understand things the Tree-View has to be installed manually be the user?! I think it would be a good thing to have an built in alternative / addon to the given list on top of the current flow.

Maybe it is also possible to add a second or a third line in existing the flowlist?

Regards  
Joe

---

<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:** [15 April 2021 15:57 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/6 "2021-04-15T15:57:02Z")

</div>

> [@JoeWiseman](#):
>
> As I understand things the Tree-View has to be installed manually be the user?!

No, the Outline view in the Info sidebar has been there since Node-RED 1.1 - [Version 1.1 released : Node-RED](https://nodered.org/blog/2020/06/30/version-1-1-released#information-sidebar-redesign)

---

<div class="post-metadata">

**Author:** ![JoeWiseman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joewiseman/32/37679_2.png) [@JoeWiseman](https://discourse.nodered.org/u/JoeWiseman)\
**Post date:** [15 April 2021 16:06 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/7 "2021-04-15T16:06:23Z")

</div>

Thanks, sometimes I don't see the trees because of the wood!  
But ... when using this I can't use any other tab like debug or variables ....  
... would be good to be able to show more than one of those tabs.  
As I'm working with two monitors there would be enough space in the horizontal direction 😉

---

<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:** [15 April 2021 17:33 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/8 "2021-04-15T17:33:40Z")

</div>

For the debug at least you can detach it into a separate window  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/36deda02902be815ac1e178ba497a1c68c058e81.png)

---

<div class="post-metadata">

**Author:** ![svefro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/svefro/32/4306_2.png) [@svefro](https://discourse.nodered.org/u/svefro)\
**Post date:** [15 April 2021 21:12 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/9 "2021-04-15T21:12:10Z")

</div>

That little debug pop-out was nice. 🙂 I did not see that before.  
But the point remains.  
Better to have the tabs visible at all times regardless of what is going on on the right sidebar.

Have all you naysayers (no offence) tried the custom stylesheet with the tabs on the left side?  
I can't go back to tabs on top now.

---

<div class="post-metadata">

**Author:** ![JoeWiseman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joewiseman/32/37679_2.png) [@JoeWiseman](https://discourse.nodered.org/u/JoeWiseman)\
**Post date:** [16 April 2021 09:36 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/10 "2021-04-16T09:36:32Z")

</div>

👍🏻  
That's a big step into the right direction!!  
Thanks a lot!!!

---

<div class="post-metadata">

**Author:** ![2WeltenChris](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/2weltenchris/32/12292_2.png) [@2WeltenChris](https://discourse.nodered.org/u/2WeltenChris)\
**Post date:** [16 April 2021 11:18 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/11 "2021-04-16T11:18:16Z")

</div>

The tree view was a great enhancement in version 1.1. I wondered though if it would be possible to make tabs closable (like for subflows). That would allow to have only those tabs open that one currently works on and the others could be opened from the sidebar if needed.

---

<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:** [16 April 2021 11:58 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/12 "2021-04-16T11:58:49Z")

</div>

> [@2WeltenChris](#):
>
> I wondered though if it would be possible to make tabs closable (like for subflows).

Yes, that is something to be considered. There's another topic on the forum that's been brought back to life by some recent cross-posting that covers that.

---

<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:** [15 June 2021 11:59 UTC](https://discourse.nodered.org/t/sidebar-for-flows-instead-of-tabs/42310/13 "2021-06-15T11:59:06Z")

</div>

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