Dockable or "Break Away" panels

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.

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

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

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.

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.

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.

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.

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

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

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.

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

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.

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.

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

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.

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

Well, I had some hope for @george’s comments on split views, but they are all but useless with monitors that do not have massive resolutions above 1920x1080. Over 60% of monitors are below 1920x1080.

I’m running 27" monitors and find the new multi-column layout unusable, and probably something the majority will not be able to use without detachable panels. There’s not enough real estate on a typical monitor. :frowning:

Now that we have multiple layouts and the ground work is done, our next step is to make them also available in multiple windows.

So you will be able to drag a tab editor out and it will become its own window.

So it is coming up next :slight_smile:

14 Likes

Múltiple monitors can be used with this.

Please check:

This has been integrated in Wappler 6 beta 16

3 Likes