Embed Connection Editor in iFrame

Overview

The Connection editor can be embedded into iFrame with different parts of the UI hidden from the users.

Use Cases

Connections created by end-users, flows generated using API

In this scenario, clients can integrate Etlworks UI elements responsible for creating connections into their own UI. It allows end-users to select the available connectors from the list, enter credentials and trigger the automatically generated integration.   

Connections created by end-users, flows generated using API based on the input from the user

It is a variation of the previous scenario. In addition to allowing a user to create a connection in Etlworks, the developer can make an additional API call to retrieve metadata from the connection, such as available objects and fields. For example, assuming that Salesforce connection is embedded in iFrame the user can click on the "Get objects" button which will trigger an API call that retrieves the list of available objects for that specific Salesforce connection, such as Accounts, Customers, etc.  After the user selects objects to pull data from the developer can make another API call to automatically generate data integration flow which reads data from these objects in that specific Salesforce instance.        

Process 

iFrame URL should be set to {host}/#/app/io/connections/{connection_id}, where {host} is an instance hostname and {connection_id} is either an existing Connection ID or a string new-{connection_type} to create a new Connection with specified {connection_type}.

Several query parameters can be added to configure different parts of the screen, and one required parameter is used for the authentication:

• token: JWT authentication token that can be acquired through Authentication API (required parameter).
• embedded=true: removes side and top bars.
• ioEditorOnly=true: removes the list of Connections sidebar.
• ioName: optional name for the new Connection, so that it is already set at the start and the user doesn't have to enter it (must be URL encoded).
• ioNameDisabled=true: disables Connection name input, assuming it is not empty.
• ioHeaderHidden=true: completely removes IO editor header, assuming name input is not empty.