qlik-isolated

Load Qlik Sense's qlik.js in an isolated, non-conflicting way and embed Qlik Sense objects into your web page

:zap: live demo :zap:

Angular? Check out ng-qlik-isolated

Use case

• you want reference to qlik.js' qlik object to access the App API

• you do NOT want to load qlik's require.js directly as it in-turn loads Qlik's version of libraries (jquery, angular, require) which may conflict with your website's

• you want to load qlik.js on-demand but avoid conflicts like WARNING: Tried to load angular more than once, jQuery version conficts etc.

• you want to dynamically embed qlik sense objects (charts, sheets, selection bar) without worrying about CORS and virtual proxy settings

Usage

:page_facing_up: see wiki for complete reference

through npm

npm install qlik-isolated

Include the qlik-isolated.js file

<script src="qlik-isolated.min.js"></script>

Get Qlik object

qlikIsolated
    .getQlik('http://<qlikserver>:<port>')
    .then(function(qlik){
        // qlik object can be access here
    })

Embed a qlik object (chart, sheet etc)

qlikIsolated
    .getObjectIsolated(	$('#myDiv'),  \\ element
    			'My App.qvf', \\ app id
    			'prgzES',     \\ object id
    			'eRxSeT',     \\ sheet id (optional, if object id is specified)
    			'http://<qlikserver>:<port>'); \\ Qlik Server URL 
    

Embed selection bar

if you have a number of qlik objects and would like a common selection bar say, at the top

qlikIsolated
    .getSelectionBarIsolated($('#header'),  \\ element
			   'My App.qvf',       \\ app id
			   'http://<qlikserver>:<port>'); \\ Qlik Server URL 
    

Auto load Qlik upon page load

To automatically load qlik.js and make it globally available through the window object, add a qlikIsolatedLoadConfig object before the qlik-isolated.js script reference

<script>
    var qlikIsolatedLoadConfig = {
        url : 'http://<qlikserver>:<port>',
        makeGlobal : true
    }
</script>
<script src="qlik-isolated.min.js"></script>

Under the hood

Loading qlik.js

An iframe is created through which Qlik's require.js is loaded. When require loads qlik, the qlik object is passed to the parent frame

Embedding qlik objects

Single integration API iframes are created dynamically and added to the DOM

P.S

#experimental works fine for most basic App API related stuffs. Haven't tested every single App API endpoint though

License

MIT