Custom Data Source UI

When a Data Source has multiple possible data locations, you may want to give your customers the ability to choose between them.

Getting a Data Source

First, access a customer data source for the Connection and Data Source you want to work with:

const dataSourceInstance = await integrationApp
  .connection('hubspot')
  .dataSource('{DATA_SOURCE_KEY}')
  .get({ autoCreate: true })

Get information about the current Collection

To get the name and other information about the currently selected Data Collection, use this code:

await integrationApp
  .connection('hubspot')
  .dataCollection('{DATA_COLLECTION_KEY}')
  .get()

If there is no collection selected by default, null will be returned as the result.

When a collection is selected you can display the name of the collection to the customer.
In some collections (say, Sheets in Google Sheets or Contacts in List in Hubspot) you will see parametersSchema present in the collection object—display the form that will allow the customer to set them (some of them may be required, you will also see this from the schema).

Get list of available Data Collections

When a customer wants to change the selected collection you need to display a list of the available data locations. To do it use this code:

await integrationApp
  .integration('hubspot')
  .getDataCollections()

If the data source does not have any locations to navigate, this will return an empty list.

Selecting a Collection

When your customer selects a new collection for a data source, you can save it using the patch method:

const dataSourceInstance = await integrationApp
  .connection('hubspot')
  .dataSource('{DATA_SOURCE_KEY}')
  .patch({
    collectionKey: '{COLLECTION_KEY}',
    collectionParameters: '{COLLECTION_PARAMETERS}',
  })

After, check if the collection has parametersSchema and ask the customer to fill them as well, if needed.

See More