Dockable or "Break Away" panels

Feature Request
#17

So I’ve been digging and playing Sherlock a bit and now I understand the complexity and the amount of work that needs to be invested by the team to give us this.

We all know(or should know or know now) that Wappler UI is built with nwjs which ships with Chromium to provide a graphical interface. So basically Wappler UI is a very complex website that can call node.js modules to extend its functionality and it’s all wrapped inside a desktop browser(chromium). That’s why we can run it in all major OS and they don’t have to worry(too much) about what OS we are running.

That was a great design decision.

Now what I didn’t know(but now I do) is what library they were using to create the layout. Also a good solution but constrained by the single window implementation they have done. I was going to propose to have a functionality to move tab content to a window and viceversa. They would still be enclosed in the single window but it would allow further flexibility.

After checking the docs of the library being used I can see that it can’t be done out-of-the-box so they would actually have to fork the library(if not done already) and implement it themselves. And maybe the core functionality of the library wouldn’t allow it.

So moving back to the dockable panels and moving windows around. It can be done from a technical pov but it’s hell of a lot of work because the windows you see inside Wappler are actually popups constrained by the same window that constrains your websites.

Imagine a modal in your website. You already know it’s not going to move from the tab your are in. You can’t move a modal from your website to your second screen without detaching the whole tab.

That tab is Wappler right now. To be able to do what we want they would have to move from a single window implementation to a multiple window implementation(the multiple instances we talked about in another topic) and change Wappler’s whole UI architecture.

Anyway, trying to shed some light on this topic from an independent position. Wappler team, feel free to chip in and correct me if I’m wrong.

#18

Actually it is not a technical limitation that hold us on - we use indeed NWjs so you can have as many popups as you want but we just don’t want :slight_smile:

We feel that Wappler should behave as a single app and not be breaked up by thousands of popups and floating panels. This is just a very bad UX.

With the years of experience that we have on similar UI’s in Dreamweaver, we learned that it is not a good idea to give to users too much freedom in completely reposition and redesign their workspace. When they do so - panels get lots or are found in places no body is expecting.

So the support guys were 90% of the time occupied with questions like where can I find this and that panel - of it is hidden, of sorry I placed it somewhere else…

So we simplified things in Wappler for the greater good. Now we can say - look at the left side or right side and we now what is there :slight_smile:

4 Likes
#20

Coming back to the topic of improving usability of the UI. Now that we know it’s a design decision and one I truly understand and won’t even challenge.

The recurrent theme I see is that users want a way to access quickly a component without losing focus on the actual work. One example would be flows, database data editor(already opened a FR), etc

Given that you have the option to decide if the content is going to be rendered in a pop up or a tab why not offer both options? Via contextual menu and key combination(i.e. cmd+click)

I know currently you only use tabs to render file contents. But how cool would it be to be able to render in tabs flows, database data editors and other components where it makes sense.

It would give us an option to have certain components at just one click distance and allow us to tab quickly between them. It would improve productivity and learning Wappler.

It wouldn’t compromise the integral layout and your ability to provide instructions. The dom panel would still be a tab of the right sidebar. And we get improved usability.

1 Like
#21

I think I asked about the option to reorganise panels and the UI layout generally, long ago - perhaps when Wappler was in beta. You explained then that you were against this approach - and I think you were right.

However, there are cases where the ability to resize popups would make the relevant features much more useable. The flow window is an obvious example. It’s been made slightly wider, which helps a little, but it would be very awkward to use for a flow with many steps. There is the option to use full screen - but this is also very awkward to use. If the window/popup could be made resizeable, it would be perfect. I’ve wondered if there is a technical reason why this can’t be implemented. I can’t see that it would have any disadvantages. The same applies to query builder for example.

#22

George, I respectfully disagree with you. I don’t think it is bad UX to have multiple windows. There are different ways to achieve this from a UI standpoint and can be done correctly ( just look at Visual Studio where you have panels that can only go in certain places). Visual Studio is probably the defacto standard for IDEs. You want to say that is bad UI/UX? Yes, Dreamweaver could get ugly but you know what I could put my ftp window and DMX extensions on one monitor and have my code/design window all on another monitor and I could make my workflow the way I wanted. It’s great to have multiple monitors and I could not work if I just had a 13" laptop screen. Yes, you can go overboard with too many windows but you can also limit efficiency by not having the ability to see all your content.

