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

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();