Tuesday, July 14, 2009

open-msp-viewer: Free XSLT utilities to render MS Project files as HTML web pages

IMPORTANT NOTICE

The old xslt-based open-msp-viewer project is no longer updated. Please find a new and much improved pure HTML version here at github: https://github.com/rpbouman/open-msp-viewer. Thank you for your interest.

Original post below

For my day job, I've been working on a few things that allow you to render Microsoft Project 2003 projects on a web page.

The code I wrote for my work is proprietary, and probably not directly useful for most people. But I figured that at least some of the work might be useful for others, so I wrote an open source version from scratch and I published that as the open-msp-viewer project on google code. If you like, check out the code and give it a spin.

It works by first saving the project in the MS Project XML format using standard MS Project functionality (Menu \ Save As..., then pick .XML) and then applying an XSLT transformation to generate HTML.

Currently, the project includes an xslt stylesheet that renders MS Project XML files as a Gantt chart. To give you a quick idea, Take a look at these screenshots:
msp1
and
msp2
The web gantt chart is rendered in a HTML 4.01 variant, CSS 2.1 and uses javascript to allow the user to collapse and/or expand individual tasks in the work breakdown structure. Currently, the HTML does not validate due to a few custom attributes I introduced to support dynamic collapsing/expanding the chart with javascript. In addition, the xslt transform process introduces the msp namespace into the result document, which results in a validation error

You can either associate the xslt stylesheet directly with the MS Project XML file, or you can use an external tool like xsltproc.

In the trunk/xml subdirectory, you can find a couple of sample projects in xml format that already have the stylesheet association. I have tested these in IE8, Chrome 2, Safari 4 and Firefox 3.5, and it works well in all these browsers. In the trunk/html directory, you'll find HTML output as created by xsltproc.

In the future, more xslt stylesheets may be added to support alternative views. Things that I think I will add soon are a resources list and a calendar view.

Enjoy, and let me know if you find a bug or would like to contribute.

28 comments:

Tiberiu Ghioca said...

Does it have any aplicability? Do you intend to develop it further?

I would also like to mention MOOS Project Viewer, a free Microsoft Project viewer:
http://www.ms-project-viewer.com/

rpbouman said...

Tiberiu,

it's a spin off from what I do at work. I do not have an urgent wishlist at the moment, but if I do, then yes I will develop it further.

Of course, if you have a cunning plan for world domination based on this tool, than I'd be willing to look into it :) It's always fun to go from the tinkering stage to something more useful.

RE. MOOS Project Viewer: thanks for mentioning that, it looks nice. from what I can tell this tool implements more views than just a gantt chart, and it is a real application.

On the downside, MOOSPV is "free" as in beer and only free for non-commercial use., whereas open-msp-viewer is GPL so you can modify to suit your needs, and you can make money on it and become a millonaire :p

Other differences (not necessarily bad, for either solution, just depends on what you need) are MOOSPV is an app, open-msp-viewer is more a component/library; MOOSPV depends on Java, open-msp-viewer depends on a web browser.

Unknown said...

Hi Roland,

Looking interesting! I will definitely explore your solution. I am working on similar project. Please have a look http://www.amiproject.com/templates/HomeMove I am going to make money on that in future.

Tiberiu said...

Dear Roland,

Thank you for the feedback. Good luck with the "millonaire" thing :) One thing to be mentioned. I do not know how well chosen is your implementation... it is limited to only working with .xml files and not .mpp and I do not know how powerful is that XSLT tranSformation... I do not see too much future for it but I am curious what you will get and maybe I am wrong.

By the way I think it is time for jerryjacobson06 from ValleySpeak Project Server to come to post a comment on your site :))

Tiberiu said...

@Denis: If you plan to make money then you should improve your marketing strategy. Project.to is very similar to yours, I think it is newer than you on the market BUT he got you from behind. Your product was better than his but now I do not know what to say... I think you are moving slower than him.

@Roland: Is there a way to get notified about new posts? I did not found it.

rpbouman said...

@Denis: wow! I'm impressed :)
It looks really cool and I am sure many people would love to use this. can you briefly explain what technology is behind your solution?

Just an interested geek asking and interested in learning....

@Tiberiu,

look, I just made this available as-is, with no further pretension.

Personally, I can't wait for my organization to move away from MS Project altogether, but as long as its what we're using then this is what I am offering.

As for getting notified about posts, in the right sidebar, you will see a "subscribe to" gadget. I hope that's what you are looking for?

good luck and kind regards,

Roland.

Denis said...

@Roland Thank you for positive feedback! Technology is simple: .net, asp.net, html, css and JavaScript. Let me know if you want know more on that.

Denis said...

@Tiberiu Thank you for feedback! Unfortunately, I do not have enough time to develop my project. But I have couple of ideas I am going to launch soon. I believe it will differentiate my project from respective competitors. Keep your eyes open! :)

Anonymous said...

@Roland, it looks good however the css formatting in IE7 doesnt work properly.

@Denis, thats wonderful interface. I have worked with HPV Solo 2007 version which actually can read and display correctly MSProject Plans (.mpp) files. This interface reminds me of that. Nice work!

rpbouman said...

Anonymous,

yeah, I see what you mean..the left part is all messed up.

Are you using IE7? Should I fix it? Personally my impression is that IE7 never really enjoyed much traction. Perhaps I'm wrong.

Anonymous said...

Yeah I am using IE7 (still). Dont worry about fixing it. The idea to just run xml through the xsl transformation and view the project as html is very impressive.

