# Integrations

### appmixer.ui.Integrations

![](https://3013747694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-MScMuxqWH7WYUM1HbZ9%2F-MSdB-UAhIVXkkV6chAB%2FScreenshot%202021-02-04%20at%2001.28.18.png?alt=media\&token=8d550597-a33b-4ada-bee2-ebb830d7fbac)

The appmixer.ui.Integrations is a UI widget that displays available and active integrations.

| Method                       | Description                                                                                                                                                                                                                                          |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.Integrations()` | Constructor function that accepts `config` object. The `config` object must contain at least the `el` property that points to a container DOM element where the Integrations will be rendered.                                                       |
| `open()`                     | Render the Integrations inside its container.                                                                                                                                                                                                        |
| `close()`                    | Close the Integrations.                                                                                                                                                                                                                              |
| `on(event, handler)`         | React on events of the Integrations widget. See below for the list of events the Integrations widget supports.                                                                                                                                       |
| `off([event, handler])`      | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only. |
| `reload()`                   | Refresh the Integrations.                                                                                                                                                                                                                            |

### Events

| Event                | Callback                  | Triggered when ...                             |
| -------------------- | ------------------------- | ---------------------------------------------- |
| `integration:create` | `function(templateId)`    | User clicks to opens an available Integration. |
| `integration:edit`   | `function(integrationId)` | User clicks to edits an active Integration.    |

### Example

```javascript
var integrations = appmixer.ui.Integrations({
    el: '#your-integrations-div',
});
integrations.on('integration:create', async function(templateId) {
    // Create integration flow as a clone of the template. Disconnect
    // accounts because they might not be shared with the end user.
    var integrationId = await appmixer.api.cloneFlow(templateId, { connectAccounts: false });
    // Identify the clone as an integration.
    await appmixer.api.updateFlow(integrationId, { templateId });

    // Open appmixer.ui.Wizard
    var wizard = appmixer.ui.Wizard({
        el: '#your-wizard-div',
        flowId: integrationId,
    });
    wizard.open();
    integrations.reload();
});
integrations.on('integration:edit', function(integrationId) {
    // Open appmixer.ui.Wizard
    var wizard = appmixer.ui.Wizard({
        el: '#your-wizard-div',
        flowId: integrationId,
    });
    wizard.open();
});
integrations.open();
```