Feature: #73429 - Wizard component has been added 

See forge#73429

Description 

A new wizard component has been added. This component may be used for user-guided interactions. The RequireJS module can be used by including TYPO3/CMS/Backend/Wizard.

The wizard supports straight forward actions only, junctions are not possible yet.

Impact 

The wizard component has the following public methods:

  • addSlide(identifier, title, content, severity, callback)
  • addFinalProcessingSlide(callback)
  • set(key, value)
  • show()
  • dismiss()
  • getComponent()
  • lockNextStep()
  • unlockNextStep()

addSlide 

Adds a slide to the wizard.

Name DataType Mandatory Description
identifier string Yes The internal identifier of the slide
title string Yes The title of the slide
content string Yes The content of the slide
severity int   Represents the severity of a slide. Please see TYPO3.Severity. Default is TYPO3.Severity.info.
callback function   Callback method run after the slide appeared. The callback receives two parameters: $slide: The current slide as a jQuery object settings: The settings defined via Wizard.set()

addFinalProcessingSlide 

Adds a slide to the wizard containing a spinner. This should always be the latest slide. This method returns a Promise object due to internal handling. This means you have to add a done() callback containing Wizard.show() and Wizard.getComponent() please see the example below.

Name DataType Mandatory Description
callback function   Callback method run after the slide appeared. If no callback method is given, the wizard dismisses without any further action.

Example code:

Wizard.addFinalProcessingSlide().done(function() {
    Wizard.show();

    Wizard.getComponent().on('click', '.my-element', function(e) {
        e.preventDefault();
        $(this).doSomething();
    });
});
Copied!

set 

Adds values to the internal settings stack usable in other slides.

Name DataType Mandatory Description
key string Yes The key of the setting
value string Yes The value of the setting

Events 

The event wizard-visible is fired when the wizard rendering has finished.

Example code:

Wizard.getComponent().on('wizard-visible', function() {
    Wizard.unlockNextButton();
});
Copied!

Wizards can be closed by firing the wizard-dismiss event.

Example code:

Wizard.getComponent().trigger('wizard-dismiss');
Copied!

Wizards fire the wizard-dismissed event if the wizard is closed. You can integrate your own listener by using Wizard.getComponent().

Example code:

Wizard.getComponent().on('wizard-dismissed', function() {
    // Calculate the answer of life the universe and everything
});
Copied!