You wouldnt mind if I try to fix the left side, Would you?

rpbouman said...

Hi Anonymous!

thanks, I'm glad you like the approach :) I am sure much can be improved in the xslt.

As for fixing the HTML/CSS: please, be my guest! If you feel like sharing, contact me and I'll add it to the project - of course, with full attribution. Mail is: roland.bouman@gmail.com

Anonymous said...

Thanks Roland. If I could make any improvement to the current one. I will for sure let you know and then you can decide if you would want to update the release.

Anonymous said...

Thanks for a very useful solution! I've developed an xslt to combine multiple project files into one gantt if anyone would find that helpful.

Also could you please suggest a way to set some of the levels to load initially closed rather than open?

Cheers,

Fraser

saltlakeryan said...

Just wanted to say thanks! This project is going to save me a lot of time. Why MS Project doesn't include this kind of functionality out of the box is a mystery to me.

rpbouman said...

@Unknown, glad it's useful to you. Just use the issue tracker to post any bugs or feature requests and I'll see what I can do to improve it. It hasnt progressed much beyond that first rough cut that is now on google code.

Anonymous said...

Hi Roland. I went to the Google Projects page, and couldn't find any XSLT files there. Did you take it down?

rpbouman said...

Hi Anonymous,

the xslt files are where they have always been - in the xslt directory inside the svn repository (http://code.google.com/p/open-msp-viewer/source/browse/trunk/xslt/).

There is no download section. Just do a svn checkout of the repository, and use the files you need.

See http://code.google.com/p/open-msp-viewer/source/checkout for instructions.

creativ said...

hello roland, i'm searching some tool just like your, but unfortunately i have no idea how to use it...if you can guide me in few lines...i will apreciate.

rpbouman said...

@creativ, I mentioned it in the blog:


"You can either associate the xslt stylesheet directly with the MS Project XML file, or you can use an external tool like xsltproc."

See: http://www.w3.org/TR/xml-stylesheet/
and: http://xmlsoft.org/XSLT/xsltproc2.html

Ruslan said...

Roland,

thanks for an awesome job. Can you please tell me if there is any tool that could convert back from html to xml for opening it using Microsoft Project?

The idea is to show some changes in project and then save them.

Thank you.
Ruslan

rpbouman said...

Hi Ruslan,

"Can you please tell me if there is any tool that could convert back from html to xml for opening it using Microsoft Project?

The idea is to show some changes in project and then save them."

I don't really understand. The xslt viewer is just that - a viewer. It does not support making changes to the project nor was it designed to do so.

Please note that in addition, I retired the xslt viewer. If you want a MS project viewer, please use the open-msp-viewer on github. See: https://github.com/rpbouman/open-msp-viewer

I imagine it would be possible to add editing capabilities to that viewer. But it will take considerable effort to do it correctly. Perhaps you can file an issue in the github tracker to explain exactly what editing capabilities you would like to see and in what order.

Please understand though that I currently do not have the bandwidth to work on this myself at this point in time. However, if you're willing to contribute in some way (effort, patches, money) then please let me know and we might work something out.

Ruslan said...

Roland, I appreciate you answer. Now everything is clear.

Graeme Wellington said...

Hi Roland
I think your project has renewed potential with the move to Software as a Service (Saas) applications.

I am doing some development which I will now see if I can adapt concepts from your project.

Is it possible to call a nominated project.xml directly from the browser similar to below?

Example: file:///C:/Projects/msp-viewer/resources/html/index.html?URL="file:///C:/Projects/Project1.xml"

rpbouman said...

Hi Unknown,

yes, you can open a project xml file in the browser and render it as gantt chart.

For this purpose please checkout the newer javascript based solution. It comes with a sample application that lets you open a project xml file for your local machine. You may modify that part of the code to suit your needs.

see: https://github.com/rpbouman/open-msp-viewer

Graeme Wellington said...

Hi Roland
I have the base system running on my in-house web site and things looking good.
However, I am having trouble with app.js (modified to load sample).
With this modified version in place I get a continuous spinner and nothing loads.

if I click the'Open Folder' icon at far left and load from the 'Prompt' box:
(Please enter a url to download a MS Project XML file:
[file:///C:/msp-viewer/sample/3PointPlan-example.xml]
This same behaviour occurs with the original or modified app.js.

However, if I click the 'Chooes File' option then the Windows Open box appears and I can select and successfully load the project.

Would you be able to assist or point me in the right direction.

Thanks in advance.

Graeme Wellington
graeme.l.wellington@hotmail.com




Graeme Wellington said...

Hi Roland
I have now resolved my issues and misunderstandings.
Using XMLHttpRequest (Open Folder icon) to open a file on a local file system runs into CORS policy issues and basically will not work. [There seems to be discussion around that it can be done by adding specific headers using the POST method but all too hard].
Anyway I have the project running on a website and local host and can load a project automatically at startup by adding a url to the browser command line:
http://localhost/msp-viewer/resources/html/indexX.html?url=http://localhost/msp-viewer/sample/3PointPlan-example.xml

rpbouman said...

Hi Graeme,

if I recall correctly the sample app has the open from url feature as well as the file open feature both on the toolbar. The url indeed only works when you have either same domain or CORS, but open file should work regardless.

UI5 Tips: Persistent UI State

This tip provides a way to centrally manage UI state, and to persist it - automatically and without requiring intrusive custom code sprinkle...