Multi-step wizard
The JavaScript module
Multi
can be used to show a modal
multi-step wizard with the following features:
- Navigation to previous / next steps
- Steps may have descriptive labels like "Start" or "Finish!"
- Steps may require actions before becoming available.
Add Slide
You have to define at least one slide
Multi
.
Name | Type |
---|---|
string | |
string | |
string|JQuery|Element|DocumentFragment | |
SeverityEnum | |
string | |
SlideCallback |
identifier
-
- Type
- string
- Required
- true
A unique identifier for the slide
title
-
- Type
- string
- Required
- true
The title of the slide. Will be shown as header of the slide.
content
-
- Type
- string|JQuery|Element|DocumentFragment
- Required
- true
The content of the slide. If
string
any HTML will be escaped. To prevent that, chose one of the other allowed types:JQuery:
$(`<div>Your HTML content</div>`);
Copied!Element:
Object.assign(document.createElement('div'), { innerHTML: 'Your HTML content' });
Copied!DocumentFragment:
document.createRange().createContextualFragment("<div>Your HTML content</div>");
Copied!
severity
-
- Type
- SeverityEnum
- Required
- true
Set severity color for sheet. Color will only affect title bar and prev- and next-buttons.
progressBarTitle
-
- Type
- string
- Required
- true
Set a title for the progress bar. The progress bar will only be shown below the content section of the slide, if you have defined at least two or more slides.
callback
-
- Type
- SlideCallback
- Required
- true
A JavaScript callback function which will be called after the slide was rendered completely.
Show / Hide Wizard
After defining some slides you can show
Multi
and hide
Multi
the multi-step wizard.
Lock/Unlock steps
Switching to the next or previous slides is called a step
. The buttons
to navigate to the slides are deactivated by default. Please use following
methods to lock or unlock them:
MultiStepWizard.lockNextStep();
MultiStepWizard.unlockNextStep();
MultiStepWizard.lockPrevStep();
MultiStepWizard.unlockPrevStep();
"Hello world" Example
This JavaScript snippet will create a new multi-step wizard with just one
sheet. As it used
Severity
the title and buttons
will be colored in yellow.
import {SeverityEnum} from "@typo3/backend/enum/severity.js"
import MultiStepWizard from "@typo3/backend/multi-step-wizard.js"
import $ from "jquery";
export default class HelloWorldModule {
constructor(triggerHelloWorldWizardButtonClass) {
const buttons = document.querySelectorAll("." + triggerHelloWorldWizardButtonClass);
buttons.forEach((button) => {
button.addEventListener("click", () => {
MultiStepWizard.addSlide(
"UniqueHelloWorldIdentifier",
"Title of the Hello World example slide",
document.createRange().createContextualFragment("<div>Hello world</div>"),
SeverityEnum.warning,
"Step Hello World",
function ($slide) {
let $modal = $slide.closest(".modal");
let $nextButton = $modal.find(".modal-footer").find("button[name='next']");
MultiStepWizard.unlockNextStep();
$nextButton.off().on("click", function () {
// Process whatever you want from current slide, just before wizard will be closed or next slide
// Close wizard
MultiStepWizard.dismiss();
// Go to next slide, if any
// MultiStepWizard.setup.$carousel.carousel("next");
});
}
);
MultiStepWizard.show();
});
});
}
}
To call the JavaScript from above you have to use the JavaScriptModuleInstruction) technique. In following snippet you see how to add a JavaScript module to field within Form Engine:
$resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create(
'@stefanfroemken/dropbox/AccessTokenModule.js'
)->instance($fieldId);