# Wizard

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-98b57b9af8c00fb23dc1be5486f8fdf991716d01%2Fwizard-light.png?alt=media" alt=""><figcaption><p>Wizard</p></figcaption></figure>

## Configuration <a href="#configuration" id="configuration"></a>

Set up a new instance with `config` parameters and `set`/`get` methods:

```javascript
const wizard = appmixer.ui.Wizard(config)

wizard.set(key, value)
wizard.get(key)
```

#### **`config.el`** **`...`**

{% hint style="info" %}
Learn about `widgetconfig` [here](https://docs.appmixer.com/6.0/5.2/appmixer-sdk/ui-and-widgets/..#configuration).
{% endhint %}

#### **`config.flowId`**

Type: `String` | Default: `null`

The ID of a flow that is opened in the wizard.

## Instance <a href="#state" id="state"></a>

{% hint style="info" %}
Learn about `widget` instance [here](https://docs.appmixer.com/6.0/5.2/appmixer-sdk/ui-and-widgets/..#instance).
{% endhint %}

### State

```javascript
wizard.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.

### Events <a href="#events" id="events"></a>

```javascript
wizard.on(event, handler)
```

#### **`flow:start`**

```javascript
wizard.on('flow:start', flowId => {/* ... */})
```

Submit the form and start the flow.

#### **`flow:validation`**

```javascript
wizard.on('flow:validation', errors => {/* ... */})
```

Flow validation errors changed.

#### **`cancel`**

```javascript
wizard.on('cancel', () => {/* ... */})
```

Click a button to close the form.

#### `close`

```javascript
wizard.on('close', () => {/* ... */})
```

Submit the form and wait for the flow to start.

## Example

```javascript
const wizard = appmixer.ui.Wizard({
    el: '#wizard',
    flowId: 'your-integration-id'
})

wizard.on('flow:start', async flowId => {
    await appmixer.api.startFlow(flowId)
    wizard.close()
})

wizard.open()
```