# FlowManager
## appmixer.ui.FlowManager
The appmixer.ui.FlowManager is a UI widget that displays a list of flows the user created.
| **Method** | **Description** |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.FlowManager(config)` | A function that accepts a config object and returns an instance of flow manager. The config object must contain at least the el property that points to a container DOM element where the flow manager will be rendered. el can either be a CSS selector or a reference to a DOM element.
config.options.menu can optionally define the flow menu. For example:
{ options: { menu: \[ { label: 'Rename', event: 'flow:rename' }, { label: 'Insights', event: 'flow:insights' }, { label: 'Clone', event: 'flow:clone' }, { label: 'Export to SVG', event: 'flow:export-svg' }, { label: 'Export to PNG', event: 'flow:export-png' }, { label: 'Print', event: 'flow:print' } ] }
defines a menu with 6 items. Note that each item can also optionally contain icon property (which we omitted from the example above to save space. The icon property is a URL of an image.
config.sharePermissions can optionally define the sharing options for the flows. For example:
sharePermissions: \[ { label: 'Read', value: 'read' }, { label: 'Start', value: 'start' }, { label: 'Stop', value: 'stop' } ]
Define a share dialog box that gives the user permission to share their flows for all the read/start/stop permissions. Additionally, you can also define the scope of the share with config.shareTypes:
shareTypes: \[ { label: 'Email', value: 'email', placeholder: 'Enter an email' }, { label: 'Scope', value: 'scope', placeholder: 'Enter a scope' }, { label: 'Domain', value: 'domain', placeholder: 'Enter a domain' }, ]
config.options.customFilter is an optional object that can contain properties that we'd like to filter on. This is especially useful in connection with customFields metadata object as it allows you to display multiple different Flow Managers each listing a different category of flows. For example:
options: {
customFilter: {
'customFields.template': true
'customFields.category': 'healthcare'
}
}
config.options.layout.default is an optional string that determines the default layout of the flow manager. Currently list and thumbnail are supported. If not specified, the default layout is thumbnail.
config.options.layout.table is an optional object that allows customizing the list layout column headers and values displayed. For example:
options: {
layout: {
table: {
columns: \[
{ property: 'name', label: 'Flow Name' },
{ property: 'status', label: 'Current Status' },
{ property: 'btime', label: 'Start Time' },
{ property: 'mtime', label: 'Last Updated' }
]
}
}
}
The label property makes reference to the label displayed on the column header, while property makes reference to the flow property value that will be displayed on that column.
|
| `open()` | Render the flow manager inside its container. |
| `close()` | Close the flow manager. |
| `on(event, handler)` | React on events of the flow manager. See below for the list of events the flow manager supports. |
| `off([event, handler])` | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only. |
| `state(name, value, [details])` | Change the state of the UI. Currently, only `"loader"` and `"error"` states are supported. For example, in order to show a loader in the flow manager UI, just call `state("loader", true)`. If you want to display an error in the flow manager UI, call `state("error", "Something went wrong.")`. The optional `details` parameter allows you to add details to the `error` message, for exmaple: `state('error', 'Something went wrong', 'Loading failed because ....')`. |
| `reload()` | Re-render the flow manager. Call this when you changed the state of a flow (e.g. renamed a flow, started a flow, ...) to make sure the flow manager reflects the new changes. |
### Flow Manager Events
| **Event** | **Callback** | Triggered when... |
| --------------- | ------------------ | --------------------------------------------------------- |
| `flow:open` | `function(flowId)` | the user clicks on a flow to open it. |
| `flow:create` | `function()` | the user clicks the "Create Flow" button. |
| `flow:start` | `function(flowId)` | the user clicks the button to start the flow. |
| `flow:stop` | `function(flowId)` | the user clicks the button to stop the flow. |
| `flow:insights` | `function(flowId)` | the user clicks the button to open Insights for the flow. |
| `flow:clone` | `function(flowId)` | the user clicks the button to clone the flow. |
| `flow:remove` | `function(flowId)` | the user clicks the button to delete the flow. |
### Example
```javascript
var flowManager = appmixer.ui.FlowManager({
el: '#your-flow-manager-div',
options: {
menu: [
{ label: 'Edit', event: 'flow:open' },
{ label: 'Clone', event: 'flow:clone' },
{ label: 'Share', event: 'flow:share' },
{ label: 'Insights', event: 'flow:insights' },
{ label: 'Delete', event: 'flow:remove' }
]
}
});
flowManager.on('flow:start', function(flowId) {
flowManager.state('loader', true);
appmixer.api.startFlow(flowId).then(function() {
flowManager.state('loader', false);
flowManager.reload();
}).catch(function(error) {
flowManager.state('error', 'Starting flow failed.');
});
});
flowManager.on('flow:create', function() {
flowManager.state('loader', true);
appmixer.api.createFlow('New flow').then(function(flowId) {
flowManager.state('loader', false);
designer.set('flowId', flowId);
designer.open();
}).catch(function(error) {
flowManager.state('error', 'Creating flow failed.');
});
});
flowManager.open();
```
##