ColdFusion And AJAX Organizational Chart - Beta

Demo and early sneak peek at my AJAX Organizational Chart powered by ColdFusion.

2006-07-29 12:38:00.0

ColdFusion And AJAX Organizational Chart - Beta

About 2 weeks ago before I started my , I worked on a quick proof-of-concept ColdFusion and Ajax enabled Organizational Chart widget.

My main aim was to create a widget that would render in modern browsers and would allow the adding of nodes to the chart using AJAX so the whole page didnt have to be reloaded.

I faced some interesting problems:

  • I wanted to use pure CSS and DIVs but soon found out this was impossible for the moment so had to settle for a mix of CSS and normal TABLE elements.
  • The logic in finding the current parent to append new elements to needed quite a bit of thought to work on all browsers.
  • Deleting nodes a few levels up had to take sub-nodes into consideration.
  • The user-interface had to be very simple and in context with each node.

I decided on the following:

  • I created a custom tag which runs using recursion. This allows the whole chart to be generated using one line of code and you can choose which node to start rendering from.
  • Because the chart is built using a recursive custom tag and I can choose any start node, implementing the AJAX was easy, easy easy.... All I have to do when an add node icon is clicked, the parent node id is passed using AJAX and the custom tag is called with a start ID of the passed parent and the returned HTML is rendered without reloading the page.
  • I used the extremely handy CFSAVECONTENT to render the HTML from the custom tag and simply return the resultant variable. This made the code really easy, flexible and readable.

The main way to use the tag is:

  • To create a node, you click the Add Node icon from the parent node.
  • To edit a node, you double-click an existing node.
  • To delete a node, you click the Delete Node icon on the node to be deleted.

The editing of nodes is not complete. I envisage this to dynamically create a text area in the node and update the TEXT of the node on the fly using . Another option in the future would be to pop-up a menu that allows you to change the TYPE of node.

Things I would like to see added:

  • Panning of a VIEW area for large charts
  • Ability to change each nodes type
  • Add the ability to render each node with rounded corners using the brilliant NiftyCude library.
  • Ability to export the chart in a variety of formats : graphics or PDF

The funny thing is, I developed this 2 weeks ago on one of my 3 hour after-work learning stints where I generally read new things through blogs or try proof-of-concept ideas that may help in future projects. About 2 days ago, I got an email from someone through who had an idea for a CFOrgChart type tag/application with the same ideas I had planned.

Funny how things happen...

Now the fun part...try the demo : demos/cforgchart/index.cfm

PS: Please use with care and dont ruin it for other people by deleting all nodes. This is only a demo and I havent performed any checking or locking of nodes yet.

PPS: Can someone (Karl :-) ) check this on Safari and report back?

Add to your    DIGG This!    Technorati Cosmos Link    Post to Reddit    Add to your Furl    Add to Blinklist
Comments [12] - Leave a comment


Hi Dan, Checked it out in Safari and it seems to be working if..... added and deleted a few nodes and everything seems great!!! nice one!
Cheers Karl!! Can you send me a screenshot? Thanks again! Sorry I missed you at Riordans for that gig, got caught up with something! When you playing next?
Maxamilian said:
Can you post the code how do you generate index.cfm?
Also, adding and deleting the nodes?
Cause it is hard to get, how it's all gets generated.
Dan said:
Maxamilian, I will add a few features, package it up and post it soon.
Jeremy said:
Not sure exactly what this could be used for, but it looks cool. It timed out kinda quick though and started throwing errors at me.
SURESH said:
Hey this looks really cool. Could you please share the code?
emloq said:
hai,ur orgchart is what i'm looking for,it was simple and dynamic,can it get data from database?
Derek said:
Do you think you will ever get around to this again?
anos21 said:
hey Dan ,working on Ajax charts then let me help you in just take a look on this <a href="">visifire</a> offered under open source and for free powered by silverlight
Pretty cool, Will you release the code? I would like to play around with it.
Hi All,

Sorry for the long delay getting back to people.

I am in the process at the moment of re-writing the AJAX section to use Prototype.js and will post up the full source code then.

Update to this post contains a link to download the source code for my ColdFusion Org Chart demo.