In earlier versions of Wappler I understand why you would want one application window, keeping everything contained and like you said, not have to go looking for everything. Wappler was presented as a simple to use application. It still is and you and your team have done an awesome job; it’s a game changer. However, you can’t just keep adding new features and keep that same mindset. I mean come on, you have windows now that when popup they cover other content, you can’t expand them to see all your content or move them around, and you have horizontal scrollbars sometimes and other times you have to cursor over through your text to see your overflow. That is good UX?? If I could simply expand that window, I could see all of my content without having to find it or scroll. For us that have multiple windows, we can arrange things where we want them so that we can customize our workflow.

Sometimes I don’t get it. You have an awesome community here and the Wappler team is great with helping us and you are open to suggestions. But for a lot of us to request something that we feel would make us work more efficiently and then you tell us You just don’t want to?

I have a company that develops warehouse management software. As an owner and project manager/developer, my role is to envision the software and develop it with my team. Our customers use our software everyday as their job. We don’t. When they suggest something, we listen and most of the time implement it because like I said, they use the software everyday and we don’t. They are the ones paying for it and I try to give them what they want and keep them happy because my livelihood depends on it. Yes, I sometimes say "no, that is a bad idea because… " and list out the reason. They depend on us to be the expert but when it is something that will increase their productivity and make our product better, then we try to give it to them. I hope you can understand our point of view. There are some very talented developers here and understand good/bad UI, but when a lot of us are suggesting a better UI, maybe we are on to something…

Wappler is awesome, and the team is awesome and keep up the awesome work that you guys do. Thursdays are the highlight of my week.

#23

What about Google Authentication is not working, mine works ok.

Two Factor Authentication - Google Authenticator or Authy
#24

Please correct me if I’m wrong but that only applies to the editor. Not to the rest of the layout, right?

#25

I’m pretty sure it’s the entire application. You can do it to any window with a header. You click on it and pull it away, then you can move it close to another window and it gives you the choice to pin it to the right, left, above or below the window you are close to, or you can move it away and it will become it’s own floating window that other windows can then be attached to. I like the fact that you can dock them only in certain places so it keeps the UI clean. Of course you can still go crazy if you want to but you can also keep it clean. Here is something I copied from the online help:

Arrange and dock windows

A document window or tool window can be docked , so that it has a position and size within the IDE window frame, or floating as a separate window independent of the IDE. Tool windows can be docked anywhere inside the IDE frame; some tool windows can be docked as tabbed windows in the editor frame. Document windows can be docked within the editor frame, and they can be pinned to their current position in the tab order. You can dock multiple windows to float together in a raft over or outside of the IDE. Tool windows can also be hidden or minimized.

You can arrange windows in the following ways:

  • Pin document windows to the left of the tab well.
  • Tab-dock windows to the editing frame.
  • Dock tool windows to the edge of a frame in the IDE.
  • Float document or tool windows over or outside the IDE.
  • Hide tool windows along the edge of the IDE.
  • Display windows on different monitors.
  • Reset window placement to the default layout or to a saved custom layout.

Arrange tool and document windows by dragging, using commands on the Window menu, or by right-clicking the title bar of the window to be arranged.

The following illustration shows the guide diamond for document windows, which can only be docked within the editing frame:

Document window guide diamond

Tool windows can be fastened to one side of a frame in the IDE or within the editing frame. A guide diamond appears when you drag a tool window to another location to help you to easily redock the window.

Tool Window Guide Diamonds

The following illustration shows Solution Explorer being docked in a new location that’s demarcated by the blue shaded area:

Docking Solution Explorer in a new position

Specifying a second monitor

If you have a second monitor and your operating system supports it, you can choose which monitor displays a window. You can even group multiple windows together in rafts on other monitors.

#26

Oh. Ok you are referring to the native app. Thanks for the clarification. Desktop native apps have better support for that.

I was talking about Visual Studio Code which would be the equivalent to Wappler as both are built with web technologies. Visual Studio Code is wrapped in Electron and Wappler in nwjs.

Unfortunately Visual Sutio Code doesn’t allow either all that layout flexibility.

#27

You’re right. I was just looking at that this morning. Visual Studio Code is more similar to Wappler like you say to allow cross-platform. However, in Visual Studio Code you can still swap windows for right or left side, split vertically your windows and still have a little more freedom while being in one application window. Visual Studio Code however does not have a design window, it’s primarily for a code window and your files. Wappler is evolving and becoming more of a full featured IDE platform and with that, comes more windows. As more features are added, in my opinion, something will have to change with the way content is arranged inside of Wappler.

#28

