ColdFusion And AJAX Organizational Chart - Beta

About 2 weeks ago before I started my latest work project, 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 ColdFusion 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 AJAX. 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 CFTagStore.com 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?

If you are in need of ColdFusion hosting do your research before paying for ColdFusion hosting that doesn't suit your needs.