# Designer

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FCdMFX0Cwdcdl7VZVcN1W%2Fdesigner-light.png?alt=media&#x26;token=e8dffc5d-ae89-4b49-badd-77f7ca8cb83f" alt=""><figcaption><p>Designer</p></figcaption></figure>

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

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

```javascript
const designer = appmixer.ui.Designer(config)

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

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

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

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

Type: `String` | Default: `null`

ID of a flow that is opened in the editor.

#### **`config.componentId`**

Type: `String` | Default: `null`

ID of a component that is opened in the editor.

#### **`config.shareTypes`**

Type: `Object` | Default: `DefaultShareTypes`

Override default sharing dialog types.

#### **`config.sharePermissions`**

Type: `Object[]` | Default: `DefaultSharePermissions`

Override default sharing dialog permissions.

#### **`config.options.showHeader`**

Type: `Boolean` | Default: `true`

Toggle visibility of the header.

#### **`config.options.menu`**

Type: `Object[]` | Default: `[]`

Add a dropdown menu input to trigger built-in and custom events:

```javascript
appmixer.ui.Designer({
  /* ... */
  options: {
      menu: [
        { event: 'flow:rename', label: 'Rename', icon: 'data:image/svg+xml;base64,...' },
        { event: 'flow:share', label: 'Share', icon: 'https://www.example.com/images/image.jpg' },
        { event: 'flow:wizard-builder', label: 'Wizard' },
        { event: 'flow:export-svg', label: 'Export SVG' },
        { event: 'flow:export-png', label: 'Export PNG' },
        { event: 'flow:print', label: 'Print' }
    ]
  }
}
```

{% hint style="info" %}
The *optional* `icon` property is a URL of an image or a `base64` string.
{% endhint %}

#### **`config.options.toolbar`**

Type: `Array[]` | Default: `[]`

Add a toolbar with groups of built-in and custom buttons:

```javascript
const designer = appmixer.ui.Designer({
  /* ... */
  options: {
      toolbar: [
        ['undo', 'redo'],
        ['zoom-to-fit', 'zoom-in', 'zoom-out'],
        ['logs'],
        [{
          tooltip: 'Reload',
          widget: {
              template: (
                  `<div @click="onClick" style="border: solid 1px gray; border-radius: 3px;">
                      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
                        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                      </svg>
                  </div>`
              ),
              methods: {
                  onClick() {
                    designer.reload()
                  }
              }
          }
        }]
    ]
  }
}
```

{% hint style="info" %}
Specify Vue [`ComponentOptions`](https://vuejs.org/api/component-instance.html#options) under `widget` to create a custom toolbar button.
{% endhint %}

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

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

### State

```javascript
designer.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
designer.on(event, handler)
```

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

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

Toggle stage button to start the flow.

#### **`flow:stop`**

```javascript
designer.on('flow:stop', flow => {/* ... */})
```

Toggle stage button to stop the flow.

#### **`flow:share`**

```javascript
designer.on('flow:share', flow => {/* ... */})
```

Click menu item to open sharing of the flow.

#### **`flow:rename`**

```javascript
designer.on('flow:rename', flow => {/* ... */})
```

Click menu item to rename the flow.

#### **`flow:export-svg`**

```javascript
designer.on('flow:export-svg', flow => {/* ... */})
```

Click menu item to export diagram of the flow to SVG.

#### **`flow:export-png`**

```javascript
designer.on('flow:export-png', flow => {/* ... */})
```

Click menu item to export diagram of the flow to PNG.

#### **`flow:print`**

```javascript
designer.on('flow:print', flow => {/* ... */})
```

Click menu item to print diagram of the flow.

#### **`flow:wizard-builder`**

```javascript
designer.on('flow:wizard-builder', flow => {/* ... */})
```

Click menu item to open a wizard builder dialog.

#### **`component:add`**

```javascript
designer.on('component:add', ({ data, next }) => {/* ... */})
```

Add a new component to the flow.

#### **`component:open`**

```javascript
designer.on('component:open', ({ data, next }) => {/* ... */})
```

Open component inspector.

#### **`component:close`**

```javascript
designer.on('component:close', ({ data, next }) => {/* ... */})
```

Close component inspector.

#### **`component:rename`**

```javascript
designer.on('component:rename', ({ data, next }) => {/* ... */})
```

Rename a component.

#### **`component:update-type`**

```javascript
designer.on('component:update-type', ({ data, next }) => {/* ... */})
```

Use selection input to change component type.

#### **`navigate:validation`**

```javascript
designer.on('navigate:validation', (flowId) => {/* ... */})
```

Click a button to show validation errors.

## Example

```javascript
const designer = appmixer.ui.Designer({
    el: '#designer',
    options: {
        menu: [
          { event: 'flow:rename', label: 'Rename' },
          { event: 'flow:share', label: 'Share' },
          { event: 'flow:wizard-builder', label: 'Wizard' },
          { event: 'flow:export-svg', label: 'Export SVG' },
          { event: 'flow:export-png', label: 'Export PNG' },
          { event: 'flow:print', label: 'Print' }
        ],
        toolbar: [
          ['undo', 'redo'],
          ['zoom-to-fit', 'zoom-in', 'zoom-out'],
          ['logs']
        ]
    }
})

const flowId = await appmixer.api.createFlow('New flow')
designer.set('flowId', flowId)
designer.open()
```