Custom Integration UI

This article describes how to build UI for configuring a single integration after your customer 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 integrationApp.integration('hubspot').get()

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

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 integrationApp.integration('hubspot').openNewConnection()

Or a custom version of this UI: Custom Connection UI.

You can disconnect the integration using the following code:

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

Manage Customer-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 integrationApp.connection('hubspot').flows.list()

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

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

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

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