Integrations

appmixer.ui.Integrations

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

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