Wizards (and we're not talking Harry Potter)

  • Article

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