Wizards (and we're not talking Harry Potter)

I just got back from some customer visits in Washington DC (governments tend to have a lot of forms…) and a common design pattern came up a few times: creating wizard-like forms. Since InfoPath provides all the built in tools to do this, without any fancy XPaths or code, I thought it would be fun to blog about here.

 

 

Basic wizard

Let's say you have a form that would be easier to fill out if folks could focus on one section at a time in a specific order. You can provide that experience by putting each section in its own view, and adding Back/Next buttons to navigate between them.

 

Specifically:

1. Open you form in design mode
2. Open the Views task pane
3. Click Add New View for each section in your form
4. Copy and paste each section to its own view
5. Open the Controls task pane
6. Insert two Buttons
7. Double click each button to open Button Properties
8. Change the label for each button to "<< Back" or "Next >>"
9. Click Rules to open the Rules dialog
10. Click Add to add a rules
11. Click Add Action to add an action
12. For the Action, select Switch Views
13. Select the view to switch to
14. Copy and paste your button pairs to each view and update the rules to switch to different views.

 

You can also provide this experience by adding Conditional Formatting to each section and hiding all sections that don't currently apply, but that can be cumbersome to design since the view can get so big, and I find it harder to manage the flow.

 

Conditional Wizard

InfoPath forms are dynamic, and wizard forms are no different. A common pattern is changing what data you collect based on what they selected earlier on. For example, it's tax time, so if I'm filling out a 1040 and select the option button to file as a single, I can skip the step that would ask me about dependents. You can get this in your form by adding a condition to the rule on your "Next" button, and adding a different rule for each view they could jump to.

 

 

Some wizard pointers

• Keep it simple. Try to minimize the number of controls on each page of the wizard. In fact, if you can ask for only one piece of information on a given page, your users will thank you. That said, if there is related data, keeping all of it on one page can be easier than having to skip back and forth.
• Make it pretty. One of the benefits of a wizard is that you're not trying to cram all that data onto one page, so you have room to throw a graphic on the left in addition to a nice header. You can also wrap everything in a table to make sure the Next/Back buttons don't jump around. Eye candy for all!
• Share where you are. If the wizard isn't conditional, leave the views on the View menu so people can quickly jump around if they want, and see how far they have to go. If the wizard is conditional so you don't want people jumping to the wrong pages, you can hide the views from the View menu using View Properties, but replace it with a chart at the top of each page to let them know how far they have to go. A simple text saying "25% complete" can go a long way.
• Know when you're done. Presumably the last page of the wizard will submit the data. It's a nice touch to provide a summary of the data they've entered so far, and change the label on the "Next" button to "Finish" or even just "Submit".

 

 

If you have any more tips on creating wizard forms, our team and the rest of the InfoPath community would love to hear them, so feel free to comment!

 

Thanks,

Ned

Comments

• Anonymous
  April 30, 2006
  I would like to see an easy way to generate a list of the views within the form itself.  I am not a big fan of using the "View" menu because it's not a natural place for the user to look, and am not convinced the pros outweight to cons.
  
  

• Anonymous
  May 01, 2006
  The comment has been removed

• Anonymous
  May 01, 2006
  My latest form actually has 18 views!  I neve thought about making a custom HTML task pane -- that sounds interesting.  I think I'll look into that even just to learn how it's done.
  
  My thought on how it would be optimally acheived would be to add a 4th option to the sources for a drop-down.  The option should just simply state "List of views within this form".  In fact, while we're at it, it some people might find it useful to list the views in a different form (although I would imagine that list would be static once generated -- I n guess it could be optionally dynamic).
  
  Having said this, I would say that cleanest way right now to generate the list of views in a drop-down would be to use an XML file.  Generating the file would be easy, and XML is already an option for the source.  It wouldn't be dynamic, though, but would be a lot easier thathe hassle of updating the same drop-down on every view :-)
  
  Thanks for the suggestion of tasks panes.  I'm off to learn more :-)

• Anonymous
  May 01, 2006
  In my last post I covered how to make Wizard-like forms. This time I want to talk about another common...

• Anonymous
  May 01, 2006
  The XML list of views is a cool idea. Keep in mind that to get the benefit of not updating each dropdown when the list changes, you'll also need to switch views using code instead of rules.  
  
  Have fun exploring the HTML task pane!

• Anonymous
  October 14, 2006
  In my last post I covered how to make Wizard-like forms . This time I want to talk about another common

• Anonymous
  August 16, 2007
  While this gave me some new ideas on creating a wizard in InfoPath, it did not answer my burning question. How can I check if all the data on a view is valid? I have done the conditional test (max of 5), hidden counters changed by control's rules, and waving my un-magic wand. Nothing does the job 100%

• Anonymous
  August 20, 2007
  Dave B.: Regarding "How can I check if all the data on a view is valid?" You can check the error count in code... http://www.google.com/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fmsdn2.microsoft.com%2Fen-us%2Flibrary%2Fbb250983.aspx&ei=lK7JRtKqOKfuiwGo4NkO&usg=AFQjCNEn_7IT8GxOxfkN2hmmd7B1xO485Q&sig2=1JLQ-6iwls9VnIZCexKxwQ