Arcady Zherdev
3 July 2012

Version 2.1.3 – Event tools menu & importing tasks from MS Project

Before the weekend, we released the 2.1.3 version containing a few new goodies. For Ext Scheduler, there is a new […]

Before the weekend, we released the 2.1.3 version containing a few new goodies. For Ext Scheduler, there is a new EventTools plugin allowing for easy interaction with the rendered events. See it in action in this video:

 

For Ext Gantt, we added a new PHP + MySQL sample showing how to make a simple application with full CRUD implemented. We also updated the popular advanced example to enable a color picker column, and last but not least we also included a new sample showing how to import data from MS Project. Let’s take a peek under the hood of this new example.

Importing from MS Project

This has been a popular feature request ever since the Ext Gantt was created and we are very happy to be able to share this demo with you. With the help of the MPXJ library we built a Java based application for extracting data from .mpp files. The finished project is a standalone JAR package, and the only dependency is Java JDK 1.5+. Using this package, we get the ability to easily extract and import Tasks, Resources, Assignments and Dependencies from MS Project binary files. There are two different ways of importing data using our JAR package.

Command Line

The first option is to generate a file with JSON formatted data, which can be then loaded manually into the Gantt chart. To create a JSON file, we need to run this command in terminal/command line:

`java -jar gantt_msp.jar msp_file.mpp target_location.json`


Below is the sample structure of the generated json file :

{
    "resources": [
        {
            "Name": "New resource",
            "Id": 0
        }
    ],
    "dependencies": [
        {
            "Lag": "0.0",
            "Type": 2,
            "To": 3,
            "Id": 0,
            "From": 1
        }
    ],
    "tasks": {
        "Name": "Root Node",
        "children": [{
            "Name": "MSP1",
            "EndDate": "2012-05-28",
            "StartDate": "2012-05-10",
            "DurationUnit": "d",
            "Duration": "12.0",
            "PercentDone": 0,
            "children": [
                {
                    "Name": "Child Node",
                    "EndDate": "2012-05-11",
                    "StartDate": "2012-05-10",
                    "DurationUnit": "d",
                    "Duration": "2.0",
                    "PercentDone": 0,
                    "Id": 1,
                    "leaf": true
                }
            ],
            "Id": 0,
            "leaf": false
        }]
    },
    "assignments": [{
        "Units": 50,
        "ResourceId": 1,
        "Id": 4,
        "TaskId": 1
    }]
}

 

Importing data in-browser

The second, more advanced use case allows users to upload an MSP project file directly to the Gantt panel from their browser. In order to do this we have to add a file upload form which will send the .mpp file to a simple PHP script executing the JAR file. Below is a simple form that can be added to the Gantt panel toolbar:

Ext.define('MSProjectImportPanel', {
    extend : 'Ext.form.Panel',
    width: 300,
    frame: true,
    title: 'Load data from MS Project',
    bodyPadding: '10 10 0',

    defaults: {
        anchor: '100%',
        allowBlank: false,
        msgTarget: 'side',
        labelWidth: 50
    },
    initComponent : function() {
        this.addEvents('dataavailable');

        Ext.apply(this, {
            items: [{
                xtype: 'filefield',
                id: 'form-file',
                emptyText: 'Select mpp file',
                fieldLabel: 'File',
                name: 'mpp-file',
                buttonText: '',
                buttonConfig: {
                    iconCls: 'upload-icon'
                }
            }],
            buttons: [{
                text: 'Load',
                handler: function(){
                    var panel = this.up('form');
                    var form = panel.getForm();
                    if(form.isValid()){
                        form.submit({
                            url: 'msp-load.php',
                            waitMsg: 'Loading data...',
                            failure : function(form, action) {
                                msg('Failed', 'Please try agin.');
                            },
                            success: function(form, action) {
                                panel.fireEvent('dataavailable', 
                                                panel, 
                                                action.result.data);
                            }
                        });
                    }
                }
            },
            {
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }]
        });

        this.callParent(arguments);
    }
});

The interesting part here is the ‘Load’ button. After clicking it, our form is submitted to the server. When we receive the server response, each store used by the Gantt panel is loaded with the appropriate JSON data.

new MSProjectImportPanel({
    listeners : {
        dataavailable: function(form, data) {
            console.log('Success', 'Data from .mpp file loaded ');

            gantt.taskStore.setRootNode(data.tasks);
            gantt.resourceStore.loadData(data.resources);
            gantt.assignmentStore.loadData(data.assignments);
            gantt.dependencyStore.loadData(data.dependencies);

            gantt.expandAll();

            var span = gantt.taskStore.getTotalTimeSpan();
            if (span.start && span.end) {
                gantt.setTimeSpan(span.start, span.end);
            }
        }
    }
})

The last part of this example is the PHP upload script. It simply saves the received file in a temporary folder, and after that executes a command similar to the one presented previously using php’s `shell_exec` method. The JSON generated from the .mpp file is then returned with the response :

    $file_tmp  = $_FILES['mpp-file']['tmp_name'];
    $file_name = $_FILES['mpp-file']['name'];
    $file_size = $_FILES['mpp-file']['size'];

    if(is_uploaded_file($file_tmp)) {
        if(move_uploaded_file($file_tmp, "/tmp/$file_name")){
            $json = shell_exec('java -jar '.escapeshellarg("/path/to/MSPBryntumImport.jar").' '.escapeshellarg("/tmp/$file_name").' 1');
            echo '{success: true, data: '.$json.'}';
        } else {
            echo '{success: false}';
        }
    }  else{
        echo '{success: false}';
    }

Note: On Windows systems, the path where the file will be saved needs to be absolute and use backslashes:

if(move_uploaded_file($file_tmp, 'C:path_to_save_file$file_name')){

Remember, that in order to have this code running on your server, you need to provide absolute path to MSPBryntumImport.jar and the path to your temporary destination for uploaded files to be saved. You also need to make sure that the server user has privileges for both reading/creating files as well as running the JDK.

 

Summing it up…

Now it’s time for you to try out the online example, or download the 2.1.3 version from the Customer Zone and hopefully you will see all your Microsoft Project data visualized right in the browser. Feel free to leave a comment if you have find this useful or if you have any ideas on how to improve the this example.

 

 

References:

MPXJ Library
Java Download Page

Arcady Zherdev

Product updates Tips 'n tricks