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 |
|
callback |
function |
Callback method run after the slide appeared. The callback receives two parameters:
|
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();
});
});
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();
});
Wizards can be closed by firing the wizard-dismiss
event.
Example code:
Wizard.getComponent().trigger('wizard-dismiss');
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
});