# Integrations

<figure><img src="https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-4ce9bc9daa42aeae4df7330b8319a38e6b3a815c%2Fintegrations-light.png?alt=media" alt=""><figcaption><p>Integrations</p></figcaption></figure>

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

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

```javascript
const integrations = appmixer.ui.Integrations(config)

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

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

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

#### **`config.options`**

Type: `Object` | Default: `{}`

#### **`config.options.customFilter`**

Type: `Object` | Default: `{}`

Filter the integrations with additional parameters:

```javascript
appmixer.ui.Integrations({
  /* ... */
  options: {
    customFilter: {
      // displaying Integrations with a certain customField
      'customFields.category': 'healthcare',
      // that are shared with someone
      'sharedWith': '![]'
      // and in this example, that are shared throught the 'domain'
      // options with a 'testdomain.com'
      'sharedWith.domain': 'testdomain.com'
      // or we could filter only Integrations that are shared with
      // scope 'user'
      // 'sharedWith.scope': 'user',
    }
  }
}
```

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

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

### State

```javascript
integrations.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.

### Events <a href="#events" id="events"></a>

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

#### **`integration:create`**

```javascript
integrations.on('integration:create', integrationId => {/* ... */})
```

Click a button to to create a new integration from template.

#### **`integration:edit`**

```javascript
integrations.on('integration:edit', integrationId => {/* ... */})
```

Click a button to edit integration.

#### **`integration:remove`**

```javascript
integrations.on('integration:remove', integrationId => {/* ... */})
```

Click a button to remove integration.

#### **`integration:start`**

```javascript
integrations.on('integration:start', integrationId => {/* ... */})
```

Click a button to start integration.

#### **`integration:stop`**

```javascript
integrations.on('integration:stop', integrationId => {/* ... */})
```

Click a button to stop integration.

## Example

```javascript
const integrations = appmixer.ui.Integrations({
    el: '#integrations'
})

integrations.open()

integrations.on('integration:create', async templateId => {
    // Create integration flow as a clone of the template. Disconnect
    // accounts because they might not be shared with the end user.
    const integrationId = await appmixer.api.cloneFlow(templateId, { connectAccounts: false })
    await appmixer.api.updateFlow(integrationId, { templateId })

    const wizard = appmixer.ui.Wizard({
        el: '#your-wizard-div',
        flowId: integrationId,
    });

    wizard.open()
    integrations.reload()
})

integrations.on('integration:edit', function(integrationId) {
    var wizard = appmixer.ui.Wizard({
        el: '#wizard',
        flowId: integrationId
    });
    wizard.open()
});

integrations.open()
```