Manage Complex Web Layouts and Improve Usability with Ignite UI's Dock Manager

Radoslav Mirchev / Monday, June 1, 2020

At Infragistics, we know that your needs are constantly evolving, To keep up with the market and your customers’ expectations you are constantly looking to improve usability, while adding new features and functionality.

That’s why we never stop trying to add new components and enhancements. And it's why we are excited and proud to announce the release of our Ignite UI Dock Manager component. This powerful new tool makes it easier for you to build multi-window, multi-screen apps in any framework. Now you can have a desktop, Visual Studio-like experience, available for your web applications. It is a dependency free, pure web component and is available for Angular, React and Web Components!

What is a Dock Manager?

Dock Manager is a brand-new component, not just for Infragistics, but in general, as no one else currently has anything like this available on the market. So, let me start off first by explaining what it is, and how it will help you to create better web applications.

To better illustrate, I'll share a real-life issue that we encountered during our “Data Analysis Tool” design meetings. To use the Data Analysis Tool, you fist have to select data, choose an appropriate chart, select it and then— there it is, the first snake in the grass—you are in a browser application, not in a desktop one. Where do you visualize that chart? It is a static dialog that you cannot move, it hides your grid view and you are stuck there. If you need to scroll to search for something else, you need to close the chart dialog, check what you need and start from scratch. It is as clumsy as it sounds. You are just limited by the browser. This is where Dock Manager becomes invaluable. With it, you can easily build a multi-screen layout, without sacrificing usability and limiting the end user.

Here's a simple visual comparison:

Data Analysis Tool without Dock Manager:

Data Analysis Tool with Dock Manager:

I guess that’s why many people, including professional developers, feel nostalgic about desktop applications. Nowadays it is not uncommon to see ten or more tabs open in a browser window. If you need to use data from n-number of pages, then you need n-number of windows. That freedom to rearrange your layout as you need is why the Dock Manger component matters. This is not to downplay the importance of single page applications (SPA), but to share another point of view.

So, now that we know what it is and why it is important, let's take a look at the basic parts and features of the Ignite UI Dock Manager:

Using Panes in Dock Manager 

The main building blocks in the Dock Manager are the panes: 

The content pane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane.

The split pane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. 

The tab group pane displays its child content panes as the tabs of a tab component. 

The floating pane is a split pane rendered above all other ones in a floating window.

The document host is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. 


Customizing Layouts 

 I won’t waste time explaining what is pin/unpin or resize pane. I think their names make them self-explanatory. To be brief end-users can perform the following actions to customize the layout at runtime:

  • Pin a pane 

 You can stash all the content and tab panes you don’t need at the moment in a tray by unpinning them. When you need them in their last docked position – just pin them.

  • Resize a pane 

  • Close a pane 

  • Float a pane

You can make a floating pane by dragging the header of any pane. The floating pane is a split pane rendered above all other ones in a floating window. It moves above all other panes and it is not limited by the Dock Manager window. It can be resized and docked or hosted inside a split pane or tab group.

  • Pane Navigator 

 Visual indication (joystick) about the available positions to dock or host pane that is contextual to the pane over which cursor is currently positioned. You can:

Dock a pane to the left, right, top, or bottom to any level of nesting including the global/root one.

Dock a real-time log pane at the bottom of your window.

Dock a pane with commands and operations to the top of my window like the MS Office Ribbon.

Dock a pane as a tab of another view without splitting the content area.

Open the tray and drag an item to a destination pane and dock it to a certain position.

 Dock Manager comes with both a light and a dark theme. You can change the theme by importing the igc.themes.css file into your CSS and adding the dark-theme class to the Dock Manager or any of its parents.

Creating custom and complex layouts can be tricky and extremely annoying if you need to re-create them constantly. That is way we have included an option to save and load layouts. Now you can customize your layout, specifically to your meet your current needs, and save it as a default, reducing iterations and saving you time.

If you want to try it yourself, you just need an Angular project, for example, and you can follow the instructions here.

In the end, Dock Manager provides web developers with the ability to improve the usability of complex web apps, offering a complete windowing experience in the web. It does this quickly and easily, enabling you to be a hero and satisfy your users needs in the time it takes to get your next caffeinated beverage.

Visit the Ignite UI Components page to find out more about Ignite UI, the most complete library of enterprise-grade JavaScript UI components available.