# Flow Manager

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

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

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

```javascript
const flowManager = appmixer.ui.FlowManager(config)

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

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

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

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

Type: `Object` | Default: `DefaultOptions`

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

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

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

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
      menu: [
        { event: 'flow:open', label: 'Open', icon: 'data:image/svg+xml;base64,...' },
        { event: 'flow:rename', label: 'Rename', icon: 'https://www.example.com/images/image.jpg' },
        { event: 'flow:insights', label: 'Insights' },
        { event: 'flow:clone', label: 'Clone' },
        { event: 'flow:share', label: 'Share' },
        { event: 'flow:remove', label: 'Remove' },
        { event: 'my-custom-event', label: 'Custom Event' }
    ]
  }
}
```

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

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-a6b06be7a8d715b4703d37914e9b8fcb5a28660e%2Fflow-manager-menu-light.png?alt=media" alt=""><figcaption><p>Flow Manager Menu</p></figcaption></figure>

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

Type: `Object` | Default: `DefaultShareTypes`

Override default sharing dialog types.

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

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

Override default sharing dialog permissions.

#### **`config.options.filters`**

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

Create dropdown inputs with built-in query filters:

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
    filters: [
      { property: 'stage', value: 'running', label: 'Running flows' },
      { property: 'stage', value: 'stopped', label: 'Stopped flows' },
      { property: 'sharedWith', value: 'myFlows', label: 'My flows' },
      { property: 'sharedWith', value: 'sharedWithOthers', label: 'Shared with others' },
      { property: 'sharedWith', value: 'sharedWithMe', label: 'Shared with me' }
    ]
  }
}
```

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-8131ad1b4b964844bdacfda25ebacd2e5ee6ba32%2Fflow-manager-filters-light.png?alt=media" alt=""><figcaption><p>Flow Manager Filters</p></figcaption></figure>

#### **`config.options.customFilter`**

Type: `Object` | Default: `{}`

Filter the flows with additional parameters:

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
    customFilter: {
      stage: 'running'
    }
  }
}
```

This is especially useful in connection with `customFields` `metadata` to display multiple different **Flow Managers** each listing a different category of flows:

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
    customFilter: {
      'customFields.category': 'healthcare',
      'customFields.template': true
    }
  }
}
```

#### **`config.options.sorting`**

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

Create dropdown inputs with built-in sorting:

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
    sorting: [
      { label: 'Last Modified', property: 'mtime', value: -1 },
      { label: 'Last Created', property: 'btime', value: -1 }
    ]
  }
}
```

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-2256611f82a7a0517142fe21a2df95cfcadb2ae3%2Fflow-manager-sorting-light.png?alt=media" alt=""><figcaption><p>Flow Manager Sorting</p></figcaption></figure>

## 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
flowManager.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.

#### **`layout`**

Type: `String` | Default: `grid`

Change layout of the widget.

#### **`query`**

Type: `Object` | Default: `DefaultQuery`

Set custom query parameters.

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

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

#### **`flow:open`**

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

Select a flow to open in **Designer** widget.

#### **`flow:create`**

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

Click **Create Flow** button.

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

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

Toggle flow stage button.

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

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

Toggle flow stage button.

#### **`flow:clone`**

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

Click menu item to clone a flow.

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

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

Click menu item to open sharing of a flow.

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

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

Click menu item to rename flow.

#### **`flow:remove`**

```
flowManager.on('flow:remove', flowId => {/* ... */})
```

Click menu item to remove a flow.

## Sharing <a href="#sharing" id="sharing"></a>

Add menu item with `flow:share` event for a configurable flow sharing dialog:

```javascript
appmixer.ui.FlowManager({
  /* ... */
  options: {
    menu: [{ event: 'flow:share', label: 'Share' }],
    // specify custom types and scopes
    shareTypes: [
      { value: 'email', label: 'Email', placeholder: 'Enter an email' },
      { value: 'scope', label: 'Scope', placeholder: 'Enter a scope' },
      { value: 'domain', label: 'Domain', placeholder: 'Enter a domain' }
    ],
    // override default permissions
    sharePermissions: [
      { label: 'Read', value: 'read' },
      { label: 'Start', value: 'start' },
      { label: 'Stop', value: 'stop' }
    ]
  }
}
```

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-16ab687b9070bdde30ad702689899981ce0a83ac%2Fflow-manager-sharing-light.png?alt=media" alt=""><figcaption><p>Flow Manager Sharing</p></figcaption></figure>

## Example

```javascript
// create a new widget
const flowManager = appmixer.ui.FlowManager({
  el: '#flow-manager',
  options: {
    menu: [
      { event: 'flow:open', label: 'Open' },
      { event: 'custom-event', label: 'Custom' },
      { event: 'flow:rename', label: 'Rename' },
      { event: 'flow:insights', label: 'Insights' },
      { event: 'flow:clone', label: 'Clone' },
      { event: 'flow:share', label: 'Share' },
      { event: 'flow:remove', label: 'Remove' }
    ],
    filters: [
      { property: 'stage', value: 'running', label: 'Running flows' },
      { property: 'stage', value: 'stopped', label: 'Stopped flows' },
      { property: 'sharedWith', value: 'myFlows', label: 'My flows' },
      { property: 'sharedWith', value: 'sharedWithOthers', label: 'Shared with others' },
      { property: 'sharedWith', value: 'sharedWithMe', label: 'Shared with me' }
    ],
    sorting: [
      { label: 'Last Modified', property: 'mtime', value: -1 },
      { label: 'Last Created', property: 'btime', value: -1 }
    ]
  }
})

// change default layout
flowManager.state('layout', 'list')

// override a built-in event
flowManager.on('flow:create', () => {
  flowManager.state('error', 'Creating a new flow overridden by a custom event handler.')
})

// load flow details with a custom event
flowManager.on('custom-event', async flowId => {
  try {
    flowManager.state('loader', true)
    const flow = await appmixer.api.getFlow(flowId)
    alert(`Flow ${flow.name} has ${Object.keys(flow.flow).length} component(s).`)
  } catch (error) {
    flowManager.state('error', 'Loading flow failed.')
  } finally {
    flowManager.state('loader', false)
  }
})

// open the widget
flowManager.open()
```