# Automation Hub

## Configuration <a href="#configuration" id="configuration"></a>

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

```javascript
const automationHub = appmixer.ui.AutomationHub(config)

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

#### **`config.el`** **`...`**

{% hint style="info" %}
Learn about `widget` `config` [here](/appmixer-ui-sdk/ui-and-widgets.md#configuration).
{% endhint %}

#### **`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"`.

```javascript
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.

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

## Instance <a href="#instance" id="instance"></a>

{% hint style="info" %}
Learn about `widget` instance [here](/appmixer-ui-sdk/ui-and-widgets.md#instance).
{% endhint %}

### State

```javascript
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 <a href="#events" id="events"></a>

```javascript
automationHub.on(event, handler)
```

{% hint style="info" %}
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.
{% endhint %}

#### **`flow:open-designer`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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`**

```javascript
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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appmixer.com/appmixer-ui-sdk/ui-and-widgets/automation-hub.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.