Microsoft InfoPath 2010
The official blog of the Microsoft InfoPath team

Wizards (and we're not talking Harry Potter)

Wizards (and we're not talking Harry Potter)

Rate This
  • Comments 8
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
Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post
  • 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.

  • Great feedback, thanks!

    The most common way people do that today are:

    1. If you have 2-5 views, create a button that switches to the each view, and make them look like tabs of a folder. See my next blog entry on how to do this.

    2. If you have about 6-15 views, create a dropdown list with the name of each view, along with a button with a rule that switches the view based on the value in the dropdown. Once you make it, you can copy and past to each view, but if you add a new view or change the name of one, you'll have to update it on each view.

    2. If you have more than 16 views (complex form!) then create a custom HTML task pane that lists all the views in a "table of contents" type format, and uses script to switch the view on each link.

    Obviously it could be easier, so point taken on providing a better experience out of the box.

  • 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 :-)
  • In my last post I covered how to make Wizard-like forms. This time I want to talk about another common...
  • 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!
  • In my last post I covered how to make Wizard-like forms . This time I want to talk about another common

  • 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%

  • 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

Page 1 of 1 (8 items)