4 New Ways of Using Webix File Manager

File Manager is a complex widget that makes part of the Webix Pro package. Basically, it’s a single-page application written in JavaScript with all the performance capabilities of Webix.

This component is aimed at facilitating the process of viewing files and folders and provides smooth tree navigation. You can easily integrate it into any web application and thus improve the user experience of your software solution.

The widget provides a convenient hierarchical data management system and allows performing many common operations with UI items (folders and files) such as renaming, copying/pasting, deleting. It supports drag-n-drop, context menu, and facilitates downloading and uploading files and searching for necessary folders/items.

The plugin allows working with any kind of hierarchical data. It has a standard explorer interface with a folder tree on the left and a content pane on the right. You can browse your files with the help of a hierarchy tree, navigation buttons, and breadcrumbs. It’s also possible to set dates, numbers, and text labels to comply with the rules of different countries. In addition, you can customize file templates and content pane modes, hide navigation elements, and add menu items.

Webix File Manager is a fully functional and well-designed UI app. Unfortunately, it doesn’t enjoy high popularity as file management is not a typical front-end UX scenario. Basically, web developers prefer managing files on the server side. However, the widget is worth your attention, as it encompasses many useful cutting-edge UX practices.

Different ways of using JavaScript File Manager widget

Lately, we have carried out research and interviews among our users to understand how and for what purpose they use Webix UI library and its components(you can get familiar with the latest interview that was published in our blog). This allowed us to understand in what areas and for what application solutions Webix users can utilize File Manager widget. We suggest you have a look at some ideas. You can share your opinions on the topic in the comments section.

1. Developing an e-mail client

Although it’s possible to create an e-mail client with the help of ready-made Webix UI controls, you can also use File Manager for doing it. In this case, you’ll develop an e-mail client quickly and efficiently as complex widgets provide you a ready-made application wireframe with nice design and numerous UI features.

A UI layer of the e-mail client actually contains the same components as the complex widget does:

• tree navigation through e-mail folders;
• item management (e-mails);
• item view;
• etc.

Below you can see an example of how a user interface for the email client will look like:

There are a lot of features in common, aren’t there?

Webix is a fully client-side framework that can be integrated with any back end so you can save a lot of time thanks to ready-made Webix components.

2. Asset Manager

Asset Manager is a system for managing different media files: videos, MP3 files, pictures, photos, GIFs, etc. File Manager can serve as a framework for storage and management of such kind of data items.

As a rule, all the content in asset systems is organized not only into folders, where the appropriate files are placed, but also according to the types of data, locations, dates, and projects. Anyway, all the views represent tree lists similar to those that the complex widget provides.

3. Document Manager

File Manager can be easily transformed into a Document manager that helps organize, store, and manage a wide range of files and documents. It can provide an online repository of all the documents with a quick search option.

Document Manager comprises capabilities and tools for auditing and managing electronic documents.

If you aim at developing a new efficient document management system, you should pay attention to this complex plugin. Moreover, with Webix you will significantly facilitate the process of web development and get access to 99+ ready-to-use widgets that can become part of your solution.

4. Report Manager

You can also use File Manager as a basis for creating a report management system. Such system allows viewing reports and navigating through them with ease.

Report Manager can help perform the following tasks:

• View and search for specific reports. You can view the report itself and its past versions in report history.
• Create and maintain a file hierarchy.
• Set report execution properties and create report history.
• Create linked reports in order to reuse existing reports in a variety of ways.

It’s also possible to create a Report Manager with the help of Webix UI elements. But if you use the complex widget, the process will become much easier.

Bottom line

As you see, even such a simple and plain widget as File Manager can have many implementation areas. You can use this component in a number of ways and create convenient e-mail, asset, document or report management systems.