AppSuite:Wizard framework

Wizard/Tour framework

App Suite UI provides a simple but flexible framework to implement wizards and guided tours. The essence of both a wizard and a tour is a set of steps the end-user walks through. Usually a step is a smaller modal popup.

Simple example

The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:

 
require(['io.ox/core/tk/wizard'], function (Tour) {
   new Tour()
   .step()
       .title('Welcome')
       .content('Lorem ipsum dolor sit amet, consetetur sadipscing elitr')
       .end()
   .start();
}); 

The function step() adds a new step. Each step is separate Backbone view instance (DisposableView to be more precise). The following function calls title() and content() both work on that view; end() just returns to the tour (same idea as in jQuery's end()). This allows long definition chains.

Using the registry

Bla bla.

Function	Description
step(options)	Add a new wizard/tour step.
start()	Start the wizard/tour
title()	Set the popup title. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function.
content()	Set the popup content. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function.