5.2

Flow Manager

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

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.

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

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

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

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

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()
PreviousUI & WidgetsNextDesigner

Last updated