Configuration
Set up a new instance with config parameters and set/get methods:
Copy 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
Type: Object[] | Default: []
Add a dropdown menu input to each flows to trigger built-in and custom events:
Copy 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:
Copy 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:
Copy 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:
Copy appmixer.ui.FlowManager({
/* ... */
options: {
customFilter: {
'customFields.category': 'healthcare',
'customFields.template': true
}
}
} config.options.sorting
Type: Object[] | Default: []
Create dropdown inputs with built-in sorting:
Copy 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
Copy 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
Copy flowManager.on(event, handler) flow:open
Copy flowManager.on('flow:open', flowId => {/* ... */}) Select a flow to open in Designer widget.
flow:create
Copy flowManager.on('flow:create', () => {/* ... */}) Click Create Flow button.
flow:start
Copy flowManager.on('flow:start', flowId => {/* ... */}) Toggle flow stage button.
flow:stop
Copy flowManager.on('flow:stop', flowId => {/* ... */}) Toggle flow stage button.
flow:clone
Copy flowManager.on('flow:clone', flowId => {/* ... */}) Click menu item to clone a flow.
flow:share
Copy flowManager.on('flow:share', flowId => {/* ... */}) Click menu item to open sharing of a flow.
flow:rename
Copy flowManager.on('flow:rename', flowId => {/* ... */}) Click menu item to rename flow.
flow:remove
Copy 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:
Copy 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
Copy // 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() 
