Dealing with nested sections in Form Builder

We have been working on the ability to nest sections and other containers in Form Builder for a while, as it is an often-requested feature.

Tree in OmniFocus

But what should the user interface for this look like? How do you specify where a new section goes, and how do you organize existing sections?

We are big users of OmniFocus at Orbeon, whose UI allows you to organize projects and actions as a tree. Power users typically use the keyboard to move them around in 4 directions:

Form Builder nested sections at work

• Up: move before the previous entry
• Down: move after the next entry
• Left: move out of the containing entry
• Right: move into the previous entry

It is a simple but powerful concept, which happens to apply very well to visual elements such as form sections and grids.

So this is how we have started implementing nested sections in Form Builder. When you add a section, it appears beneath the current section. If you want to move the section into the original section instead, just use the "Move right" icon. To move it out, use the "Move left" icon. (Sections had "Move up" and "Move down" icons since the beginning.)

Add to that keyboard shortcuts, and moving sections and grids around will be a breeze!