Skip to main content
Version: 3.0.17

Customizing rendering

The SDK rendering configuration comes with sensible defaults so you can get started quickly. Let's see what those defaults are and how to configure them to your liking.

Using preset layouts​

We ship some commonly used layout presets with the SDK. Templates can be shown in a table view in rows, or a grid view.

To configure a preset, please provide the x-integry-layout attribute on the container div as shown:

<body>
  <div id="x-integration-container" x-integry-layout="GRID | LIST"></div>
</body>

List view​

Grid view​

Overriding template form rendering​

If your requirement is to perform a custom action whenever a user wants to set up an integration, you'll need to specify this in the SDK configuration as follows by setting the renderMode to detached. The custom actions can be opening your own modal or navigating to a new page among others.

// initialize integration view in our container
sdkInstance.init({
  containerId: 'my-integry-container',
  renderMode: IntegryJS.RenderModes.DETACHED,
});

In this mode, the SDK will broadcast an event after an attempt to create an integration from a template is made.

sdkInstance.eventEmitter.on('should-load-flow', (data) => {
  alert(`Flow with ID: ${data.templateId} clicked`);
});

At this stage, you can perform actions such as opening your own modal or navigating to a new page. You are responsible for calling the SDK function renderFlowSetupForm({ flowId?: string; flowContainerId: string; }) after destination container is available in the DOM. This function can be called on the same SDK instance, or a new instance with renderMode set to DETACHED.

info

If you do not specify the flowId when calling renderFlowSetupForm, the SDK will attempt to find the ID in the URL of the new page as the query parameter flowId.

Customizing label names​

Default labels for the SDK embed view are 'Available Flows' and 'My Flows'.

In order to change these to ones of your choice, it is possible to pass a configuration object when initializing the SDK.

const integryHandle = new IntegryJS({
  appKey,
  hash,
  deploymentId,
  userId,
  userConfig: {
    availableFlowsLabel: 'Flows',
    myFlowsLabel: 'Configured Flows',
  },
});

The view will now be updated to reflect the change.

Last updated on