z3c.formjs Tree Editor Demo

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).

Screenshot-SchoolTool Contents - Mozilla Firefox1.png

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:


Screenshot-Z3C FormJS Demo - Mozilla Firefox1.png

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.

  1. Hi. I tried the instructions in the z3c.formjsdemo package’s README, but it seems as though the z3c.formjs dependency is not being satisfied:

    webmaven@workshop:~/FormJSDemo$ ./bin/buildout -Nv
    Develop: ‘/home/webmaven/FormJSDemo/.’
    Develop: ‘/home/webmaven/FormJSDemo/z3c.formjs’
    Traceback (most recent call last):
    File “/tmp/tmpTIhX3e”, line 10, in ?
    IOError: [Errno 2] No such file or directory: ‘/home/webmaven/FormJSDemo/z3c.formjs’
    Processing develop directory ‘/home/webmaven/FormJSDemo/z3c.formjs’.

    An internal error occured due to a bug in either zc.buildout or in a
    recipe being used:



  2. Note that the problem described above is for a trunk checkout.

  3. Never mind. I see now that I just need to nuke the “develop = . z3c.formjs z3c.form z3c.formui” line from the trunk checkout.

  4. I’ve figured out that the z3c.formjsdemo trunk depends on code that is only in other trunk checkouts like the z3c.formjs trunk (so far I’ve identified z3c.formjs.jsfunction.py).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 74 other followers

%d bloggers like this: