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
identifier	string
title	string
content	string\|JQuery\|Element\|DocumentFragment
severity	SeverityEnum
progressBarTitle	string
callback	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>`);

Element:

Object.assign(document.createElement('div'), {
  innerHTML: 'Your HTML content'
});

DocumentFragment:

document.createRange().createContextualFragment("<div>Your HTML content</div>");

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 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();

"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();
      });
    });
  }
}

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