...

A wizard is a step-by-step process, allowing users to perform a set of actions in a predefined order, in order to accomplish a goal. It may appear in a dialog or directly on the pagewithin a workspace.

...

Usage & Behavior

General guidelines

• Wizard steps may:

  • be mandatory or non-mandatory,

  • depend on previous steps,

  • be skipped according to previous selections.

• A Wizard has two possible modes:

  • Create mode - where the wizard is entirely new, i.e. no fields have previously been filled in. In this case, steps must be completed in the predefined order.

  • Edit mode - where fields have previously been filled in. In this case, the user may move freely between steps using the navigation bar (see below).

Structure

Element	Details	Images
Header (In case of a dialog)	The header describes the wizard’s purpose / expected results, and the name/ID of the object that the wizard operates upon (if one exists).
Navigation bar	Shows all of the steps in the wizard. Indicates which step the user is currently on, and the steps which have already been covered.
Content area	Displays content relevant for the selected step, including a title, a Form, and additional content to support decisions. The Form may include a variety of input fields types, such as Radio Buttons, Checkboxes, and Drop-down Menus.
Actions Row	On each step, the actions row will include at least two Dialog Buttons: Back (secondary) and Next (or other primary). On the first step, the Back button is disabled. On the last step, the primary button will show the final action that will occur (e.g. Create statistic Set). Additional buttons may also be included. If one of the fields contains an error, the primarybutton will be disabled and an error message will be shown (see validations and errors below).

...

• If the wizard appears in a dialog, clicking the X button on the header will close the dialog, without saving its content. In this case, a confirmation popup may appear.

Validations and errors

• Clicking the Next button or the primary button in the last step triggers a validation process. In case of an error (either an invalid field value or a missing mandatory field):

  • the button is disabled,

  • an error message appears next to the buttons.

  • After fixing the errors, the message disappears and the button is enabled.

• For more informationEach step of the wizard behaves as a separate form, where both client-side and server-side validations may occur.

• For detailed information about form validations, see Forms Validations and Errors.

• For detailed information about specific component’s validations, see Field Validation.

...

Transitions

...