AppSuite:Wizard framework: Difference between revisions

From Open-Xchange
mNo edit summary
(Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/guided-tours.html Note: Open-Xchange is in the process of migrating all...")
 
(36 intermediate revisions by one other user not shown)
Line 1: Line 1:
<div class="title">Wizard/Tour framework</div>
The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/guided-tours.html


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.
Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.
 
=== Simple example ===
The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:
<pre class="language-javascript">
require(['io.ox/core/tk/wizard'], function (Tour) {
  new Tour()
  .step()
      .title('Welcome')
      .content('Lorem ipsum dolor sit amet, consetetur sadipscing elitr')
      .end()
  .start();
});
</pre>
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.
 
=== API ===
 
{|
|-
! 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.
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
 
=== Using the registry ===
Bla bla.

Latest revision as of 09:15, 22 May 2017

The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/guided-tours.html

Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

Retrieved from "https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Wizard_framework&oldid=23304"