Skip to main content
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:
FieldDescription
connectionIf this integration has a connection established for the current user, this field will be non-empty
connection.disconnectedIf 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:
ElementAPIUI
FlowFlows APIFlows UI
Data SourceData Sources APIData Sources UI
Field MappingField Mappings APIField Mappings UI