JavaScript Task Flow Designer
By Jon Wojtowicz

  Download Source Code
While working on a project tracking application the client wanted a graphical means of creating task flows for projects.  Originally this was to be accomplished using Macromedia Flash.  Not being a real fan of Flash, I decided to see if I could create a designer using only DHTML in Internet Explorer.
I started out by deciding what constitutes a task flow.  Obviously it is a series of tasks defined in sequence, it is also a connected graph of tasks.  It can even be thought of as a hierarchical set of tasks.  With this knowledge I decided to implement the data as XML.  This would allow me to persist the task graph and reconstitute in the browser using a client side XmlDocument object.
One of the major issues would be creating connecting lines in the browser.  I wanted to avoid any third party plug-ins so SVG was out of the question.  I came across a little known feature in Internet Explorer, VML. VML stands for Vector Markup Language and was Microsoft's recommendation for enabling graphics in the browser.  Microsoft implemented it in Internet Explorer but it was not approved by the W3C.  This little gem solved my problem of drawing lines.
End Result
The initial view of the designer can be seen in Figure 1.  The left side of the screen holds the palette of available tasks.  Each task can be selected and dragged onto the mapping surface and released.  This will open a dialog where additional information can be added.  See Figure 2 for the dialog view.  he dialog information can be saved or cancelled if you do not want the information.
Figure 1.
Designer Initial View
Figure 2.
Additional Information Dialog
Connecting Tasks
 After the dialog is dismissed, you will see the task on the mapping surface.  Drag a second task onto the mapping surface and release.  Dismiss the dialog. to connect the two tasks, select the first task and it will change.  When you select a second task a line will be drawn connecting the two tasks.  Notice the second task is now highlighted.  If you click on another task in the mapping surface it will be connected to this task.  This features allow you to drag your tasks onto the designer and connect them in sequence.  See Figure 3 for a view of the designer with connected tasks.
To delete a connecting line, right click on the line and select Delete.  You can also remove tasks by right clicking on a task and selecting Delete.
Figure 3.
Connected Tasks
Save
Hitting the Save button will display the resultant XML describing the graph.  By loading the XML data island in the document with the XML, the graph will reconstitute itself in the mapping area.
This designer can be made into a dynamic page to load the task from a data source and persist the graph information.  It is a great tool for creating work flows in your project.
Please note this designer only works with Internet Explorer 5.5 and above.
Last Update: 6/26/2005