DEV Community: Serhii Pylypchuk

Webix Gantt Chart. Handy web tool for efficient project management

Serhii Pylypchuk — Wed, 13 Apr 2022 04:05:03 +0000

In a previous article on one of the most popular Agile approaches, I introduced you to such a Japanese project management tool as "Kanban". And today I'm going to move from the far east to the far west part of the world. In this publication, you will learn about the "Gantt" method, its history and modern implementations.

Background

The first prototype of the so-called "Gantt Chart" was invented, oddly enough, by the Polish engineer Karol Adamecki back in 1896. He developed a fundamentally new approach for visualizing and analyzing interrelated processes in production (steelmaking) and successfully used it in practice. Later, he named his invention the "harmonogram".

Since Adametsky published only in Russian and Polish, his work was not widely known in English-speaking countries. But in 1910, another American engineer, Henry Gantt, introduced his own analogue of a similar system in the United States. He used his invention to track the time that factory workers spent on the current tasks.

Subsequently, these two systems were combined into the solution we now know as "Gantt Chart".

Application

So, let's find out what kind of tasks can be covered using Gantt Chart. Generally, such a system allows one to solve several issues related to project management at once.

First of all, you will be able to plan each stage of the project with well-defined start and end dates of the workflow.

Besides, the Gantt Chart allows you to identify milestones, the most important events of the project. And thanks to the development of software, the Adamecki-Gantt chart allows you to track the progress of tasks, link dependent tasks, manage resources and costs, and improve collaboration between team members. But it was not always so.

Development

For a long time, such diagrams were drawn on paper by hand. As a consequence of any change to the graph, the entire diagram had to be redrawn.

Later, project managers started using paper tapes and special rectangles to indicate the columns of the chart. This approach made the analysis process significantly faster. The reason was that the key elements could be freely moved, rather than redrawing the diagrams again and again.

In a modern management environment, no one uses hand drawing for such analysis anymore. If you ask Uncle Google about the digital analogues of the Gantt Chart, the browser will show you a lot of ready-made apps, both paid and free. They will more than cover the basic needs of the average project manager.

But what if you are faced with the task to implement such a system in your own application? The answer is simple - you need to look not for a static app, but for a flexible widget that can be used both independently and as a plug-in.

In this article, I want to talk about one of such widgets. Next, we will dive into the JavaScript Gantt Chart developed by the Webix team. Let's see what it is and what its advantage is.

What is Webix Gantt Chart

Webix Gantt is a comprehensive JavaScript solution for Agile project management. In short, the widget functionality allows working with projects of any complexity, scheduling tasks and tracking their progress, marking important workflow milestones, managing resources, and much more. In fact, you can find all this functionality in the vast majority of such kinds of apps.

To save your time, I will skip the detailed description of trivial things related to the functionality. After all, if you are reading this article, you already have some idea of the basic principles of working with Gantt Charts. But if you still want to refresh your knowledge, you can find all the information you need in the appropriate guide.

Now let's take a closer look at the benefits of the Gantt Chart widget and its configurations.

Advantages

On the Internet, you can find a lot of ready-made applications and services that allow you to create Gantt Charts and use them to manage your projects. But the weak side of such tools is their static state.

If we are talking about desktop apps, they need to be installed and used locally. When using the corresponding online services, you need to share all your data with a third-party resource. This approach is more flexible, but it doesn't look safe.

In both cases, you are limited to the initial functionality that was laid down by the developers of the respective products. The other side of the coin is that you need to use only 10 of the 100 features proposed. In this case, you have no way to shed the "extra ballast." And this, in turn, will affect the app's performance.

So now let's dive into the advantages of a similar solution offered to us by the Webix team. Based on the fact that Gantt Chart is a web application written in JavaScript and CSS, you can:

use the widget as a separate app, or integrate it as a third-party module (with React, Angular, and other frameworks)
flexibly configure the component, by adding only features that cover your project needs
customize the appearance and behavior of the component, not limited to the basic functionality
use the ready-made Node.js and Go backend, or connect your custom one.

If you don't see clear advantages in all I have mentioned above, and the flexibility of settings is not a priority for you, then you should look for another tool. As a variant, you can look at the GanttPro service.

The next part of the article is for those who think out of the box and are not limited to certain templates. I will tell you more about how to initialize, configure, customize, and localize the Gantt Chart widget.

How to Create a Widget with Basic Functionality

Let's start with the fact that Gantt Chart is an advanced extension of the Webix library. To use the widget, include the library resources first, and then the corresponding .js and .css files of the widget itself.

<head>
  <!-- Webix resources -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- Gantt Chart resources -->
  <script type="text/javascript" src="codebase/gantt.js"></script>
  <link rel="stylesheet" href="codebase/gantt.css" type="text/css">
</head>

After including the required scripts, you need to call the widget's constructor. To start executing the app code only after the page is fully loaded, pass it to the webix.ready(…) function.

<body>
  <script>
    webix.ready(function(){
      /*Gantt Chart constructor*/
      webix.ui({
        view:"gantt", 
        url:"your_backend"
      });
    });
  </script>
</body>

As you can see, to initialize the widget you only need to write a few lines of code. Now you can create and manage your projects using a convenient interface and basic functionality.

A few more words about licensing. Like other complex widgets, Gantt Chart depends on the Webix core and is distributed with the Pro version of the library.

You can download the trial Pro version with all complex widgets, which is free for 30 days. This will allow you to try all the benefits and flexibility of working with the Gantt Chart in practice. And after this, you can decide whether this tool is right for you or not.

Configuring

Webix Gantt Chart is a kind of constructor. It consists of several components of the core library. Each of them includes an API with which you can customize the appearance and behavior of certain parts of the interface. Besides, the widget has a set of its own configurations.

It is worth clarifying here that you can configure the widget using the simplest and most convenient JSON syntax. All you need is to set the necessary properties to the appropriate values. Let's look at some of the configurations in detail.

Connecting to Backend

To start working with your projects, you need to load the corresponding data. In a real case, the data will be stored on a remote server. When initializing the app, you should specify a link to the server script (your own or one of two solutions available on our github). Gantt will load your project data and send all changes back to the server if needed.

To connect Gantt Chart to the backend, use the url property. Read more about working with the server side in the corresponding article.

{
  view: "gantt", 
  url: "your_backend" // a link to your server script
}

Linking Tasks

Each project may include a huge number of additional tasks. Each of these tasks may directly depend on the readiness of other tasks. To visualize such dependencies, the widget provides special lines that allow you to link the tasks to each other.

This kind of linking is supported by default. To switch it off, you need to set the links property to false:

{
  view: "gantt", 
  …,
  links: false
}

Critical Path

Each project has certain time frames. To meet the deadline, it is necessary to complete each of the tasks timely and consistently.

To analyze the project deadline, the widget provides a special critical path. It allows you to display a chain of tasks that need to be completed on time to meet project deadlines.

Gantt Chart analyzes only the tasks with the "end-to-start" links. If the schedules of such tasks are overlapped or set without considering the margin of time (and real life can be unforeseeable), the widget will consider them critical and highlight in red.

To show the critical path, you need to set the criticalPath property to true:

{
  view: "gantt", 
  …,
  criticalPath: true
}

Split Tasks

Besides the links between different tasks, you can also create related subtasks within a specific task. The parts of a split task will be displayed in one row and connected to each other by a dotted line.

Unlike the basic tasks, subtasks of a split task are not displayed in the tree and cannot include nested items.

To enable split tasks, you need to set the split property to true:

{
  view: "gantt", 
  …,
  split: true
}

Working with Resources

One of the distinguishing features of Webix Gantt is the ability to work with resources. You can efficiently manage resources by assigning them to certain project tasks. You will also be able to view resources in the tree and chart using a special mode, as well as analyze the workload of resources via a special diagram.

To enable the resources support, you need to set the resources property to true:

{
  view: "gantt", 
  url: "your_backend",
  resources: true
}

The widget will load the required data by the specified url. After this, the users will be able to manage the corresponding resources via a suitable editor.

Resources View Mode

By default, the widget displays only the tasks in the tree and chart. In this way, you can view the projects, tasks and subtasks, as well as milestones (significant project events).

But you can switch to the resources view mode as well. In this mode, the widget displays only the tasks grouped by resources they are assigned to. There is also a separate Unassigned section that contains all the unassigned tasks.

To enable the resources view mode, you need to set the display property to a "resources" value:

{
  view: "gantt",
  …,
  resources: true, // required string!
  display: "resources"
}

Resources Diagram

Besides the view mode, you can also display resources on a special diagram. It allows you to analyze the workload of each resource by hours and tasks for each work day. If the resource limit is exceeded, the Gantt will highlight it in red on the diagram.

To display the resources diagram, you need to enable the resources support and set the resourcesDiagram property to true:

{
  view: "gantt",
  url: "your_backend",
  resources: true, // required string!
  // show the diagram under the main chart
  resourcesDiagram: true
}

In the sections above, I described only a small part of all the Gantt Chart settings. You can find the full list of widget configurations in the corresponding article.

Customization

Besides configuring via the built-in settings, you have an ability to customize almost any part of the interface and its behavior. But for this, you need to understand what is going on under the hood of Gantt Chart.

The structure of the widget is built as a SPA application based on the MV pattern of the Webix Jet framework. In this case the interface (View) is separated from the business logic (Model). Each of the interface elements is a separate component of the Webix library (button, select, toolbar, and others).

Significant parts of the interface (tree, chart, and others) are stored in separate classes inherited from the JetView class. And the business logic, which is a model, is also stored separately in the form of modules. In the context of framework, these modules are called services.

To customize the interface and logic of the app, all you need to do is get a PhD in programming and then dig into the widget code a bit :) And even for this, you need to know at least the key principles of working with the Webix Jet framework.

Read the "Webix Jet framework through the eyes of a freshman" article to find out the basic principles of working with the framework, or refer to the documentation for more detailed information.

How to Customize the Interface

