Flow Manager

Browse and manipulate flows that are accessible to the current user.

Flow Manager

Configuration

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

const flowManager = appmixer.ui.FlowManager(config)

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

config.el ...

Learn about widget config here.

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:

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' }
    ]
  }
}

The optional icon property is a URL of an image or a base64 string.

Flow Manager Menu

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:

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' }
    ]
  }
}

Flow Manager Filters

Filters clearly indicate when they are applied and can easily be reset (this applies to both the Flow Manager and the Integrations manager, in both grid and list layouts):

• Each filter dropdown renders as a chip with a Group: value label (e.g. Stage: Running flows). An applied filter is highlighted, so flows can never be "lost" behind an invisible filter.
• An active chip shows an × button that clears just that filter group (in list layout, the × appears next to the column-header dropdown).
• Every filter menu offers an All option at the top that clears the group, and the active option is marked with a checkmark.

config.options.customFilter

Type: Object | Default: {}

Filter the flows with additional parameters:

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:

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:

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:

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

Flow Manager Sorting

Instance

Learn about widget instance here.

State

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

flowManager.on(event, handler)

flow:open

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

Select a flow to open in Designer widget.

flow:create

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

Click Create Flow button.

flow:start

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

Toggle flow stage button.

flow:stop

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

Toggle flow stage button.

flow:clone

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

Click menu item to clone a flow.

flow:share

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

Click menu item to open sharing of a flow.

flow:rename

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:

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

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