A few notes on integrating Qlik Sense visualizations into your webapp

[Francis_Kabinoff]

Overview

I've seen a few questions regarding integrating Qlik Sense visualizations into existing webapps lately, and figured I'd lay out a few tips here that may be of help.

There's really two ways of integrating Qlik Sense visualizations into your webapp, by either using the Capability APIs or iFrames. I'll discuss the pros and cons of both.

Capability APIs

The Capability APIs include the Root API, the App API, and the Visualization API, among a few others. The Root API is used to connect to an app, and either the App API or the Visualization API can be used to then embed Qlik Sense objects onto the sheet. There's quite a few resources regarding the details of actually doing this available already, so I'll skip that, but if there's any questions surrounding it, let me know. What I do want to talk about is the pros and cons of using the Capability APIs vs iFrames.

The pros of the Capability APIs are that all you have to do to use them is load the assets that are conveniently served from the Qlik server, supply a config, require the qlik.js file, and you're set. You can quickly get up and running, and you're able to not only embed existing visualizations, but you can create visualizations on the fly using the Visualization API and patch them as you go. So, it's easy to get going, and to embed, create, or even update visualizations on the page.

The downside is that the assets needed for the Capability APIs include Require.js and Angular 1.5.8, and they're both globals that can be quite intrusive, and force you to redesign your existing app to play nicely with their residency in the global scope.

iFrames

And that's exactly the best thing about iFrames. Since an iFrame is totally encapsulated from its parent page, there's no issues with existing assets and assets needed to embed Qlik visualizations colliding. And for all the other features that the Capability APIs offer, you can simply use enigma.js, which can share the same session as the iFrame'd objects.

One of the things to watch out for when using iFrames is that Internet Explorer, by default, only allows a maximum of 6 concurrent connections. So that's a limitation if you need to support IE. Another thing that you won't be doing is creating any visualizations on the fly.

Hybrid

To help overcome the websocket number limit, or if you really need to create visualizations on the fly, but also want to use the iFrame approach, what you can do is instead of embedding visualizations using iFrames, you can create a mashup, and then embed that into your webapp in an iFrame. Using HTML5's window.postMessage API, you can enable communication between your app and the mashup in the iFrame, and you can also still use enigma.js in your webapp.