Skip to content

Wizard

Jump to bottom
jdubs edited this page Oct 23, 2016 · 1 revision

Table of Contents

Overview

This widget creates a wizard like approach for user input. When the wizard is defined the div container tags within the wizard become the steps. The wizard is designed to eliminate clutter and present a more friendly form for input to the end user. Events are exposed that allow you to write code against the widget.

Instructions

For a simple implementation create a

HTML tag must be created and a class defined as "Wizard". For advanced implementations, do not include the class definition "Wizard", and add an "ID" attribute to the top level element. Within this
tag all other
tags become the individual panels of the wizard. There is no limit on the number of panels (steps) in the wizard. Additionally, navigation buttons are inserted into the wizard and a border is set around the entire widget.

HTML Example 

&amp&#59;lt&#59&#59;div class&#61&#59;&quot&#59;Wizard&quot&#59;&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[FirstName]]&amp&#59;nbsp&#59&#59;[[LastName]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[Address]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[City]], [[State]] [[Zip]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[Phone]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;

Advanced Scripting 

&amp&#59;lt&#59&#59;div id&#61&#59;&quot&#59;Wizard&quot&#59;&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[FirstName]]&amp&#59;nbsp&#59&#59;[[LastName]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[Address]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[City]], [[State]] [[Zip]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
	&amp&#59;lt&#59&#59;div&amp&#59;gt&#59&#59;[[Phone]]&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
&amp&#59;lt&#59&#59;/div&amp&#59;gt&#59&#59;
get(&#39&#59;Wizard&#39&#59;).wizard(&#123&#59;
	border&#58&#59; &quot&#59;1px solid rgb(0,0,0)&quot&#59;, 
	margin&#58&#59; &quot&#59;5px&quot&#59;, 
	padding&#58&#59; &quot&#59;5px&quot&#59;, 
	width&#58&#59; &quot&#59;100%&quot&#59;, 
	height&#58&#59; &quot&#59;500px&quot&#59;, 
	buttonAlign&#58&#59; &quot&#59;right&quot&#59;, 
	buttonTextBack&#58&#59; &quot&#59;previous&quot&#59;, 
	buttonTextForward&#58&#59; &quot&#59;next&quot&#59; 
&#125&#59;)&#59&#59;

Options

  • border: CSS style for defining a border around the entire wizard.
  • margin: CSS style for defining margin around the entire wizard.
  • padding: CSS style for defining margin around the entire wizard.
  • width: CSS style for defining width of the entire wizard.
  • height: CSS style for defining height of the entire wizard.
  • buttonAlign: CSS style for alignment of navigation buttons in wizard.
  • buttonTextBack: Text assigned to back navigation button.
  • buttonTextForward: Text assigned to forward navigation button.
  • debug: True or false. When true the control holding the value is displayed.

Events

  • onBeforeMoveBack(): Triggered by an action causing the wizard to step back. Return true to allow action to complete.
  • onBeforeMoveForward(): Triggered by an action causing the wizard to step forward. Return true to allow action to complete.
  • onAfterMoveBack(): Triggered after the action to step back. Return true to allow action to complete.
  • onAfterMoveForward(): Triggered after the action to step forward. Return true to allow action to complete.
  • onError(): Error handling for wizard navigation. By default an alert is displayed notifying user the navigation is out of range.

Properties

index(): Gets the current index of the wizard panels (0 based).

Methods

  • moveForward(): Forces wizard to step forward.
  • moveBack(): Forces wizard to step back.
  • moveTo(index): Forces wizard to move to the panel/step identified by the index parameter.

Events, Properties and Methods Examples 

specForm.wizard.onError &#61&#59; function() &#123&#59;
	specForm.wizard.moveTo(0)&#59&#59;
&#125&#59;

Error Handling

When a panel is referenced that does not exists an IndexOutofBounds exception will be thrown and an alert will pop up in the browser. All actions will be cancelled. The event onError is called when this error is caught.

Clone this wiki locally