Log in to like this post! Manage Complex Web Layouts and Improve Usability with Ignite UI Dock Manager Radoslav Mirchev / Wednesday, March 15, 2023 At Infragistics, we know that development processes and needs are constantly evolving. To keep up with the market and customer expectations, you must improve usability, while adding new features and functionality at the same time. That’s why we never stop enhancing our Ignite UI toolkit, bringing new components and more functionalities. And just now we are excited to announce the new release of Ignite UI Dock Manager component. This powerful new tool makes it easier for you to build multi-window, multi-screen web apps in any framework. But more about this in a bit. What is a Dock Manager What are the benefits of using a Dock Manager How is Ignite UI Dock Manager different How to use Ignite UI Dock Manager Using panes in Dock Manager Theming customization Customizing layouts What Is a Dock Manager? The Dock Manager is a standard, user-friendly web component for building complex layouts, splitting the view into smaller ones. This can be done recursively in order to create arbitrary layouts that can be manipulated and adjusted at runtime. You can manage the layout plus the positioning of several windows, panels, and other UI elements in a flexible way, docking them to different locations within an app. For end-users, the Dock Manager means having the ability to customize the created layout further through features like pinning, resizing, moving, floating, and hiding panes. What Are the Benefits of Using a Dock Manager? In general, using Dock Manager saves you time and effort when building dynamic and complex UI, ensuring better UX for the end-users of your web application. Here are some of the benefits: Cross-platform: One of the best things about it is the multiple platforms support for desktop and mobile. Then, there is its compatibility with modern web browsers, meaning you can use the Dock Manager component to develop responsive layout software solutions for any platform you want. Built-in drag-and-drop: If you want to reorder the tabs in a pane from one destination to another, you can quickly do it with the drag-and-drop functionality that the component provides. Seamless integration: No matter if you develop apps in Angular, Blazor, Web Components or other frameworks, Dock Manager always relies on the given framework architecture to integrate dockable UI elements within the app logic and data. Flexibility and custom tweaks: Managing layouts, customizing all buttons using slots and parts, docking things like panels and windows in different positions, changing the behavior of UI elements to match app requirements, this is all pretty straightforward. Better UX: Providing the ability to end-users to further manipulate, rearrange, and resize the available UI elements, the Dock Manager component in fact improves the overall experience with the app. What Makes Ignite UI Dock Manager Different? One of the biggest differentiators is that Ignite UI Dock Manager component is a dependency-free, pure web component that is available for Angular, Blazor, React, and Web Components. It allows you to not only build a desktop, Visual Studio-like experience, but it also helps you create better web applications for any industry and business. For instance, Financial companies deal with a lot of data and quite often they require complex dashboards to display and understand this data. The question here is, how financial companies can benefit from using Ignite UI Dock Manager? With it, they can do several things: Build customizable dashboards that are easy to arrange and resize with the company's purposes and the needs of individual users in mind. Efficiently resize UI elements on the screen to maximize the financial data volume that is visualized at once. Quickly display super accessible information that is suited to end-users. Provide a consistent UX across devices thanks to the cross-platform compatibility of Ignite UI Dock Manager. To better illustrate this, I'll share a real-life issue that we encountered during our “Data Analysis Tool” design meetings. To use the Data Analysis Tool, you first 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. But where do you visualize this 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 Dock Manager example and 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 Manager 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: How To Use Ignite UI Dock Manager? You can include the Ignite UI Dock Manager Web Component in your project as a dependency using the NPM package. To install the Dock Manager package execute the following command: npm install --save igniteui-dockmanager Then it is necessary to import and call the defineCustomElements() function: import { defineCustomElements } from 'igniteui-dockmanager/loader'; defineCustomElements(); TS Once the Dock Manager is imported, you can add it on the page: <igc-dockmanager id="dockManager"> </igc-dockmanager> We’ve added quick how-to steps and additional info in our GitHub Ignite UI Dock Manager repo. Some important things to know about the main building blocks in the Dock Manager is that they are called panes. Using Panes in Dock Manager The main building blocks in the Dock Manager are the panes: Content pane The content pane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Split pane The split pane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. Tab group pane The tab group pane displays its child content panes as the tabs of a tab component. Floating pane The floating pane is a split pane rendered above all other ones in a floating window. Document host The document host is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here’s another Dock Manager demo that we built using Ignite UI: Theming Customization in Ignite UI for Dock Manager Component Dock Manager comes with both a light and a dark theme built-in themes. Using themes out-of-the-box can be handy but is not enough to shape the look and feel that you need for you application, so we give you more options to customize the Ignite UI Dock Manager by using CSS variables and CSS parts. Firstly, provide your own icons, using the closeButton, maximizeButton, minimizeButton, pinButton, and unpinButton slots. After that, use the exposed parts in the stylesheet. This way you have full control of the component's styling. There you go. You now have a DockManager with customized icons and tab area. If you want you can try it with this stackblitz live example. Customizing Layouts 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. Save/Load Layout Creating custom and complex layouts can be tricky and extremely annoying if you need to re-create them constantly. That is why we have included an option to save and load layouts. Now you can customize your layout, specifically to 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 on 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.