# A suggestion to the layout of the web design part

**URL:** <https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681>\
**Category:** Feature Requests\
**Created:** [7 February 2019 04:04 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681 "2019-02-07T04:04:12Z")\
**Posts on this page:** 16\
**Page:** 1

<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:** [7 February 2019 04:04 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/1 "2019-02-07T04:04:12Z")

</div>

In light of all my recent problems and seeing a new NR is soon to be released, I thought about the layout.

At first I didn't get the idea of having different "tabs" on a machine. But then, when my flows became _monsters_ I appreciated the separation of different parts of the flows/code.

(See attached for a better explanation of what I mean.)

Although maybe not often used, they can be a pain if/when you have a lot of them.  
Scrolling left/right.  
A drop down list would be a nice alternative.  
And/or maybe a name search, so if you are looking for a tab of name _x_, you can search for it rather than having to scroll - for the existing scenario.

Only a suggestion.

 ![Screenshot%20from%202019-02-07%2015-00-49](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/71e47f329fa83218acededbb54ace95e676f52f1.png)

---

<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:** [7 February 2019 08:13 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/2 "2019-02-07T08:13:26Z")

</div>

Hi @Trying_to_learn

this has come up a few times - you are right that navigating the tabs can get tricky when you have lots.

A few ideas have been suggested - very similar to yours.

One tip for what you can already do today - the search dialog (Ctrl-F or 'Search flows' from the drop-down menu) does include Flows in its search results. So you can use that to search for a tab by name and when you select it, it takes you there.

Finding some sensible way to surface that in the UI more readily would help.

---

<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:** [7 February 2019 09:58 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/3 "2019-02-07T09:58:15Z")

</div>

Forgiving my pathetic effort at designing the layout.  
I am not that good with the paint program.

This is an effort/suggestion.  
Granted I am missing the "add new tab", but I hope you get the idea.

 ![Screenshot%20from%202019-02-07%2020-52-55](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2fd87c51a2120b2a4323a7d06bdadc80c857e891.png)

---

<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:** [7 February 2019 20:18 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/4 "2019-02-07T20:18:03Z")

</div>

