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
The basic configuration of the widget allows you to create, edit and delete different types of tasks. Moreover, you can link the tasks with each other, reschedule them and change their duration. This is quite enough if you use the tool for a simple planning or management of plain tasks.
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
First and foremost, the Resources are not enabled by default. To start using it, you need to enable a special module for working with resources. For this purpose, you have to set the resources property to true in the widget’s constructor. It looks like this:
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
The widget not only allows managing resources but also monitoring their workload. For this purpose, there is a special “Resource diagram” panel.
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
The “Hours per day” mode allows you to evaluate resources load per hour. In the Resources tree table, you can see an extra Hours column. Opposite each resource in this column, there is the number of assigned hours during the whole project. Opposite each category, there is the total number of hours of resources that belong to it.
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
If you switch to the “Tasks per day” mode, the Resources tree table will display the corresponding Tasks column. Opposite each resource in this column, you can see the number of tasks assigned to it during the whole project. Opposite each category in this column, there is the total number of tasks of resources that belong to this category.
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
The widget allows you to work with project resources via the “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
If you want to work with resources, you need to provide corresponding data for resources, categories and their assignments. After you enable this function (resources:true), Gantt will request the corresponding data at the following URLs:
- resources — url/resources — data for resources themselves
- categories — url/categories — data for the groups the resources belong to
- assignments — url/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
When Gantt loads data for resources, it expects to receive an array in which each element is a JSON object with the following fields:
- 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
Categories are intended to distribute resources to corresponding groups. In our case, we consider the staff of the company as resources. So it would be very convenient to divide the staff by departments. For example, we can provide categories for programmers, testers and other professions. When you assign the resource to the task, you can take into account these categories and select 4 resources from the programmer’s category and 2 resources from the QA.
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
The assignments express the relations between resources and tasks. You can provide a separate array of JSON objects for all assignments of the application. Each object includes the following fields:
- 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.
Conclusion
In this article, we covered such a useful feature of the Gantt widget as working with resources. We also learned how to manage resources and control their workload. Moreover, now we know how to enable and configure resources to some specific cases. Read more about working with resources on the documentation page.
