Sidebar

Combodo

iTop Extensions

Gantt view

name:
Gantt view
description:
Displays elements inside a gantt chart
version:
1.2.1
release:
2024-08-30
itop-version-min:
2.7.0
code:
combodo-gantt-view
state:
stable
diffusion:
Client Store, iTop Hub
php-version-max:
PHP 8.3

This extension brings a new type of Dashlet, to display objects in a Gantt diagram. This Dashlet can be added to a Dashboard menu. For example to display Changes and sub-changes in a Gantt diagram. But it can also be used in a Dashboard attribute. For eg. in a tab of a UserRequest details, to display the Work Orders.

Where a Gantt view is the most appropriate of course is when you are doing Project Management, with depending Tasks and you need to quickly see the critical path.

Features

 Gantt dashlet zoomed

This dashlet allows you to display a set of objects in a Gantt diagram:

  • The scope of the displayed objects is configured with an OQL query
  • Each object is displayed as a row
    • left part of the row, provided selected fields such as the name, additional information, …
    • right part of the row displays a colored rectangle aligned to a timeline scale, using the start date and end date values of the object.
    • Within the rectangle a partial coloring shows the percentile of progress on that task,
  • Between tasks, dependencies are displayed using arrows
    • It highlights on demand the critical path(s)
  • The objects (for eg. the WorkOrders) can be grouped under a parent object umbrella (for eg a Change). And for each parent object, you can hide or display its sub-objets.

Revision History

Release Date Version Comments
2024-08-30 1.2.1 * N°5621 Fix typo in version checked
* N°5621 ace JS lib moved to NPM in iTop 3.2
* N°6894 - Update chinese translations thanks to @bdejin
* N°7140 - Remove use of jquery-ui-1.11.4 in gant view
* Fix FR missing translations
2023-07-13 1.1.3 * Add compatibility with iTop 3.1 (Remove deprecated file imports)
2022-04-05 1.1.2 * Quick fix for N°5038 - Can not use GanttDashlet with too many tickets
2021-12-27 1.1.1 * Add compatibility with iTop 3.0
2020-10-12 1.0.2 * Fix OQL optimization
2020-04-14 1.0.0 * First version

Limitations

This dashlet is read-only, you can neither edit the displayed objects, nor navigate to their details.

Only objects with a start and end date-time can be displayed in a Gantt

Requirements

Requires iTop 2.7

Installation

Use the Standard installation process for this extension.

Configuration

You don't need to set any configuration, for this dashlet to work.

But you may do it, to ease/unify its usage by defining in advanced for each class:

  • the fields which should be used by default,
  • the colors to use, based on an enumeration field values (usually status)

See advanced_configuration

Usage

While editing a Dashboard in iTop, choose the appropriate icon to create a Gantt:  Gantt icon

As usual, fill the required properties. The Selected class must have at least 2 dates

Property Type Usage
Title Optional free text Displayed above the dashlet
Query Mandatory An OQL query which must return a single class of objet
Depends on Optional Could be an External Key, a Hierarchical Key, a LinkedSet or a LinkedSetIndirect. Must be referencing the same class as the Query
Name Mandatory Logical identifier of the object, usually the name of friendlyname
Start date Mandatory A date-time field
End date Mandatory A date-time field
Percentage of completion Optional A percentile type of field, displayed as a sub-rectangle within the object rectangle
Colored by Automatic This field can be changed in Configuration only, in addition the various colors associated with each value can be define
Additional information 1 Optional Other field of the object, displayed on the left part of the chart
Additional information 2 Optional Other field of the object, displayed on the left part of the chart
Group by Optional An other class of object, also displayed in the Graph as the level above

 Gantt default properties

As long as the mandatory properties are not fully completed, you may get some error message displayed in the dashlet  Gantt error properties

If you set a Group by properties, then additional fields are required

