---
title: "Feature: #73429 - Wizard component has been added"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:feature-73429"
source: "Changelog/8.0/Feature-73429-WizardComponentHasBeenAdded.rst"
typo3-version: "8.0"
typo3-major: 8
type: "feature"
issue: 73429
forge: "https://forge.typo3.org/issues/73429"
tags: ["Backend", "JavaScript"]
rendered: "2026-09-17T21:17:42+00:00"
---

# Feature: #73429 - Wizard component has been added {#feature-73429-wizard-component-has-been-added}

See [forge#73429](https://forge.typo3.org/issues/73429)

## Description {#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 {#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 {#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 {#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:

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

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

### set {#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 {#events}

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

Example code:

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

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

Example code:

```javascript
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:

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