Displaying Microsoft Project Gantt schedule in a Flex or AIR application

ILOG Elixir 2.0 currently in beta (available here) is introducing a new custom Flex component in charge of rendering gantt task charts. The subject of this post is to see how you can read the output of an MS Project schedule and display it, using ILOG Elixir, into a Flex (or AIR) application.

The steps that are needed to achieve this are the following:

  1. Provide the MS Project data in XML format as it is far easier to read in Flex than binary format, this basically means saving your schedule into MS Project format.
  2. Add <ilog:TaskChart/> component to your Flex or AIR application.
  3. Read the XML into your application by any available Flex API you want to use (embedding, URLLoader etc…).
  4. Finally using E4X get information from the XML and populate the TaskChart with:
    • Activities information
    • Constraints information (which activity must be completed before which one)

For example you can see below a Flex application displaying Human Resources interview plan.xml (zipped) MS Project file:

The 4th step is of course the more interesting one. It is a bit tricky because, as usual with hierarchical data in Flex, the ILOG Elixir TaskChart expects the data to be already presented in its hierarchical form (i.e. for XML data, it excpects hierarchy children to be XML children of the parent node). However this is not the case of the MS Project XML format that presents all tasks in a flat way. That’s why reading MS Project involves our own IHierarchicalData implementation called MSProjectHierarchicalData. You can see all of this in the Flex Builder project available here. You will need ILOG Elixir 2.0 in order to compile it.

The code available above is just leveraging a subset of information contained in the MS Project file, but now that the basic things are here it will be easy to enhance it over time. For now the following MS Project properties are leveraged:

  • Start & Finish (for task layout)
  • Milestone & Summary (for task type)
  • Name (to display it in the DataGrid and GanttSheet)
  • Type (for constraint type)
  • OutlineLevel & OutlineNumber (for building the hierarchy)
  • Critical (critical tasks get a red border as you can see in above example)

The next step I envision would be to use the PercentComplete information in a custom ILOG Elixir task item renderer to display information about progress of the task. You can use this project as a starting point and leverage any information you want from the MS Project data to build a more complex display using the Task Chart component.

If you want to know learn more on the subject and you plan on being at MAX Europe next week, you might be interested in attending my session as I will enter into a bit more details about this example and some other nice examples of enhancing Flex and AIR displays using ILOG Elixir components.

Update:
The code in the Flex Builder project has been updated to fix 2 bugs in hierarchy computation and date parsing, thanks to ILOG internal application development team for eating our own dog food and finding the issues!

Bookmark: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Furl
  • Slashdot
  • StumbleUpon
  • Technorati

Tags: , , ,

3 Responses to “Displaying Microsoft Project Gantt schedule in a Flex or AIR application”

  1. James R. Says:

    We are interested in trying version 2.0. However the link does not appear to work for beta stage. What is the current status of v. 2.0? We are most interested in the calendar feature.

    -James

  2. Christophe Jolif Says:

    James, we currently have issues with our labs server that host the beta :-( Web admin has been pinged, can you retry from time to time as it should be back live soon. Thanks for your interest in ILOG Elixir.

  3. ILOG Elixir Blog » Blog Archive » Expand/Collapse on ILOG Elixir OrgChart Says:

    [...] examples that were developed for the conference. I started with the sample showing how to display Microsoft Project in Flex, then Damien posted his Google Calendar Reader in AIR, and today I release the ILOG Elixir OrgChart [...]

Leave a Reply