And now let's move on to the customization itself. As I mentioned above, each element of the interface is a separate component of the Webix library. Each significant part of the interface is a class that consists of these components. You can easily change, add, or completely remove any part of the interface.

Let's imagine that you have to add an extra column to the task tree. First, you need to create a new CustomTree class by inheriting it from the class that stores the task tree interface settings (gantt.views.tree).

In this case, we are going to use the config() method included into all non abstract classes of the widget. This method defines a module view. To change the module interface, you need to override either the config() or init() methods. The common rule works in the following way: if you are sure that all changes in the UI don't break the inner logic, you can use the config() method. Otherwise, you need to use the init() one.

The config() lifecycle method is inherited from the JetView class. It is responsible for customizing the part of the interface that you want to change.

Inside this method, you should get the configuration object of the new class. It corresponds to the configurations of the treetable component.

After this, you can add a new column template into the array of the columns property and return the new settings. In code, it looks like this:

class CustomTree extends gantt.views.tree {
    config() {
      const ui = super.config(); // get config object of treetable
    // add a new column template
      ui.columns.splice(3, 0, {
        id: "progress",
        header: "%",
        template: "#progress#%",
        width: 50,
      });
    // return new settings
      return ui;
    }
}

Next, you need to replace the class you inherited with the one you created. This can be done using the override property in the widget constructor:

{
    view: "gantt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([[gantt.views.tree, CustomTree]])
}

This is a simple way to change the interface of Gantt Chart. To learn more about the widget customization, refer to its documentation.

Localization

The ease of localization is one of the nice bonuses of the Gantt widget. By default, all the interface labels are displayed in English. But you can easily create several custom locales and switch between them.

To translate labels in a particular language, you should create a separate locale and specify the necessary translations there.

gantt.locales.ua = {
  "Add task": "Добавити завдання",
  "Add project": "Добавити проект",
  …
};

When the locale with custom translations is ready, you should apply it to the entire app. This can be done using the locale property in the widget constructor:

{
  id: "gantt_id",
  view: "gantt",
  url: "your_backend",
  locale: {
    lang: "ua"
  }
}

If you want to create an international app, you should provide several locales and switch between them dynamically. To do this, you need to access the locale service of the Jet framework using its getService() method. After this, call the setLang() method of the locale service. It takes the name of the locale to be applied as a parameter.

const locale = $$("gantt_id").getService("locale");
locale.setLang(/* your locale */); // ua, en, ru, custom_one

Note that the widget is distributed only with the English locale by default. But the library provides a special place where users can post custom locales as well. These translations can be found on the webix-hub.

Conclusion

In this article, I introduced you to the Webix Gantt widget and its main features. As you can see, it is a very functional and flexible component in terms of configuration and customization. Among other things, you can integrate it with any framework or library. To find more information about the capabilities and settings of Gantt Chart, refer to the widget documentation.

Webix Kanban. A Modern Implementation of the Agile Philosophy

Serhii Pylypchuk — Tue, 28 Dec 2021 12:25:26 +0000

I think that each competent project manager heard about a system of the "flexible" approaches to software development. It is about the "Agile methodologies" based on the values of the "Agile Manifesto" and the 12 principles that underlie it.

Kanban is one of the most popular approaches to implementing agile principles in software development (and not only). It assumes discussion of the problems in real time and full transparency of all work processes.

All tasks are displayed on a special Kanban board. It is used to visualize, analyze and optimize the workflow. This approach allows the team members to check the status of each individual task at any stage of development. Besides, you will be able to assess the progress of the project as a whole.

In this article, I want to tell you about one of the complex widgets of the Webix library, which implements the key principles of the kanban approach. We'll talk about such a project management tool as JavaScript Kanban and discuss its key features. Let's figure out how everything works.

What is Webix Kanban

Webix Kanban Board is a convenient and intuitive tool for managing "agile projects". Using this component you can visualize and track your team's workflows, as well as monitor the specific project tasks.

How It Works

The widget operating principle is based on special cards arranged in columns and rows on the Kanban board. Each card is a separate task with a specific name, description of details, assigned performers, deadlines, and other equally important attributes. Each column represents a certain stage of the readiness of a particular task.

Using this approach, the technical and service teams can understand how much work they need to take on. They can do the assigned tasks while adhering to the principles of continuous improvement.

It's worth noting that Webix Kanban is fully written in JavaScript and CSS. You can easily determine the appearance of the board and its structure. You will also be able to customize the widget for the specific features of your project.

Functionality

The widget has a fairly large set of flexibly customizable features. They'll help you to manage the team's workflow more efficiently, taking into account even the smallest nuances.

In particular, you can manage the tasks (kanban cards) in the following way:

create, edit, copy, and delete tasks
move tasks between columns (thus changing their status)
set tags and the priority of task execution
assign responsible users
customize and style the card content
sort and filter the tasks according to certain parameters
add images to cards, attach extra files and discuss nuances in the comments.

The widget interface is also configurable quite flexibly. You can create any number of tasks and distribute them into the corresponding columns, as well as define the internal structure for each of them. Below I will talk about this in detail.

If the built-in functionality isn't enough for you, you can create a custom one using special templates. They allow you to configure both the app interface and its behavior.

Creating Kanban with Initial Functionality

JavaScript Kanban is one of the complex widgets of the Webix library. It can be purchased along with the Pro version of the library, as a part of one of the licensed packages. Details can be found on the licensing page.

You can assess in practice all the advantages and flexibility of working with Kanban (and not only). For this, you need to download the trial Pro version of the library. It includes all complex widgets and is available free for 30 days.

Now let's see how to include the required sources and initialize the widget on a regular HTML page.

Considering that Kanban is built on the Webix components, to initialize it you should first include the main library sources.

<!-- Webix -->
<script type="text/javascript" src="codebase/webix.js"></script>
<link rel="stylesheet" href="codebase/webix.css" type="text/css">

Next, you need to specify the corresponding paths to the .js and .css files of the Kanban Board.

<!-- Kanban Board -->
<script type="text/javascript" src="codebase/kanban.js"></script>
<link rel="stylesheet" href="codebase/kanban.css" type="text/css">

After including the necessary sources, you can initialize the widget. To do this, you should call the webix.ui() constructor, by passing an object with the necessary configurations as a parameter.

To make sure that the widget code starts executing after the page is fully loaded, call the widget constructor inside the webix.ready(function(){/* a widget constructor */}) method.

<body>
  <script>
    webix.ready(function(){
      webix.ui({
        view:"kanban",
        cols:[...], 
        data:"cards_data"
      });
    });
  </script>
</body>

Now you can use the basic functionality of the Kanban and further customize it as you see fit. In the browser you may see the following result:

Configuring Kanban

Kanban Board, like many other complex Webix widgets, is a kind of layout constructor. It can be made up of several separate components. Each of them has its own methods and properties. With their help, you can customize the interface elements and their behavior.

Besides the internal API, the widget has built-in parameters. They allow you to configure the component and manage its functionality. It would not hurt to remind you that you need to use a declarative approach to set the Webix widgets. It means that all properties and their values are specified in a regular JSON object.

The component itself is declared via the view: "kanban" expression. After this, you should specify the column parameters the kanban cards will be placed into, as well as the corresponding data for each task. These are the minimum settings required for the widget to start.

Now let's see how to set some more advanced configurations.

Layout Structure

Webix Kanban is a kind of layout app. You can define any suitable structure you need, guided only by the project requirements and common sense :). The widget allows you to create as many cards and columns as you want to manage your team's tasks more effectively. Let's take a look at several quite possible options of the Kanban Board layout for your project.

Progress columns

Traditionally, any Kanban board should consist of at least 3 columns, which are used to determine the status of project tasks:

Backlog - scheduled tasks
In progress - tasks in progress
Done - completed tasks.

To configure the Kanban columns, you need to understand the basic principles of building the Webix layouts. In particular, Kanban has a special cols property for working with columns. In the array of this parameter, you can set the desired configurations for each column.

The layout of the above-mentioned structure will look like this:

cols:[
  { 
    header: "Backlog",
    body: { view: "kanbanlist", status: "new" }
  },
  { 
    header: "In Progress",
    body: { view: "kanbanlist", status: "work" }
  },
  { 
    header: "Done",
    body: { view: "kanbanlist", status: "done" }
  }
]

For each column, you can specify a header via the header property and its general settings in the object of the body property. Here you should define the desired structure for displaying cards by setting the view property to one of the following parameters:

"kanbanlist" - cards in columns are arranged as a list (see live demo)
"kanbandataview" - depending on a free space, the cards in columns are arranged as a list, which can consist of several rows (see live demo)
custom option. You can split your list by adding a new layout with columns/rows or use tabview to switch through the lists (see live demo).

To distribute the cards into corresponding columns, you need to specify a special key via the status property. The same key needs to be stored in the card data.

Column headers

Kanban provides an option to define a stylish and functional header for any desired column. To implement this, you need to use such an entity as kanbanheader.

The standard header collapses when clicking on the corresponding column (as an accordion). The kanbanheader allows you to add new cards and can be displayed with a specific style. The layout of a column with such a header will look like this:

cols:[
    { // column parameters
      rows:[
          { 
            view: "kanbanheader", // declare the kanbanheader component
            label: "Backlog", // define the header title
            link: "new", // bind the header to the list via its status
            type: "sub" // add a compact styling
          },
          { 
            id: "new", // define the list ID 
            view: "kanbanlist", // declare the kanbanlist component
            status: "new" // set the list status
          }
        ]
    },
    ...
]

To add cards, use the round icon next to the header name.

Live demo

Nested columns

Such a layout system allows you to create a structure of any complexity and nesting level. For example, in one of the columns, you can create nested columns, which can contain some extra columns. See an example below:

Live demo

Swimlanes

Let's say you are engaged in software development. The teams of designers and programmers are working tirelessly on your project to make it successful. To separate the area of responsibility of each team, you can add corresponding sections to the desired kanban columns.

To implement these swimlanes in the Kanban Board, you need to set the status property to a complex value.

