Multi-step wizard

The JavaScript module MultiStepWizard 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 MultiStepWizard.addSlide().

Name Type
string
string
string|JQuery|Element|DocumentFragment
SeverityEnum
string
SlideCallback

identifier

identifier
Type
string
Required
true

A unique identifier for the slide

title

title
Type
string
Required
true

The title of the slide. Will be shown as header of the slide.

content

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

severity
Type
SeverityEnum
Required
true

Set severity color for sheet. Color will only affect title bar and prev- and next-buttons.

progressBarTitle

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

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 MultiStepWizard.show() and hide MultiStepWizard.dismiss() 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();
Copied!

"Hello world" Example

This JavaScript snippet will create a new multi-step wizard with just one sheet. As it used SeverityEnum.warning the title and buttons will be colored in yellow.

EXT:my_extension/Resources/Public/JavaScript/HelloWorldModule.js
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();
      });
    });
  }
}
Copied!

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);
Copied!