My Portal Project

A simple workflow designer that allows you to drag names from a list of employees, to another list that is your process workflow. Using the Scriptaculous sortable list effect, this tool allows your average user to redesign workflows on the fly in a very intuitive way.

After being shown the Scriptaculous effects library, my usual first thought is “neat, but can I use this anywhere and not make it seem like gratuitous fluff?”. I found a good use for the in-place editing piece, and finally found a good fit for the sortable lists.

There are alot of caveats with this implementation so the code in this demo is far from optimized, and it needs to be migrated to use the Prototype libraries also. At this point the demo only shows changing a single workflow and does not allow for creating new ones yet.

The idea works like this: Using a modified version of my AJAX phone directory I create a list on the left of employee names. By typing the first few letters of the persons last name in the field at the top, the list will show the results as a list where each name is its own bordered div. From the left list you can drag names over to the list that represents the workflow steps, and drag names from the workflow list over to the left to remove someone. When done with your changes, click the submit button (this will be automatic soon, but for debugging purposes the button is easier).

The biggest issue was how to deal with DIV’s that have identical ID’s. When the page loads with the querystring “wf=1″ (which identifies which workflow to edit), a script similiar to the one used for the left list, pulls the data from the database and creates the list on the right. Since each DIV has to have a unique ID attributed to the users name, I kept ending up with DIV’s with duplicate ID’s when a user existed in both the left and right lists. I solved this by prefacing the right list ID’s with “dest_” and parsing out the prefix before the results are posted to the server.

The demo is here and I will be updating it regularly as I streamline the code. I will eventually post the code for this demo in PHP, .NET, and Domino. Let me know if you have any ideas.

This entry was posted on Wednesday, April 26th, 2006 at 8:42 am and is filed under Cool Tools, Code Bin, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.