For example, let's see how to add such sections to the "In progress" and "Done" columns. It helps you to see what tasks designers and programmers are involved in at the current time, and what tasks have already been completed. The layout structure will be as follows:

..., 
{
    header: "In progress",
    body: { 
      rows: [
        { view: "kanbanheader", label: "Development", type: "sub" },
        { view: "kanbanlist", status: { status: "work", team: 1 } },
        { view: "kanbanheader", label: "Design", type: "sub" },
        { view: "kanbanlist", status: { status: "work", team: 2 } }
      ]
    }
},
{ 
    header: "Done",
    body: { 
        rows: [
        { view: "kanbanheader", label: "Development", type: "sub" },
        { view: "kanbanlist", status: { status: "done", team: 1 } },
        { view: "kanbanheader", label: "Design", type: "sub" },
        { view: "kanbanlist", status: { status: "done", team: 2 } }
      ]
    }
},
data:cards_data

To define the column swimlanes, you need to specify its status property to the complex value. Besides the status itself, you can also specify the key of the corresponding team (Development or Design) via the team property.

The same keys should be specified in the data object of each card:

const cards_data =[
    { id:1, status:"work", team: 1, text:"Kanban tutorial",... },
    { id:2, status:"work", team: 2, text:"New skin",... },
    { id:3, status:"done", team: 1, text:"Sidebar options",...  },
    { id:4, status:"done", team: 1, text:"Toolbar controls",... },
    // other data
];

In the browser you will see the following result:

Live demo

Card Parameters

And now let's talk about the kanban cards, which intend to manage tasks on your project. Each card can contain a different set of elements depending on its data and the widget parameters.

Besides the task name, you can specify the following elements for the card:

tags
priority
comments
assigned performers
attached files.

Priority

To meet the project deadline, it is very important to prioritize the tasks. Webix Kanban makes it possible with the vertical colored lines on the left edge of the cards.

Let's suppose you want to divide the priority of tasks into three levels of urgency:

high - red line
normal - green line
low - orange line.

To do this, set the colors property to an array with data objects for each color:

colors: [
  { id: 1, value: "Urgent", color: "red" },                                 
  { id: 2, value: "Normal", color: "green" },
  { id: 3, value: "Low", color: "orange" }    
],
data: cards_data

You can also specify the initial priority of each card by setting the required color in its data object via the color property:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", color: "orange" },
  { id: 2, status: "work", text: "Task 2", color: "green" },
  { id: 3, status: "done", text: "Task 3", color: "red" },
  ...
];

In the browser you will see the following result:

Comments

Your project may include the tasks in which several specialists take part at once. For an efficient collaboration of all participants of such tasks, the widget provides an ability to write comments.

To enable commenting, you should set the comments property to true. If you need to display comments just after the widget initializing, specify the corresponding data in the array of the comments property of the card data object:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", comments: [
     { id: 1, user_id: 4, date: "2018-06-14 23:01", text: "No worry, just wait"},
     { id: 2, user_id: 5, date: "2018-06-14 22:01", text: "Ok, I'm waiting"}
    ] 
  },
  { id: 2, status: "work", text: "Task 2" },
  { id: 3, status: "done", text: "Task 3" }
];

In the browser you will see the following result:

Assignments

You can assign an employee to work on each task. It is worth noting here that the widget has a limit on the number of assignments. Based on this, you can assign only one performer to one task.

To add employees into your project, in the widget configuration object you need to specify the users property and set it to the array with the data of the corresponding users:

users:[
  { id: 1, value: "Margaret Atwood", image: "imgs/matwood.jpg" },
  { id: 2, value: "Fannie Flagg", image: "imgs/fflagg.jpg" },
  { id: 3, value: "Irvine Welsh", image: "imgs/iwelsh.jpg" }
]

Now you can assign workers to the particular task via the card editor. But there is an easier way. To assign users directly in the card, you should specify the userList: true expression in the configuration object.

In the browser you will see the following result:

Attachments

Sometimes there are situations when you need to attach the additional files to the card. It can be a detailed instruction or a picture with an interface design. The widget allows you to attach such files via the card editor.

To implement it, you should specify a path to the script for uploading files via the attachments property:

{
  view: "kanban",
  attachments: "server/upload",
  ...,
  data: cards_data
}

In a card editor, you will see a special interface for uploading files. The already uploaded items will be displayed at the bottom of the editor. The number of the attached elements will be displayed on the card.

You can display the initial attachments just after the widget initializes. To do this, provide the corresponding data in the array of the attachments property in the card data object:

const cards_data = [
  { id: 1, status: "new", text: "Task 1", attachments: [
        { id: 2, link: "./server/files/image001.jpg", size: 85919 },
        { id: 3, link: "./server/files/image002.jpg", size: 105981 }
    ]
  }
];

In the browser you will see the following result:

Card operations

You can perform some operations with a card via its context menu, namely: open an editor, copy or delete a card. The menu icon is not displayed by default. To show it, specify the cardAction: true expression in the configuration object.

You can also define the custom operations with cards. Read more about this in the corresponding documentation article.

Card Editor

The parameters of any kanban card can be changed using a special editor. It opens when you double-click on the card or click on the edit icon.

By default, the editor is disabled. To enable it, you should set the editor property to true. The editor fields will depend on the widget settings. For example, if you specify the tags, users, attachments and colors properties in the configuration object, the corresponding fields will appear in the editor.

You can also change the order of the built-in fields or create custom ones. For this, you need to define them in the array of the editor property. It should be noted that the names of the controls must match the names of the properties of the Kanban data items.

editor: [
  { view: "text", name: "text", label: "Task" },
  { view: "multicombo", name: "tags", label: "" },
  {
     view: "richselect", name: "user",
     options: [
         { id: 1, name: "China Mieville" },
         { id: 2, name: "Helen Walsh" },
         { id: 3, name: "Jeff Noon" }
     ]
  }
]

Read more about the editor customization in the corresponding documentation article.

Loading Data

In the widget settings you can specify an array of the card's data that you want to display during initialization. Depending on where the data are stored (client or server), you can use either the data or url properties, as well as the parse() or load() methods. Let's take a closer look at each of these approaches.

Parsing Client-Side Data

Like any other Webix widget, Kanban accepts data in the JSON format by default. If the data are stored on the client side, you can parse it in two ways:

via the data property in the widget's constructor
via the parse() method.

The data object should contain the fields in which you need to describe certain parameters of the card.

Each data element requires a unique ID. Besides, you can specify a set of the following parameters:

status - a status of the element, which defines a card's belonging to the corresponding column (required parameter)
text - a title of the element (task)
tags - a comma-separated list of tags or an array of their IDs ( if data for tags are presented in a separate data set)
$list - an index of the list, the element will be placed into
comments - a list of comments or an array of their IDs (if the comments data are stored in a separate data set)
color - a priority color
user_id - an ID of the user the task is assigned to
attachments - a list of files attached to the card.

A card data object may look something like this:

const cards_data = [
{
    "id": 2,
    "status": "in progress",
    "text": "Performance tests",
    "tags": [1],
    "$list": 1,
    "comments": [2,3],
    "color": "#FE0E0E",
    "user_id": 5,
    "attachments": [
        { id: 2, link: "./server/files/image001.jpg", size: 85919 },
        { id: 3, link: "./server/files/image002.jpg", size: 105981 }
    ]
},
{...}
];

You can set the data property to this object in the widget constructor:

{
  view: "kanban",
  data: cards_data
}

or parse data via the parse() method:

{
  view: "kanban",
  id: "kanban_id"
}

$$("kanban_id").parse(cards_data);

Loading Server-Side Data

If you want to load server data, you need to set url property to the path to the required file or script:

{
  view: "kanban",
  url: "cards_data.js"
}

or you can call the load() method, by passing a path to the file as a parameter:

{
  view: "kanban",
  id: "kanban_id"
}

$$("kanban_id").load("cards_data.js");

And here it should be borne in mind that the widget can take data in various formats. For example, if you want to load data in XML format, you should specify this format directly via the datatype property:

{
  view: "kanban",
  id: "kanban_id",
  url: "cards_data.xml",
  datatype: "xml"
}

or pass it to the load() method as a second parameter:

$$("kanban_id").load("cards_data.xml", "xml");

Kanban Localization

A significant advantage of all Webix widgets is the ease of its localization. By default, all Kanban labels are displayed in English. But you have an opportunity to change the current locale before the widget initialization or create a custom one. In the object of the custom locale you can specify the labels in the language you need. Let's take a look at both of these options.

How to Modify the Current Locale

The labels of the current locale are stored in the webix.i18n.kanban object. You can specify the needed translations for the following elements:

buttons and labels in the card editor
options in the context menu.

The current locale object has the following structure:

webix.i18n.kanban = {
    "copy": "Copy",
    "dnd": "Drop Files Here",
    "remove": "Remove",
    "save": "Save",
    "confirm": "The card will be deleted permanently, are you sure?",
    "editor": {
        "add": "Add card",
        "edit": "Edit card",
        "assign": "Assign to",
        "attachments": "Attachments",
        "color": "Color",
        "head": "Editor",
        "status": "Status",
        "tags": "Tags",
        "text": "Text",
        "upload": "Upload"
    },
    "menu": {
        "copy": "Copy",
        "edit": "Edit",
        "remove": "Remove"
    }
};

If you want to modify the labels of the current locale, you should specify the corresponding values in the webix.i18n.kanban object. The widget will change them in the interface.

How to Create a Custom Locale

In the second option, you need to create a new locale with a similar structure via the webix.i18n.locales[localeN].kanban expression. In this object you can set the corresponding keys to the new translations:

webix.i18n.locales["ru-RU"].kanban = {
    "copy": "Копировать",
    "dnd": "Бросайте файлы сюда",
    "remove": "Удалить",
    "save": "Сохранить",
    "confirm": "Вы собираетесь навсегда удалить эту карточку. Вы уверены?",
    "editor":{
        "add": "Добавить карточку",
        "edit": "Редактировать карточку",
        // other labels
    },
    // other labels
};

