Difference between revisions of "AppSuite:Wizard framework"

m (Simple example)
Line 15: Line 15:
 
});  
 
});  
 
</pre>
 
</pre>
 +
The function **step()** adds a new step. Each step is separate **Backbone view** instance. The following function calls title() and content() both work on that view; end() just returns to the tour. This allows long definition chains.
  
 
=== API ===
 
=== API ===
 
Bla bla.
 
Bla bla.

Revision as of 12:25, 15 July 2015

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. The following function calls title() and content() both work on that view; end() just returns to the tour. This allows long definition chains.

API

Bla bla.