Automation Hub

Manage automation flows, logs, and connected accounts in a unified hub.

Configuration

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

const automationHub = appmixer.ui.AutomationHub(config)

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

config.el ...

Learn about widget config here.

config.options

Type: Object | Default: {}

config.options.customization.entryPoints.templates

Type: Boolean | Default: true

Show the option to start an automation from a pre-built template.

config.options.customization.entryPoints.scratch

Type: Boolean | Default: false

Show the option to start an automation from a blank canvas.

config.options.header.visible

Type: Boolean | Default: true

Toggle visibility of the widget header.

config.options.header.tabs.hidden

Type: String[] | Default: []

Tab keys to hide. Valid values: "flows", "logs", "accounts".

appmixer.ui.AutomationHub({
  /* ... */
  options: {
    header: {
      tabs: {
        hidden: ['logs', 'accounts']
      }
    }
  }
})

config.options.flows.instances.tile.icons.size

Type: String | Default: "M"

Icon size for flow instance tiles. Valid values: "S", "M", "L".

config.options.flows.templates.tile.icons.size

Type: String | Default: "M"

Icon size for template tiles. Valid values: "S", "M", "L".

Flow images on tiles

When a flow or template has an image field set (see the image property of the flow object in the Flows API), the Automation Hub tile renders the image in the card body instead of the connector icon strip. Tiles of flows without an image keep showing the icon strip.

config.state

Type: Object | Default: see below

Override initial widget state. See State below for supported keys.

appmixer.ui.AutomationHub({
  /* ... */
  state: {
    tab: 'logs'
  }
})

Instance

Learn about widget instance here.

State

automationHub.state(name, value)

tab

Type: String | Default: "flows"

The active tab. Valid values: "flows", "logs", "accounts".

flows/layout

Type: String | Default: "grid"

Flow list display mode. Valid values: "grid", "list".

flows/query/searchPattern

Type: String | Default: ""

Text filter applied to the flows list.

flows/query/instances/onlyRunning

Type: Boolean | Default: false

When true, only running flow instances are shown.

Events

automationHub.on(event, handler)

Event handlers receive an object with event.data (event-specific fields) and event.next(). Calling event.next() executes the widget's built-in default behavior. If a handler is registered for an event, the default behavior is suppressed unless event.next() is called explicitly.

flow:open-designer

automationHub.on('flow:open-designer', ({ data }) => {/* ... */})

Click to open a flow in the Designer. data.flow.flowId and data.flow.type identify the flow. data.isNew is true for newly created flows. There is no built-in handler — open an appmixer.ui.Designer instance in your handler.

flow:open-wizard

automationHub.on('flow:open-wizard', ({ data }) => {/* ... */})

Click to open a flow in the Wizard. data.flow.flowId and data.flow.type identify the flow. There is no built-in handler — open an appmixer.ui.Wizard instance in your handler.

flow:create-custom

automationHub.on('flow:create-custom', ({ data, next }) => {/* ... */})

Click to create a custom integration from a template. data.createFrom.sourceFlowId and data.createFrom.sourceFlowType identify the source template. Call next() to execute the default behavior (clone the template and open it in the Designer).

flow:start

automationHub.on('flow:start', ({ data, next }) => {/* ... */})

Click to start a stopped flow. data.flow.flowId and data.flow.type identify the flow. Call next() to execute the default start behavior.

flow:stop

automationHub.on('flow:stop', ({ data, next }) => {/* ... */})

Click to stop a running flow. data.flow.flowId and data.flow.type identify the flow. Call next() to execute the default stop behavior.

flow:clone

automationHub.on('flow:clone', ({ data, next }) => {/* ... */})

Click to clone a flow. data.flow.flowId and data.flow.type identify the flow. Call next() to execute the default clone behavior.

flow:rename

automationHub.on('flow:rename', ({ data, next }) => {/* ... */})

Click to rename a flow. data.flow.flowId and data.flow.type identify the flow. Call next() to open the built-in rename dialog.

flow:remove

automationHub.on('flow:remove', ({ data, next }) => {/* ... */})

Click to delete a flow. data.flow.flowId and data.flow.type identify the flow. Call next() to open the built-in delete confirmation dialog.

flow:insights-logs

automationHub.on('flow:insights-logs', ({ data, next }) => {/* ... */})

Click to view logs for a flow. data.flow.flowId and data.flow.type identify the flow. Call next() to navigate to the Logs tab for that flow.

Example

const designer = appmixer.ui.Designer({ el: '#designer' })

const automationHub = appmixer.ui.AutomationHub({
    el: '#automation-hub',
    options: {
        customization: {
            entryPoints: {
                templates: true,
                scratch: true
            }
        }
    }
})

automationHub.on('flow:open-designer', ({ data }) => {
    designer.set('flowId', data.flow.flowId)
    designer.open()
})

automationHub.on('flow:open-wizard', ({ data }) => {
    const wizard = appmixer.ui.Wizard({
        el: '#wizard',
        flowId: data.flow.flowId
    })
    wizard.open()
})

automationHub.open()