To apply a new locale, you need to call the setLocale() method of the webix.i18n object before the widget initialization. It takes an object with translations as a parameter:

webix.i18n.setLocale("ru-RU");

Live demo

Conclusion

In this article, I have tried to introduce you to the JavaScript Kanban widget, its main usage and functionality. As you can see, it is a very functional and highly customizable component. You can easily integrate it with any framework or library you need, as well as connect to the backend.

This publication covers only a small part of all the widget's capabilities. To learn more about configuring and customizing JS Kanban, visit its documentation.

Webix SpreadSheet. Is it a full-fledged web alternative to Excel?

Serhii Pylypchuk — Fri, 24 Sep 2021 15:53:10 +0000

Continuing the topic of the gradual transition from desktop software to similar online services, in this publication I want to talk about a SpreadSheet widget that can compete with his majesty "Excel". It is an outstanding JavaScript component that provides full-fledged support of any spreadsheets. Meanwhile, this tool is very flexible and can be easily integrated into any environment.

If you need to add some Excel-like tool with extensive functionality and high performance in your business application, you should pay attention to the SpreadSheet widget from the Webix team. Let's figure out what they can offer to us and whether the game is worth the candle.

What is JS Spreadsheet

Webix SpreadSheet is a comprehensive JavaScript solution for working with spreadsheets of varying complexity. The component is one of the most advanced tools from the complex widgets line of the Webix library.

Recently (starting with version 8.2), SpreadSheet has received a new engine and multi-sheet math support. These updates significantly accelerated its performance in comparison to previous versions.

The Widget Functionality

The tool functionality is quite extensive. You can create spreadsheets, manage their data via the user-friendly interface, export data in the required format (Excel, PDF, CSV or PNG), and much more. Besides creating your own sheets, you are able to import local data in Excel format and change them depending on your needs.

In particular, you can work with the tables in this way:

create, copy and delete sheets
export, import and print sheets
manage the history of changes
stylize the cell contents
sort, filter and block the cell contents
add links, pictures, charts and comments into cells and above them
manage columns and rows:
- add and remove
- hide and show
- resize and freeze
apply a wide range of formulas and much more.

As you can see, the widget's features are large enough and its abilities are not inferior to its desktop counterpart. To read more information about the SpreadSheet capabilities visit the related article.

The Widget Interface

You can work with the widget via a convenient and user-friendly interface. If you are an experienced Excel user, you won't have any difficulties with understanding the component UI. Visually, it consists of 3 parts:

Toolbar
Workspace
Bottom bar.

The Toolbar contains different controls divided by functional groups. With their help, you can manage the sheet data. Depending on the widget settings, the controls may differ. But we'll talk about it later.

On the workspace of the component, you can look through the spreadsheets you will work with. Using the toolbar controls, you can manage table data and change them on your own.

And at the bottom part of the application, there is a Bottom bar where you can navigate through the sheets, as well as add, delete and rename them.

Now after a brief overview of the widget functionality and interface, let's proceed to how to actually create one with a basic configuration.

How to Create the Widget with Basic Functionality

Webix SpreadSheet is one of the most advanced tools of the Webix library. The widget is distributed under the Pro version of the library but isn't included in it. You can purchase this component as a part of the license package. Learn more on the licensing page.

If you want to check all the advantages and flexibility of working with SpreadSheet (and not only), download the trial Pro version of the library. It includes all complex widgets and is available for free for 30 days.

Now let's see how to include the widget on the page and run it with basic functionality. And this is done in a clear and straightforward way. Considering that SpreadSheet is based on the Webix components, you should first include the library sources. And after that, you need to specify the corresponding links to the .js and .css files of the widget itself. In code it looks like this:

<head>
  <!-- Webix Library -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- SpreadSheet -->
  <script type="text/javascript" src="codebase/spreadsheet.js"></script>
  <link rel="stylesheet" href="codebase/spreadsheet.css" type="text/css">
</head>

After including the required sources, you can initialize the widget with a few lines of code. To do this, you should call the webix.ui() constructor, passing it an object with the required configuration.

To make sure that the application code will start executing after the HTML page is fully loaded, put the constructor into the webix.ready(function(){ /* constructor */ }) method. In the code it looks like this:

<body>
  <script>
    webix.ready(function(){
      <!-- SpreadSheet Constructor -->
      webix.ui({
        view: "spreadsheet", url: "some_data_link"
      });
    });
  </script>
</body>

Now you can use the basic features of the SpreadSheet widget. And it is worth mentioning here that you have the ability to customize the component functionality. For instance, you can add the necessary tools or remove unnecessary ones. In the browser you will see the following result:

How to Configure SpreadSheet

The SpreadSheet widget is a kind of constructor. Its peculiarity lies in the fact that it consists of many separate Webix components. Each of them has its own properties and methods. Using these API you can customize one or another element of the interface and its behavior (for example, controls on the toolbar).

Besides, the component itself has a rich set of its own properties and methods that allow you to customize it and manage its behavior. And it is worth clarifying here that you need to use a declarative approach to configure the Webix widgets. It means that all parameters are specified using a most convenient JSON syntax. All you have to do is to set the required properties to corresponding values.

The widget itself is declared via the view:"spreadsheet" expression. And in fact, this is quite enough for creating a SpreadSheet with basic functionality. Now let's see how to enhance its configuration.

Extra Toolbar

We can start with the app toolbar, which includes controls for managing tables. And it is worth noting here that in the default configuration, the toolbar displays only the minimal set of controls required for working with data.

If you want to use an extended set of controls, you need to specify the toolbar property and set it to the "full" value. In the code it looks like this:

{
  view: "spreadsheet",
  toolbar: "full"
}

In the browser you will see the following result:

There are also cases when the toolbar is not needed at all. To remove it, set the toolbar property to false.

Top Menu

Working with the extended toolbar may not always be convenient. It is also worth considering that if you have a small screen resolution, some of the controls can be hidden. To avoid this, you can add an additional menu at the top of the widget. To do this, you need to specify the menu property and set it to true in the component configuration. In the code it looks like this:

{
  view: "spreadsheet",
  menu: true
}

And in the browser you will see the following result:

Formula Editor

As it was mentioned above the widget's functionality is not inferior to its desktop elder brother. The proof of this is the full support of all formulas for working with data that are supported in Excel. You can find a complete list of formulas with a detailed description in this article.

And for working with formulas there is a special editor that is located under the toolbar. When you enter the function name, the editor will show a list of possible options that correspond to the entered characters. Besides, when you click on a cell the formula is applied to, the widget will highlight all cells that are within the range of this formula.

Optionally, you can hide this editor and math support will remain the same. To do this, you should set the liveEditor property to false in the widget constructor. In the code it looks like this:

{
  view: "spreadsheet",
  liveEditor: false
}

Bottom Bar

If you are supposed to work with several files at once, you should activate the bottom bar of the widget, which is hidden by default. With its help you can create new sheets as well as navigate through existing ones.

If you want to show this panel, set the bottombar property to true. In the code it looks like this:

{
  view: "spreadsheet",
  bottombar: true
}

In the browser, you will see the following result:

It should also be borne in mind that if you are using the extended version of the toolbar (toolbar:"full"), the bottom bar will be displayed by default. To hide it, set the bottombar property to false.

ReadOnly Mode

Sometimes there are situations where you need to use the widget only to display certain information. For such cases, the widget provides a readonly mode.

To enable this feature, set the readonly property to true. Now the widget will display only the workspace with the current sheet (table). All additional panels will be hidden. In the code it looks like this:

{
  view: "spreadsheet",
  readonly: true
}

In the browser you will see the following result:

Loading Data

In the widget configuration, you can specify the data to be displayed when initial loading. Depending on the data is located (on the client- or server-side), you should use either the data or url properties or the parse() or load() methods. Let's take a closer look at each of these options.

Parsing Client-Side Data

By default, the widget accepts data in JSON format. If the data is on the client-side, you can either set the data property to the object with data or parse the same data through the parse() method.

The data object will contain certain fields in which you can describe corresponding parameters, namely:

data (cell data)
styles (cell styling)
spans (cell fusion)
table (table parameters)
and other fields.

You can find a complete list of sheet settings in this article. The object with settings may look something like this:

const sheet_data = {
    "styles": [
        ["wss1",";;center;;;;;;;;;"],
        ...
    ],
    "sizes": [
        [0,1,125],
    ],
    "data": [
        [1,1,"Report - July 2016","wss1", "string"],
        [1,2,"","wss2"],
        ...
    ],
    "spans": [
        [1,1,5,1]
    ]
};

You can set the data property to this object in the widget constructor:

{
  view: "spreadsheet",
  data: sheet_data
}

or pass it to the parse() method as a parameter:

{
   view: "spreadsheet",
   id: "ssheet"
}
$$("ssheet").parse(sheet_data);

You can see a live demo here.

Loading Server-Side Data

If you need to load the remote data from the server, you can set the url property to the corresponding path the desired file is located:

{
  view: "spreadsheet",
  url: "sheet_data.js"
}

or load the data via the load() method, passing the corresponding link as a parameter:

{
  view: "spreadsheet",
  id: "ssheet"
}
$$("ssheet").load("sheet_data.js");

And it should be borne in mind here that the widget can handle data in various formats. For example, if you need to load data in CSV format, you should set the datatype property to the required format:

{
  view: "spreadsheet",
  id: "ssheet",
  url: "sheet_data.csv",
  datatype: "csv"
}

or pass the format to the load() method as the second parameter:

$$("ssheet").load("sheet_data.csv", "csv");

You can see a live demo here.

Loading data in Excel format requires special attention. Besides the data type and file path, you need to specify the binary-> proxy object through which the data will be loaded. In the code it looks like this:

{
  view: "spreadsheet",
  id: "ssheet",
  url: "binary->sheet_data.xlsx",
  datatype: "excel"
}

or in the same way via the load() method:

$$("ssheet").load("binary->sheet_data.xlsx", "excel");