> [@knolleary](#):
>
> One tip for what you can already do today - the search dialog (Ctrl-F or 'Search flows' from the drop-down menu) does include Flows in its search results. So you can use that to search for a tab by name and when you select it, it takes you there.

Just on that. Granted I don't often use the `search` function.

Just now I needed to find a tab called _home_, so I did what you suggested.  
(Sorry this is going to be a few screen pictures to help with what is happening.)

So: I want to go to a tab called `home`.

 ![Screenshot%20from%202019-02-08%2007-13-11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6dc8517a12c5556a4424fe1dca9f8632c431c338.png) ![Screenshot%20from%202019-02-08%2007-13-21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f59d1cf9dcd3a4a67269f158beff5a08643d5140.png)

I enter _home_ (forgetting the multiple results. that's beyond this I believe.)  
Press enter and I am present with Picture 2.

That doesn't really match with: _and when you select it, it takes you there._

So, am I missing something?  
NR version 0.19.4  
(Nearly forgot that)

---

<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:** [7 February 2019 20:22 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/5 "2019-02-07T20:22:02Z")

</div>

You have selected a node called `home` but of type `ui_tab`. That is a dashboard config node; when you select it, it has revealed that node in the config node sidebar.

You need to find a node of type `tab` - not `ui_tab`:

![Local_Node-RED](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5b5409ab7d4d0b623e85d1435d61238b253a7f3c.png)

I fully acknowledge that this search-to-get-to-a-tab-quickly technique falls down if you have lots of nodes called the same thing as your flows.

---

<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:** [7 February 2019 20:28 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/6 "2019-02-07T20:28:08Z")

</div>

OK, I'm sorry. Yeah, that was "my bad" (as I think is the saying)

I didn't select the right one.

> [@knolleary](#):
>
> You have selected a node called `home` but of type `ui_tab` .

I can't understand that. \> **but of** \< .. bit of? but if?

Anyway, I don't want to _argue_ semantics. Somehow I am just not getting the search thing.

I tried something else and searched. It too resulted in the tab column to the right to show me the thing, rather than taking me to it in the edit (main) part.

---

<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:** [7 February 2019 20:36 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/7 "2019-02-07T20:36:47Z")

</div>

Every entry in the search results consists of:

- the icon of the node
- the 'name' of the node, if set, otherwise its id
- the 'type' of the node
- the location of the node - what flow its on, _if_ its on a flow

 ![Local_Node-RED](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0c25afab635616879c305967f7b81216982257dd.png)

Every node has a type - the type describes what it is. A 'change' node, an 'mqtt-broker' node and so on.

The dashboard provides the node types `ui_tab` and `ui_group`. When you searched for HOME, it has found all of your `ui_tab` nodes that you've given the name `HOME`. You can see clearly in the screenshot they all have the text `ui_tab` in their entries.

The normal workspace tabs have a type of 'tab'. So to find the workspace tab with the name "HOME" you need to find the entry in that list that says 'tab' _not_ 'ui\_tab'.

---

<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:** [7 February 2019 20:42 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/8 "2019-02-07T20:42:28Z")

</div>

Ok.

I think I have it nutted out.

Just tried it again and it is working.

The icon is the one that looks like 2 AND (\*1) gates. One pointing one way and the other (below it) pointing the other.

(\*1) I say AND gates. Op Amps...... But anyway.

Ok got it working.

That part of your reply I didn't understand.... Not important?  
_You have selected a node called `home` but of type `ui_tab` ._

(Via edit)  
So:  
You have selected a node called `home` but of type `ui_tab` .

You have selected a node called `home` but it is of type `ui_tab`.... Better?

---

<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:** [7 February 2019 20:44 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/9 "2019-02-07T20:44:23Z")

</div>

> [@Trying\_to\_learn](#):
>
> That part of your reply I didn't understand.... Not important?  
> _You have selected a node called `home` but of type `ui_tab` ._

In your screenshot, where you showed us what you had selected:

 ![A_suggestion_to_the_layout_of_the_web_design_part_-Core_Development___Feature_Requests-_Node-RED_Forum](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0e512f06383a98bc6091b374ce575e65fa165a5c.png)

You had selected a `ui_tab` type node.

---

<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:** [7 February 2019 20:54 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/10 "2019-02-07T20:54:06Z")

</div>

Yes, and I accept I made a mistake.

So the one I should use is:  
 ![Screenshot%20from%202019-02-08%2007-52-45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b8a344edf11d45c0d1eac466446d2c726e763ab7.png)

Got it.

(Gotta go off line. Alas today is even busier than yesterday.)

---

<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:** [8 February 2019 18:14 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/11 "2019-02-08T18:14:19Z")

</div>

Late to the conversation I know - but I would REALLY appreciate a drop-down list of tabs as well. Even with a relatively small list of tabs, if you end up on a smallish screen, you still end up scrolling.

---

<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:** [8 February 2019 21:41 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/12 "2019-02-08T21:41:43Z")

</div>

Something else which has also been brought up is the oder of the tabs and how they are displayed.

As is, it is easy to alter the order in which they are displayed. Which is nice.

Having the drop down menu as I suggested would be problematic if you wanted to re-order the tabs.

To allow this, the menu would have to allow dragging of tabs. I don't know if that is legal/possible.

(Thinking aloud)  
Also it may be needed to widen the menu item so a option is displayed, and/or activate.  
But there again, maybe the and activate options should both be relegated to the tab edit screen which is accessed now by double clicking on the tab name.  
Which they are now anyway.

Adding a new tab is also a bit tricky.  
If the drop-down menu is not "active" - and the list of tabs visible, the text display would be something like:  
\< new tab \> | | /  
(Can't do ascii art. Drats)  
The text for a new tab then to the right a drop down arrow pointing down.  
Excusing the poor effort of the picture: see attached. ![Menu](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/85246f2816cbf0f5b8662d0939b1bfa37b8d58ce.png)  
So clicking on the gives you a new tab. Clicking on the "V" part, you get the drop down menu of the existing tabs.

---

<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:** [8 February 2019 21:49 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/13 "2019-02-08T21:49:49Z")

</div>

Perhaps that's getting a little over-complex? Truth is that, for me, the drop-down just needs to be a selector. The plus symbol is more than adequate for creating new tabs and the existing drag-drop is fine for reordering - not like I have to do it often. Generally, the only reason I reorder is if I need to keep swapping between 2 tabs that weren't close together when redeveloping 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:** [8 February 2019 21:52 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/14 "2019-02-08T21:52:07Z")

</div>

> [@TotallyInformation](#):
>
> the only reason I reorder is if I need to keep swapping between 2 tabs that weren't close together when redeveloping something.

Agree.

I was only "mind storming".

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [13 February 2019 23:25 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/15 "2019-02-13T23:25:54Z")

</div>

How about a keyboard shortcut display the tabs as a vertical list in the order of what was open previously? Something similar to alt+tab to switch between applications.

Or perhaps a separate keyboard shortcut to search only tabs?

---

<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 February 2019 23:45 UTC](https://discourse.nodered.org/t/a-suggestion-to-the-layout-of-the-web-design-part/7681/16 "2019-02-13T23:45:14Z")

</div>

Currently, Plan A is to reuse the existing Search Flows dialog, but with a button/keyboard shortcut, that opens it with a filter pre-applied to list only flows/tabs. Whether that initial list could be sorted in the order you last visited them is another matter - we don't track that sort of history currently.

I'm reluctant to create yet another pop-up list of things when the existing Search dialog is so close to what is needed.

Also worth mentioning we already provide ctrl-shift-j and ctrl-shift-k as shortcuts for switching to next/previous tabs.