How to Create a Wizard Template


A wizard in the context of this article is a user interface that is used to navigate through a series of steps with sub-steps within each. The user can navigate through the sub-items by clicking on them on the left-side menu. Each sub-item will appear within a stack frame on the right (within the border). The top-most section is a progress bar that indicates which breadcrumb step in the entire process the user currently is working on. The user can move forwards and backwards through steps by selecting the previous step and submit step buttons.

There are multiple advantages that the wizard approach can provide. A user advantage to using a wizard is that it provides the ability to interact with multiple sub-items while staying within the same coach. A developer advantage is the consolidation of needed coaches to represent each sub-item down to a single one. Coaches will only be needed to represent a step in the overall process and contain their respective sub-items. The largest advantage of the wizard template is that it is created in a way that is decoupled and reusable. 

Below is an example of what the wizard template looks like. 

Setting up the Breadcrumb Progress Bar

There are two main parts of the progress bar: the label and the progress bar. To create the labels that are displayed above the progress bar, nest an output text control inside of a horizontal layout and bind a NameValuePair (NVP) list to the layout. The NVPs will be the list of the breadcrumb steps in the process. Underneath the horizontal layout holding the breadcrumb steps place a progress bar, whose value will be set dynamically within in-line javascript. 

The layout of the top-most section of the wizard.

Within the onLoad() of the progress bar call the function updateBreadcrumb() to set the progress bar.

Setting up a Wizard Menu of Sub-Items

The Wizard Menu is simply a table that contains a column holding an input group with a nested badge within. The table has an object called WizardMenu bound to it that provides the menu item's name, and the input group's icon and color. 

The layout of the Wizard Menu.

When the user selects an item in the menu list, the function updateWizardMenu(me) (me being the control's view being passed in) is called in the On Click event within the badge control. The function stores the row's view and the index of the row within two different data controls. The index of the row is what determines which stack pane to show. 

The logic within the updateWizardMenu() function.

Saving Menu Items in the Wizard Menu

When the user selects the Save and Save and Next Section buttons, the items within the Wizard Menu will change accordingly depending on the index. The Save button confirms that the sub-item is saved by turning green and changing the icon to a check. The Save and Next button does the same thing as the Save button, but it also moves to the next item in the list and changes the stack pane. This is done by calling a function defined in the in-line js within each button's On Click event. 

The logic within the saveMenuItem() and saveAndNextMenuItem() functions.

To set the first sub-item view of the Wizard Menu table when the page loads, the timer control can be used. To set the first item's view and ensure that it is loaded, the timer is started within the table's On Rows Loaded event. When the timer times out, the On Timeout event calls the initialUpdateWizardmenu().  


  • Authors: Elliot Pytosky
  • Date Created: November 13, 2015
  • Date Modified: November 13, 2015


Was this article helpful?
0 out of 0 found this helpful