Take control over your wizard

The following is common requirements when building a wizard:

  • The first step should show some info before the wizard is actually starting thus the second step should not show a back button.
  • The final step, after which saving/etc should occur should actually be the second last step so that the last step can show confirmation/thank you etc.

However, this is not the default behavior of the Wizard control in Asp.NET. The following aspx markup shows the desired behavior through it's content comments, but not through the code;

<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1">
            Welcome Step, information before wizard actually is started.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            Start step, no going back button here.
        </asp:WizardStep>
        <!-- any number of steps here -->
        <asp:WizardStep runat="server" title="Step 3">
            Finish Step, finish button here so FinishButtonClick event 
            can be handled when going forward from here.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 4">
            Thank You Step, no going back button here.
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

(Note: I almost always set DisplaySideBar to false, so that the user is forced to navigate the wizard in a linear way.)

The four steps now looks like this;

Step 1:
CropperCapture[12]
Step 2:
CropperCapture[13]
Step 3:
CropperCapture[14]
Step 4:
CropperCapture[15]

As you can see we need to manipulate the second, second last and last step to get the navigating buttons correct, and all we need to do is the following changes (bold);

<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false"
    StartNextButtonText="Start">
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1" AllowReturn="false">
            Welcome Step, information before wizard actually is started.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            Start step, no going back button here.
        </asp:WizardStep>
        <!-- any number of steps here --> 
        <asp:WizardStep runat="server" title="Step 3" StepType="Finish">
            Finish Step, finish button here so FinishButtonClick event 
            can be handled when going forward from here.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 4" StepType="Complete">
            Thank You Step, no going back button here.
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

And the steps now looks like this;

Step 1:
CropperCapture[20]
Step 2:
CropperCapture[16]
Step 3:
CropperCapture[17]
Step 4:
CropperCapture[18]

In the first step the forward button is still available, however the text of it is changed through the StartNextButtonText property of the Wizard control. Also the AllowReturn property of the first WizardStep is set to false, which causes the second step not to display a back button. For Step 3 the StepType is set to Finish, causing the rendering of a Finish button instead of a Next button, which should hint the user that after that there is no going back. In the final step StepType is set to Complete causing the wizard to not render any buttons at all.

Note that you can insert as many steps as you want between Step 2 and 3, and the user will be able to navigate back and forth between them. Also note that any saving or result calculations that should occur when the user finishes can be handled in the FinishButtonClick event of the Wizard control, and the final Complete step could be used to display the data given/results etc.

1 comment :