Property Type Usage
Name Mandatory Logical identifier of the object, usually the name of friendlyname
Start date Mandatory A date-time field
End date Mandatory A date-time field
Percentage of completion Optional A percentile type of field, displayed as a sub-rectangle within the object rectangle
Colored by Automatic This field can be changed in Configuration only, in addition the various colors associated with each value can be define
Additional information 1 Optional Other field of the object, displayed on the left part of the chart
Additional information 2 Optional Other field of the object, displayed on the left part of the chart

In this example, we have customized a little the WorkOrder class, to add a parent relation  Gantt properties

Save the Dashboard and this is what you get:

 Gantt dashlet

As for most Dashlets, you can use it in a Dashboard Attribute, using :this→code as wildcard parameter in the OQL query.

Advanced Configuration

This configuration is not required, also it's the only way to define colors of your objects based on values of an enum (in general, you will set colors based on the status of the object, but it could be the priority or urgency or whatever). This configuration is also a mean to simplify the work of users designing a new Gantt dashlet in one of their dashboard, by presetting values.

For Combodo's customers, the best is not change this in the Module Parameters in teh ITSM Designer.

Default configuration defined in Module Parameter

Configuration
'combodo-gantt-view' => array (
    'default_colors' => array ('background_color' => '#159119', 'color' => '#fff', ),
    'classes' => array (
        'UserRequest' => array (
            'name' => 'title',
            'start_date' => 'start_date',
            'end_date' => 'close_date',
            'depends_on' => 'parent_request_id',
            'default_colors' => array ('background_color' => '#159119','color' => '#fff',),
            'colored_field' => 'status',
            'values' => array (
                'new' => array ('background_color' => '#1591FF', 'color' => '#fff',),
                'escalated_tto' => array ('backgroundcolor' => '#FF9F33', 'color' => '#fff',),
                'escalated_ttr' => array ('backgroundcolor' => '#FF9F88', 'color' => '#fff',),
                'assigned' => array ('backgroundcolor' => '#159119', 'color' => '#fff',),
                'waiting_for_approval' => array ('backgroundcolor' => '#4499F9', 'color' => '#fff',),
                'approved' => array ('backgroundcolor' => '#159119', 'color' => '#fff',),
                'rejected' => array ('backgroundcolor' => '#FF9F33', 'color' => '#fff',),
                'pending' => array ('backgroundcolor' => '#FF9F44', 'color' => '#fff',),
                'dispatched' => array ('backgroundcolor' => '#FF9F55', 'color' => '#fff',),
                'redispatched' => array ('backgroundcolor' => '#FF9F66', 'color' => '#fff',),
                'closed' => array ('backgroundcolor' => '#159180', 'color' => '#fff',),
                'resolved' => array ('backgroundcolor' => '#939325', 'color' => '#fff',),
            ),
        ),
    ),
),
If you want to customize it, copy the default and extend it with more classes, otherwise you will lose the default
Configuration Parameter
'combodo-gantt-view' => array (
    'default_colors' => array ('background_color' => '#159119', 'color' => '#fff', ),
    'classes' => array (
        'UserRequest' => array (
            'name' => 'title',
            // ....
            // Copy the above configuration or define your own
        ),
        'WorkOrder' => array (
                'name' => 'name',
                'start_date' => 'start_date',
                'end_date' => 'end_date',
                'colored_field' => 'status',
                'values' => array (
                    'open' => array ('background_color' => '#1591FF', 'color' => '#fff',),
                    'closed' => array ('backgroundcolor' => '#FF9F33', 'color' => '#fff',),
                ),
        ),
        'Change' =>  array (
                 'name' => 'title',
                 'start_date' => 'start_date',
                 'end_date' => 'end_date',
                 'depends_on' => 'parent_id',
                 //...
        ),
         'Incident' => array (
            //...
        ),
        //...
    ),
),
extensions/combodo-gantt-view.txt · Last modified: 2024/09/02 15:43 (external edit)
Back to top
Contact us