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".

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