Friday, June 15, 2012

Form Builder's new UI to edit labels and hints

For every form field you create in Form Builder, you’ll be entering a label. And maybe, you’ll also enter a hint, typically a few words shown below the field, to provide more guidance for end users. When creating forms, you’ll be editing lots of labels and hints. So for Orbeon Forms 4.0 we’ve focused on making the label and hint editing super fast and intuitive.

After you add a form field, the next thing you’ll most likely want to do is to edit its label. So when you add a field, where the label would be, Form Builder shows a text field for you to type the label. Form Builder also positions the cursor in that text field. For instance, after adding a date field, you’ll see:

Empty label
Empty label

As soon as you start typing your text shows instead of the grey hint Type your label here. When done, press enter, and the label shows without the text field:

A label was entered
A label was entered

To edit a label just click on it, and a text field shows again. To give you a hint that you can click on the label to edit it, when your mouse pointer gets close to the label, Form Builder highlights it:

Label highlighted
Label highlighted

If, when creating the form field, you didn’t enter a label, or later removed it, in place of the label you’ll see a greyed out Click to add a label. And of course, the same logic also applies to hints. So our control with an empty label and hint shows as follows:

Without label and hint
Without label and hint

The new Form Builder label and hint editor will ship with Orbeon Forms 4.0, and you can already try it today by downloading a 4.0 milestone build.

No comments:

Post a Comment