Yep. I agree. I would be happy if I could just open some features like database data editor or flows in a tab instead of a windows. That would make me a tad more productive.

#29

We actually try to avoid popups also as much as possible and for the editors and options will be moving to a complete editors in the tab view that we have. This editors will do get much more powers like splitting in more views and maybe breaking away to a new window - but then as a whole editor :slight_smile:

3 Likes
#30

No I really disagree - Visual Studio has a very bad panels design. Microsoft knows that as well and that is why you see in Visual Studio Code the improvements - the new way of integrating everything in the editor design that we also follow

#31

Well Visual Studio and Visual Studio Code are two different beasts. Visual Studio is a full blown IDE with integrate rdbm, css design, debugging, etc. Everything. Visual Studio Code is basically a text editor, although a very good one. VSC is not a replacement for VS, just a scale down cross platform version. If you don’t agree with me on Visual Studio, what about NetBeans? Eclipse? Code:Blocks? Aptana Studio? They all allow you to customize your windows so that you can have your most efficient workflow.

VS does has lots of windows and it does a lot of things, and you can’t contain that in just one app window. Yes I believe MS does do window management very well in VS, ask anyone who makes their living spending 8+ hours/day in front of it. VSC does tab management very well. You do not need the multiple window management in VCS. I think @JonL brought up a very good idea about opening up in tabs. That would be better than what we have now.

I see Wappler moving in the direction of VS with all the features being developed and added to it. All of this to say Wappler is awesome, you should be very proud and the users here are very affectionate about it. However as Wappler grows and matures, you will have to start changing your mindset and modifying the UI to accommodate all of this new content.

#32

I was browsing VSC repository just now and saw that floating windows is the number one request over there with more than 3000 votes. It is also the number one request pushed back by the engineering team due to the underlying tech used. They use Electron and Wappler uses NWJS. And both use Chromium to provide a GUI.

They gave the reason why they are not making too much progress in the above comment. And 4 years later they are still facing the same roadblock and they haven’t advanced an inch.

Seeing how Microsoft hasn’t been able to work around the Chromium issue I suggest we close this topic and think about ideas to improve the layout that do not require this kind of implementation.

If we know this won’t be implemented I’m pretty sure we will get more creative when presenting new UI/UX ideas.

2 Likes
#33

Glue42 has an interesting way of connecting multiple windows together and sharing data between them through web workers. They have an open source part of it called Glue42 Core, but not sure if it would work for this. Might be worth a review by the Wappler team.

#34

Please please please consider this Feature Request!

44 votes so must be worthy of consideration?

If you have not voted for this request (being 3 years old many of you probably have not) then PLEASE do so. Thank you.

#35

Apparently never voted for it. I feel like it’s not even necessary to vote for it because it’s is a nobrainer to implement

#36

Well as stated yearlier the panels are part of the editors, so we can’t break them away. See my answer at:

What we are working on is multiple layouts / split views, so you can have multiple editors next to each other.

#37

Hey George, I think it’s pretty impressive that this thread keeps going. Seems I created quite a stir when I created this request. I know there have been a lot of opinions about this but I believe the overall feeling is the same, that people do what some flexibility when it comes to how they want their workspace laid out. Because people use such a wide range of formats to code with, from laptops to multiple screens . To be able to customize the layout of the editor is a way to make it more efficient for us to work.

I can respect that you have a clear focus on how you want your application to look and feel. I share that same feeling with the app my company builds for our customers. I too have that clear path of how I think it should look and feel, and how I want it better than anything else they use, but I’m not always right when it comes to my customer’s wants and needs. I tell my developers that it comes down to the simple fact we just build the tools they use, and we don’t use those tools we build day in/day out. Unless you use Wappler to create Wappler (which seems pretty weird to even say it, :no_mouth:) you don’t use it all day, everyday like we do.

You and your team have done a fantastic job with Wappler, no doubt. I am always challenging my team to find an easier, more efficient and overall better way for us to create our web products and they can’t. The Server Actions/App Connect concept is really industry changing, at least for me and it allows me to do things I never could do otherwise and that is all thanks to your vision and product. But please, as a paying customer, listen to these requests made by users of your software and try to put yourself in our shoes, people who use your software to put food on our table instead of dictating to us how things should be done.

I think most of us here would say yes to giving us too much freedom to completely reposition and redesign our workspace. Multiple editors next to each other would be a great feature to have…But give us multiple windows!!!

Let’s keep the votes coming! I’m campaigning for 100!

5 Likes