Wednesday, August 31, 2011

Calling REST or Web Services from Form Builder

Sample data returned by a service, displayed in a form
For the longest time, you could within Form Builder setup services to be called, without having to write one single line of code. For instance:
  • You want to call a service every time the form is loaded; the service returns data, which you use to pre-populate some of the fields in the form.
  • Or, users enter data in a field of the form, say an order number. When that happens, you want to call a service, passing that order number to the service, and want to use the data returned by the service to pre-populate other fields in the form.
You can do all this with Form Builder, without writing one single line of code. The documentation for this feature was deep down into the Form Builder User Guide, and the UI is at the very bottom of the left sidebar, inside Services & Actions. Consequently a lot of people didn't know that this feature existed, and when they did, they often were unsure how to use it. You can now learn more about it in the step by step How to Call a Service Passing a Field Value.

Wednesday, August 24, 2011

Styling required fields with a star

Form fields can be valid or invalid. They can be invalid because they were marked as required, and no value was entered, because the value doesn't match the expected type—say, a number is expected—or for some other reason.

For the longest time, the following styling logic has applied to invalid fields, for forms you create with Form Builder:
  1. When you start a new form, no special styling is applied to invalid fields.
  2. When you exit a field, if its value is invalid, the field is highlighted as invalid, and an alert message shows below the field.
  3. When you save or submit the form, all the invalid fields you haven't visited yet are highlighted as invalid, as in step 2.
We heard from users that, in addition to this, they wanted to have the required fields clearly marked, right away as soon as the form shows. And starting today, this is what happens out of the box with new nightly builds. This way, as soon as you load a form, you will know what are the fields you really need to fill out.

And this feature is implemented 100% in CSS, just like the highlighting of invalid fields discussed earlier, so you can entirely customize this behavior.

Tuesday, August 16, 2011

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!