You can see a live demo here.

Saving Data

The SpreadSheet widget is a fully client-side app. But it also has a special API for working with a server. I have mentioned some of them in the previous section about loading server data.

In addition, you have the ability to specify the path to the server script the AJAX requests will be sent to (via the POST method). It will happen when you make any sheet changes.

To do this, you should set the all property to the server script path in the object of the save property:

{
  view: "spreadsheet",
  url: "server/get_data.php", 
  save: {
    all: "/server"
  }
}

You can see a live demo here.

Now, if you change the sheet, all its data (including the state of the widget) will be automatically sent to the server. And for cases when you need to configure sending requests on certain actions with sheets (adding, renaming, updating or deleting data), you can set RESTful saving.

To track the sheet changes, you should subscribe to the onChange event and set it to the handler. This can be done in the on property object. Inside this handler, you can set up separate requests for each operation that will be sent automatically when some operation will be executed. The widget code with the event handler will look like this:

const server_url = "server/get_data.php"

{
  view: "spreadsheet",
  url: server_url,
  on:{
      onChange: function(mode, name, oldName){
        switch (mode) {
          case "update":
            webix.ajax().headers({ "Content-type" : "application/json" }).put(server_url+name, this.serialize());
            break;
          case "rename":
            webix.ajax().headers({ "Content-type" : "application/json" }).put(server_url+oldName, {name:name});
            break;
          case "remove":
            webix.ajax().headers({ "Content-type" : "application/json" }).del(server_url+name);
            break;
          case "insert":
            webix.ajax().headers({ "Content-type" : "application/json" }).post(server_url+name);
        }
      }
  } 
}

You can see a live demo here.

This is how you can configure the information saving on the server. It is worth mentioning that the widget is distributed along with Node.js backend. You can easily adapt it to any database you need.

Localization

One of the significant advantages of all Webix widgets is the ease of localization. And it is worth clarifying here that by default all widget labels are specified in English (the en-US locale). But you can modify the current locale or create a custom one. Let's take a look at both of these options.

How to Change Current Locale

All translations of the interface elements of the current locale are stored in the webix.i18n.spreadsheet object. You can localize the following interface elements:

all labels on the toolbar
tooltips
all menu items.

The locale object has the following structure:

export default {
  labels: {
    "common": "Common",
    "currency": "Currency",
    ...,
  },
  tooltips: {
    "color": "Font color",
    "background" : "Background color",
    ...
  },
  menus: {
    "remove-sheet": "Remove sheet",
    "rename-sheet": "Rename sheet",
    ...
  },
  table: {
    "math-error": "#ERROR!",
    "Math-ref-error": "#REF!",
    ...
  },
  liveEditor: {
    "edit": "Edit:"
  },
  formats: {
    "dateFormat": "mm/dd/yyyy",
    "timeFormat": "hh:mm AM/PM",
    ...
  }
};

All you need to do is replace the current values with your custom translation, and the widget will change them in the interface. As you can see, everything is pretty simple here.

How to Create Custom Locale

In the second approach, you should create a custom locale with an identical structure and apply it to the entire widget. To do this, you need to add the corresponding translation to the webix.i18n.locales[localeN].spreadsheet object and specify it some name:

webix.i18n.locales["en-RU"].spreadsheet = {
  "labels": {
    "common": "General",
    "currency": "Currency",
    ...
  },
  "tooltips": {
    "color": "Text color",
    "background": "Background color",
    ...
  }, ...
};

To apply the new locale, you should call the setLocale() method of the webix.i18n object, passing it the custom locale name.

webix.i18n.setLocale("ru-RU");

You can see a live demo here.

This method is more preferable because you have an ability to switch to the original locale at any time.

It is also worth mentioning here that the library has a special platform where users can post their translations. You can check them out in this GitHub repository.

You can also take part in the widget localization and upload your custom locale to the corresponding repository.

Customization

If the basic settings are not enough for you, you have the ability to customize the widget interface and functionality. And for this, you need to dig a little in the widget code. Let's look at some related samples of customizing the interface and functionality.

How to Add Extra Toolbar

For instance, you can put any components between the toolbar and workspace, as well as customize their behavior. To do this, you need to use the subbar property. You may set it to either a specific component or a layout with several components.

For clarity, let's add an extra toolbar with buttons for exporting data in various formats (Excel, PNG, PDF and CSV). To make it more convenient, you can save the toolbar constructor into a separate variable. You should set the subbar property to this variable in the widget configuration. In the code it looks like this:

const extra_toolbar = {
  view: "toolbar", css: "webix_ssheet_toolbar", 
  elements:[
    { view: "button", value: "Export to Excel", click: 
 function(){
      webix.toExcel("ssheet");
    }},
    { view: "button", value: "Export to PNG", click: function(){
      webix.toPNG("ssheet");
    }},
    { view: "button", value: "Export to PDF", click: function(){
      webix.toPDF("ssheet", {autowidth: true});
    }},
    { view: "button", value: "Export to CSV", click: function(){
      webix.toCSV("ssheet");
    }},
    {}
  ]
};

webix.ui({
  id: "ssheet",
  view: "spreadsheet",
  subbar: extra_toolbar
});

You can see a live demo here.

As you have already noticed, the library provides special methods for exporting data, which takes only the widget's ID. The data will be downloaded in the required format after clicking on the corresponding button on the extra toolbar. In the browser, you will see the following result:

How to Customize Top Menu

The widget configuration allows you to customize its top menu. For clarity, let's see how to remove some options and add new ones.

First, you need to create an array with options of the top menu. For convenience, you can store it into a separate variable:

const custom_menu = [
  { id: "file", submenu: [
    {id: "excel-import"},
    {id: "excel-export"}
  ]},
  { id: "custom-options", 
    value: "<span class='custom_option'>Custom Options</span>", 
    submenu: [
      {id: "option-a", value: "Option A"},
      {id: "option-b", value: "Option B"},
      {id: "option-c", value: "Option C"}
    ]
  }
];

In the code above, the first element of the array defines the built-in File option. Its drop-down list of options are responsible for importing and exporting data in Excel format. And the second element is a Custom Options item with a drop-down list of arbitrary options.

Now you should set the menu property to the object which is stored in a variable:

webix.ui({
  view: "spreadsheet",
  menu: custom_menu
});

And in the browser you will see the following result:

How to Customize Main Toolbar

The widget toolbar consists of blocks, inside which there are buttons grouped by certain functions. You can manage these blocks (hide, show or add new ones), as well as customize the buttons inside the blocks.

To modify the toolbar blocks, you need to use the buttons property, which refers to the buttons collection. This collection contains block names as keys and arrays with button names as values. For example, you can customize the current toolbar and include only 2 built-in blocks, as well as add a new block with a custom button. In the code it looks like this:

{
    view: "spreadsheet",
    buttons: {
        "undo-redo": ["undo", "redo"],
"format": ["format"],
        "Extra Block": [
        { view: "button", width: 150, label: "Custom Button" }
       ]
    }
}

And in the browser you will see the following result:

To define a custom toolbar, you need to use the toolbar property (which refers to the toolbar collection) to the object with the corresponding settings. Inside this object, you should form your custom toolbar structure (according to the principle of the layout building), set its sizes, indents, styles, and others. Read more about the toolbar customizing in the related article.

You can see a live demo here.

Conclusion

In this article, you learned about the SpreadSheet widget and its main features. In fact, this publication covers only the tip of the iceberg of all the possibilities that the tool has. As you can see, it is a very functional and flexible component. You can easily set, customize and integrate it with any framework or library you need. You also have the ability to set up interaction with the backend. To read more information about the possibilities and customization follow the widget documentation.

Webix File Manager. A worthy web counterpart of a desktop application

Serhii Pylypchuk — Wed, 18 Aug 2021 12:02:36 +0000

The tendencies of recent years show that the age of desktop apps, in their classical sense, is running out. Just as at one time floppies were superseded by CD/DVDs, and the last ones were replaced by flashcards and cloud technologies, so the desktop programs will gradually be replaced by their more modern and practical web counterparts.

If you develop your own web application that implies working with files, then you will need a good file manager. And here you have to decide between two reasonable options:

either create a widget from scratch, which in any case will require a lot of your time and resources
or use a ready-made solution and just integrate it.

In this article, the proponents of the first option, for whom the development of an effective file system is not a difficult task, may familiarize themselves with an unconventional solution to the issue by other developers.

The adherents of the second option, for whom the efficiency and result are more precious than the thorny path of achieving it, will open up for themselves a very useful and flexible tool. Further, we will talk about a complex widget for managing files from the Webix team. Let's see what they offer to us.

What is Webix File Manager

Webix File Manager is a JavaScript file system management solution. The widget is based on the components of the Webix UI library and the Webix Jet microframework. Besides the interface for working with file systems, it includes the ready-made Node JS and Golang backend solutions, as well as a service for previewing text files and pictures. For such a significant bonus, we can give the widget a big plus.

The File Manager functionality is not inferior to the related desktop app. In particular, the widget allows you to do the following:

create new files/folders
upload local files
download files
edit text files using a special editor
play audio and video files using a built-in player
move, sort, rename, cut, paste, copy and delete files/folders.

The above-mentioned functionality is implemented through the convenient and stylish interface that displays the structure of files and folders received from the server. Visually the widget consist of 3 parts:

Toolbar
Left panel
Right panel.

The left panel of the application displays the main directory tree. Here you can look through the tree structure of folders, as well as create or upload new folders and files using the button at the very top of the panel.

If you select any folder in the directory tree, its content will be displayed on the right panel. There you can work with files and folders via the context menu, sort and move them, play audio and video files, edit text files, as well as navigate through the directory tree using the navigation bar. Besides, you can establish a convenient display mode.

It is worth noting here that the widget allows you to display the folder content as a table and cards. But if you're feeling nostalgic for the classic Total Commander interface, you can use the special old-school mode, which splits the right panel into two separate parts. This is very comfortable when you need to work with two directories at the same time. There are corresponding buttons on the Toolbar to switch between these display modes.

Among other things, you can search for the items you need via the search bar and apply a preview mode of a specific file using the related control. Both of them are also on the Toolbar.

But the most important thing is that you can customize the basic functionality and interface, change it, add your own, or remove those features and components that are not needed. We can give the widget one more point for its flexibility and customization.

How to Create the Widget with Basic Functionality

Like other complex widgets, File Manager is an advanced extension of the Webix UI library. It is distributed with the Pro version of the library but is not included in it. The component can be purchased as a part of one of the license packages.

But you can download the trial Pro version with all complex widgets and use it for free for 30 days. This will allow you to try in practice all the advantages and flexibility of working with the File Manager and decide whether it suits you or not. As for me, that is a rhetorical question.

Since the File Manager is a library extension, for using it you need first connect the Webix resources. After the library is connected, you have to specify the corresponding .js and .css files of the widget itself.

<head>
  <!-- Webix Library -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- File Manager Widget -->
  <script type="text/javascript" src="codebase/filemanager.js"></script>
  <link rel="stylesheet" href="codebase/filemanager.css" type="text/css">
</head>

Next, you should call the widget' constructor wrapped into the webix.ready(…) method, to start executing the code only after the page is fully loaded.

<body>
    <script>
      webix.ready(function(){
        <!-- File Manager Constructor -->
         webix.ui({
            view:"filemanager", url:"some_backend"
         });
       });
   </script>
</body>

As you can see, to connect the file manager all you need to do is write a few lines of code. Now you can manage the files and folders via the user-friendly interface.

How to Configure the Widget

File Manager is a complex widget. It is like a constructor that consists of many separate Webix components. Each of them has its own API, with which you can set its view and behavior. In addition to the nested component settings, the widget includes its own configuration.

It is worth clarifying here that for configuring the widget plain and convenient JSON syntax is used. All you need to do is to specify the necessary values for the related properties.

When configuring the app, you need to provide a link to the server script (your own or built-in), to load the data for visualizing the file system. For this, the widget has the url property. It is worth noting here that the widget won't download all the data at once, but only the main directory and the initially opened folder. The content of other directories will be loaded as needed (upon opening) and cached.

{
  view:"filemanager", 
  url:"your_backend" // your server script
}

If you do not need to edit text files and play audio/video files, you can just disable the built-in editor and player. For this, you have to use the corresponding editor and player properties.

{
  view:"filemanager", 
  url:"your_backend", 
  editor:false, // disable built-in editor
  player:false // disable built-in player
}

By default, files and folders are displayed as a table. But you can display the current folder content as cards using the mode property.

{
  view:"filemanager", 
  url:"your_backend", 
  id:"fm", // ID for access the widget
  mode:"cards" // default display mode
}

Besides the main parameters, the widget has reactive properties. They store the application state and allow changing it dynamically. Here are some of them:

mode (string) - stores the current display mode
path (string) - stores the path to the currently open folder.

For working with app state the library provides the getState() method. With its help, you can get an object with reactive properties and change its values if needed.

// returns an object with the current state of the File manager
const state = $$("fm").getState();

Now you can change the default “cards” mode to the “grid” mode for displaying the files and folders as a table.

// switch the widget to the "grid" mode
state.mode = "grid";

Now you know how to configure the widget and manage its state.

How to Localize the Widget

Localization is a nice bonus provided by the file manager. By default, all widget labels are displayed in English. But you can easily add your own and switch between them if needed.

To translate labels into the desired language, you can create your own locale and specify the necessary translations inside of its object.

fileManager.locales.custom_ru = {
    Files:"Files",
    "Add New":"Add new",
    "My Files":"My files",
    ...
};

When the custom locale is ready, you can apply it to the entire application. For this, you need to use the locale property. In the object of this property, you can set your locale value to the lang property.

webix.ui ({
    view:"filemanager",
    url:"your_backend",
    locale:{
      lang:"custom_ru"
    }
});

But that's not all. You can also create several locales and switch between them dynamically. To do this, you need to access the built-in locale service using the getService() method, and call the setLang() method for it. The method takes the name of the required locale as a parameter.

const locale = $$("fm").getService("locale");
locale.setLang(/* desired locale */); // ru, en, ua …

That's all the magic. It should be borne in mind that Webix developers don’t provide ready-made files with locales. But the library has a special platform where users can share their locales. These translations can be found on the webix-hub page.

You can also share your work by pushing it to the related repository on this platform. And we can give the widget one more huge plus for the localization and its simplicity.

How to Customize File Manager

If you are not quite satisfied with the abilities of the basic setting, you can customize the widget on your own (change some part of the interface or add/remove any functionality). But for this, you need to understand how the app code works.

The widget structure is built as an SPA application based on the MV* pattern of the Webix Jet framework. The app interface (View) is separated from its business logic (Model). Each element of the interface is an independent component of the Webix library (button, datatable, toolbar, and others). Significant parts of the interface (toolbar, left panel, and others), consisting of the components mentioned above, are stored in the separated classes inherited from the JetView class. And the logic (model) is also stored separately in classes named “services”.

To change the widget interface and functionality, you have to be ready to dig a little in its code. And for this, you should understand at least the main aspects of working with the Webix Jet framework. If you are familiar with JavaScript, you won’t have much difficulty.

Read the "Webix Jet framework through the eyes of a freshman" article to find out the basic principles of working with the framework or refer to the documentation for more detailed information.

Since you will need to learn a new framework, we can give the widget a small minus for this little complication. But in any case, such knowledge will not be superfluous and only expand the range of your competencies.

The Interface Customization

Now let's get down to practice. As I mentioned above, each element of the interface is an independent component, and each significant part of the interface is a separate class consisting of these components. With this in mind, you can easily set, customize, add new, or even remove that part of the interface (or its component) you don’t need.

Let's say you want to remove the buttons for switching display modes placed on the Toolbar.

First, you need to create a new class by inheriting it from the class that stores the toolbar interface. Then, you should hide the buttons using the hide() method. It should be borne in mind here that the developers don’t recommend removing "unnecessary" components. They can be related to the internal logic of the app and their removal may lead to the error.

All manipulations with the interface need to be done inside the init() method. It is inherited from the JetView class and is responsible for displaying items when initializing.

class CustomTopBar extends fileManager.views.topbar {
  init(){
    // default logic
    super.init();
    // removing a component can lead to the errors
    // hiding a component is more safety
    this.$$("modes").hide();
  }
}

Next, you need to replace the parent class you inherited from with a new one instead. This can be done using the override property in the widget constructor:

{
    view:"filemanager",
    ...,
    mode:"cards", // display mode by default
    override:new Map([[fileManager.views.topbar, CustomTopBar]])
}

This is how you can change the widget interface. In my opinion, there is nothing supernatural here.

The Logic Customization

The Webix Jet services are separate classes, which consist of methods for controlling the widget logic. Unlike the View classes of the interface, the service methods are available for the entire application. Such a method can be called both by the interface itself and by other services. You can customize any service by changing its methods or adding new ones.

Let's assume that you have your own server-side logic, where the URL and API for working with data are different from the built-in ones. In this case, you need to make some changes to a special Backend service.

By default, the request for uploading files of the selected folder includes the files segment and looks like this:

https://docs.webix.com/filemanager-backend/files?Id=%2FNewFolder

The value of the id parameter in the query string is the id of the folder in which you want to load the data.

But since you have your own backend, the segment may differ from the built-in one and will look something like this:

https://docs.webix.com/filemanager-backend/custom_segment?Id=%2FNewFolder

To change this segment, you should slightly modify the files() method of the Backend service.

First, you need to create a new class by inheriting it from the class of the Backend service. Then you should change the files() method by passing to it the desired segment.

class CustomBackendService extends filemanager.services.backend{
   files(id){
    id = id || "/";
    return this._files(this.url("custom_segment"), {id});
   }
}

After that, as in the case with the interface, you need to replace the parent class you inherited from with a new one. This can be done using the well-known override property in the widget constructor:

webix.ui({
    view:"filemanager",
    url:"your_backend",
    override:new Map([[filemanager.services.backend, CustomBackendService]])
});

Redefining the inner classes in this way, you can change the widget interface and logic on your own. You can find out more information with related samples on the how-to page.

Conclusion

In this article, I have introduced you to the File Manager widget and its main features. As you can see, it is a very flexible and functional component. You can set and customize it as well as integrate it into any framework or library you prefer.

It is also worth mentioning here that the widget is distributed along with the more advanced Document Manager solution. Both widgets are very similar in design and capabilities, but the latter one has several additional benefits. For example, the document manager allows you to do the following:

comment on the documents
mark the documents as favorites
view the history of recently opened documents
share the documents with others
remove the documents to the trash.

If you prefer to use more advanced functionality, you can choose the Document Manager widget. But if this functionality is not required, you may give preference to the simplified File Manager widget. In any case, the final word is yours.

How to Create Forms with Webix JavaScript

Serhii Pylypchuk — Thu, 12 Aug 2021 08:57:50 +0000

The daily routine of a typical programmer consists of monotonous keystrokes and coffee breaks. A good programmer can reach the desired result with fewer keystrokes. And I don't mean the "Ctrl+C / Ctrl+V" combination, as you might think :) In this article, I want to tell you how to save precious time and nerves if you need to create a beautiful and functional form.

There are many libraries that provide a large number of features for working with forms. But today we will consider only one of the most convenient and multifunctional tools for building app interfaces of any complexity. It is about the Webix library and its capabilities.

To prove that these are not empty words, we will create a small app for bookselling and see how to implement an order form using Webix components.

You can find the full source code and live demo here.

Webix and Its Capabilities

Webix UI is a JavaScript library that allows you to create a responsive design without worrying about the app's performance. The range of possibilities is represented by UI components of varying complexity. It can be a simple button and a complex solution. Each widget includes a whole set of methods and properties for flexible configuring and controlling. Besides, the library has extra tools. For example, event handling, methods of working with data, interaction with the server, styling themes and much more. You can find out more information about capabilities in the documentation. Now it is time to move on to the practice.

