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
Data Source	Data Sources API	Data Sources UI
Field Mapping	Field Mappings API	Field Mappings UI