XPages and Me
My Journey into XPages Development
Splitting up: Another Way to Handle Large Forms – Introduction
When dealing with large forms with lots and lots of fields on them, be it as a user or developing an application with large forms, you’ve probably encountered the issue of validation and ease of navigation:
- As a user, if the form is poorly designed, you’ll have to scroll thru it to find the fields, for which the validation failed. This can become rather frustrating, if it is not immediately clear, where the validation failed and you have to try and submit a form multiple times in order to get it done
- As a developer, you have to come up with an innovative way to display validation errors that make sense and are easy to rectify for the potential user
When I first started out as a Notes developer, that was something that always bothered me. Before the introduction of outlines in Notes Designer, I’ve tried to organize the form with sections. Since Notes 5, I started using the outlines, so the user could navigate to the different sections of a form, or created a wizard, which would guide the user step-by-step thru the creation process.
In my web applications, I took the wizard approach and, with the help of JQuery animation, created forms that are easy to understand as:
- The form is organized in logical sections
- The user always knows, where he is in the creation process
- When trying to go to the next step, validation is happening right then and there and won’t let the user proceed, if the validation failes
- When all steps are completed, display the entire form for review
That sounds all good and well, you say, but what happens if validation fails, while the user is reviewing the entire form?
For this kind of situation, I provide growl messages for each field, for which the validation failed. The user can then click on the growl message box, which will focus the cursor on that field and the growl message disappears.
In this series, I will show you one way to set up a form for step-by-step creation, using Bootstrap panels and JQuery animation.
I will explain how I solved some of the following issues I ran into:
- Validation: As I am using the built in SSJS validation, I needed to make sure that the only validation process that is being triggered, is for the fields of the current step
- Partial Refresh: Multiple partial refreshes are needed. How to do that and how to decide in which order
- Bootstrap Panel: Modify the Bootstrap panel custom control, to allow hiding and showing it with JQuery
I hope I’ve peaked your interest with this introduction. The first part is going to be about modifying the Bootstrap panel custom control
Thank you.
XPages and Me 
Looking forward to the follow-up post. Interesting to hear to how to split up forms in xpages in a genuine approach