Main Preparations

In order to use the Webix library, we need to include it in the main index.html file. It is worth mentioning here that the library is distributed in 2 versions: the basic GPL and extended Pro version. The GPL version is free and provides a wide set of features that cover 97.26% of our day-to-day needs. But for working with forms, which are the main topic of this article, we will need some special features of the advanced version. I will mention them in the process. Based on this, we will use the extended Pro trial version to get the most impact.

To get the trial version of the library, we need to visit the download page, enter the necessary data and get a link for downloading the coveted archive.

The archive includes the webix/codebase/ folder with two sacred files, namely: webix.js and webix.css. In order for the Webix magic to start working, we need to move this folder into the root of our project and include the library source files in the index.html file:

It's worth noting that these files are also available via the CDN at the following links:

We'll use local files, as they work faster and do not need Internet access (sometimes it happens). The index.html file looks like this:

We have created a basic index.html file and included all the necessary tools. Let's start with making an overview of our app.

Application Overview

We have a small bookselling app. It consists of a toolbar and two replaceable modules, namely:

module with a catalog of books
module with a book description and order form.

The module with the catalog consists of small blocks, 2 items in one row. Each block contains a short description of the product and button to order. It is worth clarifying here that we use the dataview widget for creating this module. In the browser, we will see the following result:

When clicking on the "Buy now" button, the user will see the module with a detailed description of the product. For its creation we use the template widget. Next to the product description we will place the module with our form, which this article is devoted to. In the browser, we will see the following result:

And now our task is to add a module with a form, where the user can enter all the necessary data for ordering. As you may know, the purpose of any form is collecting information from users. In our case, we are going to collect the following data:

information about the order and its delivery
information about the user
information about the payment.

Each form should contain input fields and various controls, namely: checkboxes, radiobuttons, selectors, buttons and much more. Considering the data we need to collect, our form will be large enough.

If we don't want to scare off the user with a large number of fields and controls, let's divide the form into semantic groups mentioned above. Each group will deal with each particular order step. Group will be placed in a separate tab and the user will be able to navigate back and forth through them. There will be 3 tabs:

the first one includes an order form with the possibility to choose between the pick-up and delivery options. If the user chooses delivery, the app will display some extra fields for entering the desired delivery address
the second one includes a form for user's personal data
the last tab includes a form to collect information about the user's credit card.

The interface of each form will be created in a separate file and saved to a variable. These variables will be used for building the layout in the index.html file.

Layout for Module with Forms

In this article, we will not dive into the details of building the entire app layout. If you would like to study this topic more deeply, read the Creating a Booking App with Webix UI article. You can also refer to the layout documentation. There you will find an exhaustive description of all properties and methods with corresponding samples.

Here we are interested in only the part of the layout containing the tabs with forms. These tabs will be switched by the user dynamically. For such cases, Webix provides a special multiview component. The needed modules (in our case it is the forms) have to be placed in the array of the cells property. When initial loading, the first element of this array will be displayed. To navigate between modules, we need to set them a unique ID. The code of layout looks like this:

We have created the layout with forms. Now let's get down to the forms directly. And we start with the order form.

Order Form

The order form will consist of two logical parts. The first part will contain the fields for information about the order itself, and the second one - about its delivery.

Initially, the form will be displayed only with the "Order Information" section:

The second one "Delivery Information" section will be hidden by default. We will show it only if the user selects the corresponding option of the radio control. The order form with 2 sections will look like this:

To navigate through the tabs with forms, we will use the "Back" and "Next" buttons. The former button returns us to the catalog of goods, and the latter displays the next form.

Now let's take a look at how to implement all of this in code.

To collect data from users, Webix provides a special form widget and a number of related controls. The form organisation is similar to the layout component. We can divide form into rows and columns, putting the necessary controls into the corresponding containers.

We create a form in the order_form.js file and save it to the order_form variable:

Here we also need to define the form layout mentioned above. For doing this, the widget has dedicated cols, rows and elements properties. The first two properties allow us to divide the component interface into columns and rows. The elements property we are going to use, allows us to place the form elements as rows. All we need to do is to place two sections with the desired fields into the array of this property. Now let's tackle these sections.

The "Order Information" Section

To group the form fields into sections, we use the fieldset component. The first section is "Order Information". It combines several inputs for collecting the order data. The name of this section is defined via the label property. The desired controls will be described in the object of the body property.

All the fields within this section will be arranged in rows. For this, we need to put them inside the array of the rows property. Now let's create these fields.

Special Field for Order Name

Let's start with the field that contains the order name. It doesn't need any data entry, since its value is set dynamically. To create this field, we can use 2 label components and arrange them as columns. The first component will contain the field name, and the second one will contain the name of the selected item (in our case it is the book title).

Now the section looks like this:

For the second label we need to set the name property to the order_name value. The unique name is required to access corresponding form elements. The reason is that the value of this control will be set and read dynamically via the form API. We also need to specify the unique names for other fields, the values of which we are going to set or read.

Control for Goods Amount Setting

In this section we need to give the user an ability to indicate the desired number of goods. To do this, let's use the special counter tool and specify its label and unique name. We can also define the min and max values via the dedicated min and max properties.

Now the section looks like this:

Input Field for Gift Card

Now let's create a field where the user can enter a gift card number. It is best to use the text control here. Besides the name and label, we can set a placeholder via the placeholder property and a special icon on the right part of the field via the clear property. The icon will appear when the user enters data in the field. When he clicks on this icon, the entered data will be deleted and the icon will disappear.

Now the section looks like this:

Special Field for Order Price

Next, we have a field for displaying the order price. The price, as well as the order name, is set dynamically via the form's API and changes depending on the selected parameters. Here we do the same as with the order name field: use 2 label components, place them as columns and set the name to the second one through its name property.

Now the section looks like this:

Control for Order Receiving Method

In this section, we have to implement the field where the user can select the receiving order method: pick-up or delivery. We can do this via the radio control with two options. The label of this control will be empty, because the radio button names are informative enough. The options data for the radio buttons are set via the options property.

Now let's make it so that if the user switches between the "Delivery" and "Pick-up" options, the "Delivery Information" section will be displayed or hidden correspondingly. Let me remind you that the "Pick-up" option is selected by default, and the section itself is hidden.

To handle the desired event, we need to specify the special on property into the constructor of the radio control. In the object of this property, we also need to specify the required event (in our case, it is onChange) and set to it the desired handler.

First, we get the current value of the radio control via its getValue() method. If the value is 1 (the "pick-up" option is selected), we will hide the "Delivery Information" section via its hide() method.

If the value is 2 (the "delivery" option is selected), we will display the "Delivery Information" section via its show() method.

The whole section looks like this:

The "Delivery Information" Section

Now let's move on to the "Delivery Information" section. It combines the fields for entering the delivery address. We create it in the same way as the previous "Order Information" section. As mentioned above, this section is hidden by default. To do this, we need to set its hidden property to true.

To ship the order, we need to get a delivery address. For this, we will create special fields in which the user can enter the following parameters:

country
address within the country:
- region
- city
- street and house
- zip code
desired shipping date
additional instructions.

Besides, we will provide the user with the ability to insure the delivery. And as a nice bonus, the user will be able to choose the desired packaging color, which I personally attach great importance to :) Now let's start implementing our plan.

Control for Country Selection

Let's make it so that the user doesn’t enter the country name but selects it from the drop-down list. For creating this field we can use the combo tool of the Webix library. In addition to the standard set of properties ( label, name, clear and placeholder ), we need to parse data for the drop-down list options. This is done via the options property. The data can be set either as an array with data (if they are on the client) or as the path to the data on the server. The data schema should be as follows:

[
    { "id":1, "value":"Canada" },
    { "id":2, "value":"United Kingdom" },
    ...
]

The library allows us to make the fields required for filling. To do this, we need to set the required property to true. As a result, we will see a special red marker at the top right corner of the label. Looking ahead, if the user leaves such a field empty and runs validation, it will turn in red and the data will not be sent.

Now the section looks like this:

Input Fields for Delivery Address

All the fields for addresses within the country will contain the same settings. To create them, we use the well-known text control and a set of basic properties: label, name, clear, placeholder and required.

Now the section looks like this:

Control for Shipping Date Selection

We can ask the user about the desired shipping date of the order. And here, instead of the usual input field, Webix provides us with a special datepicker widget. When the user clicks on it, the component will display a compact calendar, in which he can select the required shipping date. In addition to the basic properties mentioned above, we can specify the format for displaying the date via the format property. To read more about all capabilities of this widget, visit its documentation page.

Now the section looks like this:

Field for Additional Instructions

It is difficult to foresee the fields for each specific situation. Sometimes it happens that the user wants to specify the additional delivery instructions. For example, he wants the order to be left on the porch of the house or packed in additional packaging. Let's give the user such ability in our form.

The textarea component is the best decision for such an issue. If you have worked with plain HTML forms, you should be familiar with this element. In addition to the standard settings of this widget, we will set a fixed height via its height property.

Now the section looks like this:

Control for Applying Insurance

Let's provide our users with the ability to insure order delivery.

To apply for insurance, we will use the switch control. It is a toggle button that allows the user to switch between two opposite values (0 and 1). Besides the label and name, we can specify 2 inside labels for active and passive states. This can be done via its onLabel and offLabel properties.

Control for Сolor Selection

As mentioned above, we will give users the ability to choose the packaging color. For this, the Webix library provides several widgets, namely: colorpicker, colorselect and colorboard.

Since we only have 4 types of color packages, the best option would be the colorboard widget with a limited palette.

We can specify the palette colors via the palette property and the default color via the value property. Let's also set fixed dimensions for each palette box via the corresponding width and height properties, and remove the border around the component using its borderless property.

The whole section looks like this:

Buttons for Navigation

For the order form we have to implement one more important part. It is about buttons for switching to the next form and back to the trade list. For creating these buttons we will use the button component.

