Custom Integration UI

This article describes how to build UI for configuring a single integration after your tenant created a Connection. If you are looking for how to create a Connection in the first place, check out Custom Connection UI.

Get Integration

To get information about the integration and its connection, do the following:

const integration = await membrane.integration('hubspot').get()

To understand the state of the connection for a given integration, look at the following fields to display in the UI:

Field	Description
`connection`	If this integration has a connection established for the current user, this field will be non-empty
`connection.disconnected`	If a connection is disconnected and requires user to re-connect, this flag will be set to true.

Re-connect and Disconnect

You can use the following code to re-connect an integration if it was disconnected or if the user wants to re-connect for any other reason:

await membrane.integration('hubspot').openNewConnection()

Or a custom version of this UI: Custom Connection UI. You can disconnect the integration using the following code:

await membrane.connection('hubspot').archive()

Manage Tenant-level Elements

To know which Flows, Actions, Data Sources, or Field Mappings are configured for the current integration, you can get their list this way:

const { items: flowInstances } = await membrane.connection('hubspot').flows.list()

const { items: actionInstances } = await membrane.connection('hubspot').actions.list()

const { items: dataSourceInstances } = await membrane.connection('hubspot').dataSources.list()

const { items: fieldMappingInstances } = await membrane.connection('hubspot').fieldMappings.list()

Then you can use the corresponding elements API and UI to manage them:

Element	API	UI
Flow	Flows API	Flows UI
Data Source	Data Sources API	Data Sources UI
Field Mapping	Field Mappings API	Field Mappings UI

Overview

Workspace Elements

Management API

Get Integration

Re-connect and Disconnect

Manage Tenant-level Elements

​Get Integration

​Re-connect and Disconnect

​Manage Tenant-level Elements

Get Integration

Re-connect and Disconnect

Manage Tenant-level Elements