Integrations

Manage flows used as integration templates and instances.

Integrations

Configuration

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

const integrations = appmixer.ui.Integrations(config)

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

config.el ...

Learn about widget config here.

config.options

Type: Object | Default: {}

config.options.customFilter

Type: Object | Default: {}

Filter the integrations with additional parameters:

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',
    }
  }
}

The customFilter option can also be an array for templates and instances:

appmixer.ui.Integrations({
    /* ... */
    options: {
        customFilter: [
            { 'customFields.category': 'your-category-for-templates' },
            { 'customFields.category': 'your-category-for-instances' }
        ]
    }
});

Updating the Custom Filter Dynamically

You can change the custom filter after the widget has already been initialized. For example, when a user selects a new category, you can update the filter and reload the widget:

// Get the current widget options.
const currentOptions = integrations.get('options') || {};

// Override the custom filter and keep the rest of the options unchanged.
integrations.set('options', {
    ...currentOptions,
    customFilter: {
        'customFields.category': 'finance'
    }
});

// Reload the widget to apply the updated filter.
integrations.reload();

Instance

Learn about widget instance here.

State

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

integrations.on(event, handler)

integration:create

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

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

integration:edit

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

Click a button to edit integration.

integration:remove

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

Click a button to remove integration.

integration:start

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

Click a button to start integration.

integration:stop

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

Click a button to stop integration.

Example

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