To apply built-in styling, we need to set the css property to the corresponding webix class. In our case, it is about the webix_secondary and webix_primary classes.

The button name is set via its label property. For completeness, it is worth noting that along with the label of each button, we will place a small arrow to indicate the button's purpose. The left arrow for going back (in this case, to the goods list), and the right one for going forward to the next form. To define built-in webix icons, we need to use dedicated css classes.

Both these buttons will be displayed as columns. For this, we need to put them into the array of the cols property.

The buttons look like this:

The order form interface is ready. Now we need to include the order_form.js file into index.html and put the order_form variable into the layout code. In the browser, we will see the following result:

User Form

After the user has entered the necessary information about the order, we need to get his personal data. It is required for identifying the user when he comes to pick up his order or receives it through the delivery service.

Let's create a separate form with fields for entering the following personal data:

first and last name
age
gender
contact information:
- email
- phone number.

The user form will look like this:

Let's see how to implement this in the code.

We create a form in the user_form.js file and save it to the user_form variable. After this we define the "User Information" section with the fields mentioned above.

Input Fields for First and Last Name

Now let's move on to the fields in which the user can enter its first and last name. To create them, we can use the well-known text control. As in the previous form, for these controls we also specify a standard set of properties, namely: label, name, placeholder, clear and required.

Now the section looks like this:

Controls for Age and Gender

Next, we have 2 optional fields. It is about a counter with which the user can indicate his age and radio buttons for choosing a gender.

Counter

To get the user age, we can use the counter control. We have already used it to define the number of goods.

The age of our customer should be in the range from 18 to 100. These parameters can be set via the min and max properties.

Radio

To get the user gender, we can use the radio control. We have also used it to select the method of the order receiving. The widget will consist of 2 options, namely: Male and Female.

Now the section looks like this:

Input Fields for Contact Information

To contact the user for clarifying any additional information and notifying about the order readiness or its dispatch, we need to get its contact information.

Let's create 2 fields in which the user can enter his email and phone number. For this, we use the text control and specify the set of standard properties (label, name, placeholder, clear and required).

A special emphasis should be placed on the phone number field. Here we can apply a special mask for entering a phone number. To do this we need to set the pattern property to the built-in webix.patterns.phone value. It is worth mentioning here that this is one of those features that are available only in the PRO version. In this article, you can find more information about the input field formatting.

The mask allows users to enter only 11 characters of the phone number, adds a "+" sign at the beginning of the number and encloses the telephone operator code in parentheses. Other characters will be ignored.

Let's give a little hint for filling this field and add a short message at the bottom of the input. For this, we can use the bottomLabel property.

The whole section looks like this:

For this form, we also need to add navigation buttons. Here we don't have to bother too much and just copy the similar code from the previous form. The differences will only be visible when we make these buttons workable.

The user form interface is ready. Now we just need to include the user_form.js file into index.html and put the user_form variable into layout code. In the browser, we will see the following result:

Payment form

After the user has entered personal data, we need to get his credit card information for paying the order through a special service.

Let's create a separate form for payment information and collect the following data:

card number
cardholder's name
expiration date
CVV code.

The payment form will look like this:

We create a form in the payment_form.js file and save it to the payment_form variable. After this, we define the "Payment Information" section with the fields mentioned above.

The first field is intended for the card number. Besides the standard properties of the text control (label, name, placeholder, clear and required), we also specify a built-in mask for entering the card number: pattern: webix.patterns.card. It means that the user can enter only 16 digits indicated on the front of his card. Other characters will be ignored. I would like to remind you that masks are only available in the Pro version.

Next, we need to create a field for entering the name of the cardholder. The text control of this field will also include the standard set of properties mentioned above.

The controls for selecting card expiration date deserve more attention. Here we can use 2 richselect components. When the user clicks on it, the widget will display a drop-down list with options. The data for these options are set via the options property.

Now we move on to the field for entering the CVV code. Here the user needs to enter 3 secret digits indicated on the back of the card. The text control of this field will also include a standard set of properties. Besides, we can set the type property to the password value, to define the type of the field. It will display asterisks instead of the entered data. We will also specify a custom mask via the pattern property. So now the user can enter only 3 digits of the CVV code.

Let's add some control for saving the entered data in the browser settings. If the user enters data and checks this control, he can reuse payment data the next time. For this, we use the checkbox control with the name and labelRight properties. The second property will display the label on the right part of the control

For this form, we also need to add corresponding buttons for going back and making the order. Here we just copy the similar code from the previous form and rename the second button to "Make order".

The payment form interface is ready. Now we just need to include the payment_form.js file into index.html and put the payment_form variable into layout code. In the browser, we will see the following result:

How to Get the App Working

Above we have described the layout and interface of our forms. But this is only half the way. Now let's get them to work. And for this, Webix has all the necessary tools.

The List of Goods

And we will start from the main page, where the list of goods is displayed. Each block on this page consists of a short description and the "Buy now" button.

When the user clicks on this button, we need to:

show the module with the order form
fill out the order form with the data of the selected book.

To implement the mentioned above, we need to handle the button click event. This can be done via the corresponding onClick property of the dataview widget. Inside the object of this property, we specify the css class of our button and set a handler to it as a value.

To fill out the order form fields, we can use its setValues() method and pass the object with the needed data as a parameter.

As you remember, we have set the name for all form fields via the name property. In the data object, we use these names as the keys and set them to the corresponding values.

If we pass only the data object to the method, it will remove all the form values and set new values specified in the object. In this case, the delivery information will also be cleared and the user will need to enter the address again.

To avoid this inconvenience, we can pass the true value to the method as the second parameter. So now the method will change only the values passed in the object.

After all the data manipulation, we can switch the multiview component to the next module using its show() method.

How to Calculate the Order Price

Now we need to calculate the order price and update it every time when the user changes the number of goods or applies the insurance control.

To listen to any change in the form fields, we need to use the on property. In the object of this property, we can specify the desired event and its handler.

So now we need to create this handler. And it will look like this:

Here we get an object with the form values via its getValues() method. It is worth noting that this object will include only the fields value with the name property.

The price variable stores the total goods price. It depends on the initial price (set in the hidden initial_price field) and the goods count.

Next, we need to check the insurance that can be applied in the "Delivery Information" section and will affect the order price. For this, we check the visibility of the "Delivery Information" section using the isVisible() method. It returns true if the section is visible and false if not.

If the section is visible, we need to check the state of the switch control (if enabled - value 1, if disabled - value 0) and generate the final order cost. If the insurance is applied, we will increase the cost by 20%.

When the final order price is ready, we need to update it in the corresponding Price field. To do this, we can use the setValues() method and update only the field we need.

Now the order price is updated dynamically when the user changes the number of goods and applies the insurance.

How to Navigate Between Forms

In each form of our application, we have created the "Back" and "Next" buttons to navigate between tabs.

The "Back" button will switch the multiview component to the previous module, and the "Next" button to the next one. To get the buttons to work, we need to catch the click events and set the appropriate handlers.

To handle the click event, the button control has a special click property.

In the handler of the "Back" button of the user form, we go back to the trade list via its show() method.

function goBackCustomHandler(){
    $$("trade_list").show(); //go to the trade list
}

In the same handlers of two other forms, we go to the previous module via the back() method of the multiview widget, which contains the tabs with the forms.

function goBackCustomHandler(){
    $$("form_multiview").back(); //go to the previous module
}

In the handler of the "Next" button, we also use the show() method to display the desired module, included in the multiview component.

function goNextCustomHandler(){
    $$("id_of_next_form").show();
}

In this way we will change tabs dynamically.

How to Validate the Forms

When the user clicks on the "Next" button and before switching to the next form, we need to validate the current form. This can be done in the "Next" button handler:

function goNextCustomHandler(){
    if($$("id_of_current_form").validate()){
        $$("id_of_next_form").show();
    }
}

Here we run the validation of the current form via its validate() method. It will return true if the validation is successful, and false if not. It should be noted here that the method checks only those form fields for which we applied the rules. Webix allows setting these rules for a separate field via its required and validate properties, and for the whole form via its rules property.

I hope you still remember that for the required fields we defined the required property. This property adds a red asterisk to the labels of the required fields. By default, such fields are validated by the built-in webix.rules.isNotEmpty rule and must be filled. If at least one of these fields is not filled in, the validation method will return an error and the fields will be highlighted in red.

The unvalidated order form will look like this:

If all the required fields of this form are filled in, or the "Delivery Information" section is hidden, the multiview will be switched to the next form.

Besides the required property with the default validation rule, we can apply other built-in rules or define our own. Let's set such rules for checking the email and phone number in the user form. And this can be done in the object of the rules property of the form.

To check the email address, we use the built-in webix.rules.isEmail rule, and for the phone number we use our own condition. Since the phone number consists of 11 digits, we will return an error if the entered value length is less than the required one.

To make the field validation more informative, let's add a hint that will be displayed if the validation method returns an error. For the required fields, we need to specify the invalidMessage property and set it to the error message.

The unvalidated user form will look like this:

In case the user navigates to the previous form and then comes back, let's clear the validation markers of the current form. To do this, we can use the clearValidation() method of the form and call it in the "Back" button handler.

How to Make Order

In the last payment form, we have created the "Make order" button instead of the "Next" button. This button runs validation and, if successful, collects data from all three forms, clears the current form and displays the main page with the goods list. The handler code will look like this:

In a real example, the collected data needs to be sent to the server for further processing. But this is the topic of another article.

Conclusion

You can find the full source code and live demo here.

In this article, we have detailed how to create forms using the Webix library, and now we know:

how to connect the library
how to describe UI components using JSON syntax
how to use component methods
how to set the event handlers.

And most importantly, we have learned how to work with Webix forms, apply various controls and use methods for managing the form (collecting and setting data, validation, etc.).

As you can see, the widget names, their methods and properties are intuitive and easy to use. In fact, this is only a small part of everything that the library can offer. For more detailed information, you can go to the documentation, which contains a detailed description of all the possibilities with examples.