Web Application/Wizards

Introduction

What is a wizard? It is a tool to gather a lot of information from the user. In practice, it is a series of pages (or dialog boxes) that ask questions. Pages that come later may change based on answers given on previous pages. The user is also allowed to go back and change their answers to previous questions.

Wizards in Web Apps

How can we implement wizards in web apps? First, let's look at how they are implemented in client GUIs.

These are the critical components:

• A state. This has all the answers the user has given, as well as other information derived from those answers. In effect, by answering the questions and moving through the wizard, the state is being continuously updated.
• An action. Presumably, you are collecting this information for some purpose. In the end, you are either storing the state (or only the interesting bits of it) or taking some other action. The state should build up until you have all the information you need to properly perform the action the way the user wants to perform it.
• A series of pages. Each page presents different bits of information and options and questions.

You'll need to answer these questions for your wizard for every step of the process:

• What is the state of the wizard? That is, what answers do I have and what additional information have I gathered based on those answers?
• What is the next page to show?
• What action will I perform when the process is complete?

Understanding this makes implementing the wizard in a web app simple.

• The state can be represented by a session, but more appropriately can be stored in form parameters.
• The pages are really web pages. They have to render the previous state in hidden variables and present the appropriate questions, as well as provide appropriate information.
• The action is taken once all the state is complete.

Pylons

If I were to implement a new wizard in Pylons (or pretty much any web app framework), I would first think about the action that the wizard culminates in. Understanding this, I will begin to list all the bits of information I need to take that action. Finally, I will present questions to gather that information in a logical way.

Without using Dynamic HTML/AJAX/Whatever, I would have to rely on the state being stored in hidden form fields in the page. Each page in the wizard would get its own template. Each page would submit to the same URL, which would unwrap the state, figure out what the user did, and figure out what the next page to show would be.

If I were to do it in an AJAX-y way, I would take a different route. The state can be stored in Javascript variables and data structures. The program logic determines which page to show at which time. However, rather than posting information to get the next page to show, I would simply store the instructions to build each page in the Javascript.

This is a rather high-level look, but I feel it is simple. Implementation is left as an exercise to the reader.