#### **`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
}
}
}
```
In Appmixer 6, the FlowManager widget is meant to display *Automations* only. These are regular flows, not the *Integrations*. This can be overwritten with the *customFilter:*
```javascript
appmixer.ui.FlowManager({
/* ... */
options: {
customFilter: {
type: [ // each flow has a 'type' property
'automation',
'integration-instance'
]
}
}
});
```
#### **`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 }
]
}
}
```
Flow Manager Sorting
## Instance
{% hint style="info" %}
Learn about `widget` instance [here](https://docs.appmixer.com/appmixer-ui-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
```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
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' }
]
}
}
```
Flow Manager Sharing
## 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()
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.appmixer.com/appmixer-ui-sdk/ui-and-widgets/flow-manager.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
