qlik-isolated

    1.0.7 • Public • Published

    qlik-isolated

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

    ⚡️ live demo ⚡️

    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

    📄 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

    Install

    npm i qlik-isolated

    DownloadsWeekly Downloads

    2

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • hrivks