Technique
- Définir la résolution à 1280×720
- Pourquoi ? Résolution 16:9 adaptée à YouTube et recommandée par [cet article][1] ; 1280 px minimaux pour Form Builder.
- Comment ? Utilisez l’extension [Window Resizer][2] en mode « mobile » pour viser le viewport. Dans ScreenFlow, recadrez à 1280×720, aligné en bas à gauche de la fenêtre Chrome.
Script
Partie 1
- Intro — Bienvenue dans cette démo de Form Builder, le concepteur de formulaires d’Orbeon Forms. Form Builder permet de créer, modifier, gérer et déployer des formulaires complexes, directement dans le navigateur.
- Écran d’accueil — Accès rapide à Form Builder et à plusieurs formulaires de démonstration.
- Créer un formulaire — Cliquez sur Form Builder ; indiquez le nom d’application et le nom de formulaire (modifiable ensuite).
Partie 2
- Disposition — Barre de titre, barre d’actions, barre d’outils à gauche, zone de conception centrale.
- Édition directe — Saisie en place selon le principe WYSIWYG (ex. renommer une section en « Informations personnelles »).
- Sections / grilles — Sections imbriquées ; grilles avec plusieurs lignes/colonnes, insertion/suppression de colonnes et lignes.
Part 3
- First name, Last name, Email - So now, let’s add a few fields to this first section. Let’s start with “first name”, which I add by simply clicking in the toolbox on the corresponding button. I do the same for “last name”, and “email”. For “email” I use a specialized “email address” field, which will make sure that what users enter is indeed a proper email address.
- Phone with repeat - And now let’s add a phone number field. For the phone number, I’d like users to be able to enter several numbers, like a home, office and mobile number, this without having to several fields. This is something you can do with the “repeat” functionality, which is new in Orbeon Forms 4.0. So let’s see how a repeats work. You insert a repeat by clicking on “New Repeat” in the toolbar. A repeat is just like a grid in the sense that it can can have multiple columns. So let’s add a column. And in the first column I add a dropdown for the phone type. In the second column I add a phone number field. Now, let’s populate the dropdown ; I click on the “Edit Items” link, which opens the Form Builder itemset editor. This lists a series of labels and values for the control. The difference between labels and values is that labels are shown to users, and values are stored in the database. This distinction allows you to change labels later on, while keeping the values the same, so data stored in the database isn’t impacted. This also allows you to localize labels in different languages, but have the same values stored in the database whatever language was used when filling out the form. Let’s remove the sample entries here… and add a few items… say “Mobile”. You notice that when I tab out of the field, Form Builder suggests a possible value, which I can of course change if needed. Let’s also add “Home”, “Office”, and “Other”. And we’re good with this dropdown.
- Message section (with order number) - I will now add a new section that will contain information about the message that users will want to write. I click on “New Section”, and name the section “Message”. Then let’s add a text field and call it “order number”. I don’t need anything to the right of this field, but I don’t want it to take the whole width of the form, so I’ll add a second column here, just for the purpose of the layout.
Part 4
- Questions and comments - Finally, I also want to add a big text field, for users to enter their message. Since I want the field to use the whole width of the form, I create a new grid by clicking on “New Grid”, add a “Text Area”, and name it “Questions and Comments”.
- Make fields required - Now I think that in this form the First Name, Last Name and Email, in fact most of the controls will be required. And I can actually set that constraint with Form Builder. And to do so I go to the Validation Settings button. And I select the “Yes” radio button under “Required”. Let’s do this as well for the last name… and the message. Notice how a little red star shows next the label of the required control.
- Save, test - I will now save the form to the database by pressing the Save button. I can also test the form we just created simply by pressing the Test button. The form appears in this dialog as if it was presented to the end user, and I can fill-out the data. This way I can very easily test that the layout of my controls is correct and that validation is working properly. Let’s just fill out the required fields : the first name, last name, and message… and you notice that this little icon indicates that I no longer have errors on my form because I have filled out all the required fields. Once I’m satisfied with my test, I can close the dialog.
Part 5
- Publish, summary, new - Once I have edited, saved and tested my form, I can publish it. I do so by pressing the Publish button. I confirm, and Form Builder now copies my form definition to a different area of the database where published forms reside. I can now decide to go to the summary page of my new published Contact form. The summary page lists all the entries that have been submitted for this form, so typically, accessing that page is restricted to admins or people who need to access this information. Of course this list is now empty, since this is a form that I just created. Going back to Form Builder, notice that on publish, it also gave me the URL of a “new page”. This is the page you will link to for people to fill out your form. Let’s open it, and the form shows. Notice that I am no longer in Form Builder, but in the runtime environment, which we call Form Runner. I am now really capturing this data and I will be able to save it.
- Errors Say I just enter the first name and try to save. Since the last name and message are required, Form Runner doesn’t let me save the data. At the bottom, it shows an “error summary”. Say I click on “last name”. Notice how Form Runner set the focus on the “last name” control, which can be convenient with large forms. So let’s fill out this last name and message… and of course, once all the required data is entered, I can save my data.
-
Conclusion - This completes our quick overview of Form Builder’s basic features. There are many Form Builder features we didn’t have time to cover in this screencast. So for more information, make sure to visit our website at www.orbeon.com. Thank you !
[1] : http://blogs.telestream.net/screenflow/2011/04/choosing-the-best-screen-resolution-for-your-screencasts/ [2] : https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh