Webix Gantt and Resource Management

Webix Gantt and Resource Management

JavaScript Gantt is one of the most advanced widgets in the Webix UI library. It is designed in the spirit of the best practice of project management and planning. The capabilities of the complex widget are significantly expanded with each new release. How could it be otherwise if the development vector of this tool is set by the users themselves?

In this article, I want to talk about such a long-awaited Gantt feature as Resource Management. Starting from version 8.2, Gantt is able to work with resources. You can assign resources to the tasks and unassign them, specify the number of the required units and many more useful features. Let’s figure out how everything works there.

The Main Purpose of Resources

If you have to deal with a more scaled projects that involves several people (or another resource), you will need the support of resources.

Let’s presume that you are the head of a company with a staff of several dozen employees. Many managers are racking their brains over how to distribute their workload most efficiently.

The new ability to work with resources in Gantt is the answer to this question. Now, you can assign the necessary resources (for example employees) to each project or task and manage them. You can also track the workload of each resource. This approach allows you to catch 2 birds with one stone. On the one hand, you control the deadline of the tasks and on the other hand, monitor the resource load.

It is important to clarify here that everything that you consider important for your project can be considered as a resource. It can be staff, equipment, money, materials and anything else.

Working with Resources

So now all assigned resources are displayed in a separate Assigned column of the “Task tree” panel. Opposite some tasks, you can find the assigned resources.

If you click on any task in the “Task tree” or “Gantt chart” panel, the widget will display the “Information panel” on the right part of the screen. This panel provides detailed information about the selected task including the full list of the assigned resources.

If you want to assign a new resource (or several resources) to the selected task or change the already assigned ones, click on the Edit button in the upper right corner of the “Information panel”. The widget will open a panel in the edit mode.

In the Assignments section, you can find a list of all assigned resources. Moreover, they are divided into separate categories. Opposite each resource, there is a control for setting the quantity and a special icon for canceling the assignment. Here you can reassign the required resource, specify its quantity (for example, the number of hours) or unassign it.

You can assign a new resource using the + Add assignment button that is under the resource list.

The Resources Load Control

It is worth noting that the “Resources diagram”, like the resources themselves, is not enabled by default. To display it, you need to set the resources and resourcesDiagram properties to true. It looks like this:

So now you can look through the detailed information about the load of assigned resources per day. The Resources diagram is displayed at the bottom part of the screen and consists of 3 parts:

  • Toolbar
  • Resources tree
  • Resources chart.

The Toolbar is at the top part of the panel and includes 2 radio buttons. With their help, you can switch between the “Hours per day” and “Tasks per day” display modes. We will talk about these modes a bit later.

On the left part of the panel there is the Resources tree. There you can find a tree-like table of all assigned resources grouped by categories. You can also sort the table data by clicking on the header of the corresponding column.

On the Resources chart, which is located on the right part of the panel, you can see the workload of each resource per day. Depending on the mode set, the chart displays either the number of assigned hours or the number of tasks to which the resource is assigned for a particular day.

“Hours per day” mode

Opposite each resource on the Resources chart, you can find the round markers. They indicate resource workload in hours on a particular day. The marker is green if the hours do not exceed the allowed limit (for example 8 hours). Otherwise, the marker will turn red.

“Tasks per day” mode

Opposite each resource on the Resources chart, you can find the round markers. They show a number of assigned tasks on a particular day. The marker is green if the overall duration of the tasks does not exceed the allowed limit (for example 8 hours). Otherwise, the marker will turn red.

Resources View Mode

It is also worth mentioning here that this mode is not supported by default. To enable it, you have to set the resources property to true and then set the display property to “resources”. It looks like this:

Outwardly, the Resources view mode is like the Task view mode, but their capabilities differ a bit. You can see this difference in the “Resources tree” and “Resources chart”.

The Resources tree displays resources and their groups, as well as the tasks they are assigned to. If the task has no assignments, it will move to the Unassigned group.

You can create a new task and assign it to the desired resource (or resources group) using the “+” icon opposite this resource.

The same icon in the header of the table allows you to create a new task and place it in the Unassigned group. If such a group does not exist, the widget will create it and add a new task there. It is worth mentioning that you cannot edit the resources group. They are generated automatically depending on the assigned tasks.

The Resources chart also differs from the corresponding panel in the regular mode. Resources and their groups are highlighted green here. At the same time, the tasks are highlighted in blue and located below the assigned resources.

You can drag the tasks along the timescale, resize them and manage the progress. All these changes are immediately reflected in their resources. Keep in mind that you can link the tasks only with each other.

Resources Data

- resourcesurl/resources — data for resources themselves

- categoriesurl/categories — data for the groups the resources belong to

- assignmentsurl/assignments — data for relations between resources and their tasks.

You can modify this data at your discretion, considering the fields the widget expects to receive. Let’s look at how to do this and what data we need to provide.

Data for Resources

  • id (string, number) — resource ID
  • name (string) — resource name
  • avatar (string) — path to resource avatar
  • category_id (string, number) — resource category ID
  • unit (string) — optional field. The unit this resource is measured in. If the field is not specified, its value will be taken from the resource category or defaults.

Data for Categories

Data for categories, as for resources, have to come as an array with JSON objects. Here you need to specify the following fields:

  • id (string, number) — category ID
  • name (string) — category name
  • unit (string) — optional field. The unit in which resources of this category are measured. By default, the resource is measured in hours (for example 8 hours).

Data for Assignments

  • id (string, number) — assignment ID
  • resource (string, number) — ID of the resource assignment belongs to
  • task (string, number) — ID of the task assignment is linked to
  • value (number) — value of the unit defined by the unit field in categories. It shows how much of this resource is required for a particular task.

Thus, you can set the required resources, depending on the specific of your work. For example, you can define office equipment or something else as a resource instead of staff. You can modify the desired categories, specify a unit to measure this or that resource in and set its default value. Gantt allows you to do this in the corresponding data objects and via the Helpers service.

Via the Helpers service you can display resource workload as a percentage, set part-time work for some resources and much more.


#JavaScript UI library for #cross-platform #web app development with 100+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com