After some very unfortunate time away from z3c.formjs, I’ve managed to come back and write another demo. The “Tree Editor” demo as I call it, is a deep look into managing subforms (or inline forms) with AJAX.
The original idea for this demo stems from my work on CanDo, a competency management, tracking, and assessment web application being built for Arlington County Public Schools. In CanDo, we have to manage “competencies” that are stored in a tree structure of arbitrary depth. Typically, there are thousands upon thousands of competencies stored in a single application and in order to manage such a large tree of information efficiently, you really need a user interface that is organized in a tree structure as well. So, here is a screen shot of one of the competency management screens (I know, it looks really ugly).
One of the most painful problems was reloading this big tree structure every time you clicked a button to display a subform. The other problem is that when the page reloads, it starts at the top and you have to scroll down to find this subform. And before anyone suggests it, using anchors was only a little better than starting at the top. In any case, a page like this just screams for AJAX.
This brings us to the Tree Editor demo. Below is a screen shot of the demo, which can be viewed online here:
If you try the demo, you will very quickly see that it is still quite limited. You can’t collapse nodes, and if you modify the root node, the title at the very top of the page doesn’t change. But the subforms show up and get submitted correctly. A big part of the magic is in the jquery.form.js plugin which can take a form element and turn it into an ajax form element. This is particularly useful because rendering the standard form with submit buttons and all provides the proper action url and field scope for data submission. Also, taking an existing normal form and adding ajax support is trivial with no JSON serialization involved.
So, I will continue to improve this demo and hopefully it will flush out some other deficiencies in z3c.formjs. I should also mention that the next big feature on my list for z3c.formjs is a little even framework so that all relevant areas of the page will change when an edit form is submitted without errors. Look forward to that.