Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

fduchmann
New Contributor III

How to load a jQuery Plugin into a Qlik Sense Extension

Hello Qlik-Community,

I try to load a jQuery Plugin into my Qlik Sense (3.0) Extension without any luck.

The Plugin is called Tipsy, its a simple javascript Tooltip Library which works fine with SVG Elements.

GitHub - jaz303/tipsy: Facebook-style tooltips plugin for jQuery

tipsy

The jQuery Plugin is as far as I know not an AMD / RequireJS Module  so I have to Shim it with requireJS.

The beginning of my Extension Script looks like this:

requirejs.config({

    paths:{

        "tipsy": "js/tipsy"

    },

    shim: {

        "tipsy": {

            deps: ["jquery"],

            exports: "tipsy"

        }

    }

});

define(["./properties",

        "jquery",

        "qlik",

        "./js/d3.v3.min",

        "./js/dagre-d3",

        "tipsy",

        "css!./css/custom.css",

        "css!./css/tipsy.css",

        /* dependencies go here seperated by ,  */],

    function(props, jquery, qlik, d3, dagreD3, tipsy/* returned dependencies as arguments */ ) {

        ......

        paint: function($element, layout){

              

               // Here I want to use the jQuery Plugin Tipsy

              

          }

I always get an Error that tipsy is not found.

How can I load an jQuery Plugin correctly into my Qlik Sense Extension?

Hope someone can help me.

Best regards

Frank

1 Solution

Accepted Solutions
erik_wetterberg
Honored Contributor

Re: How to load a jQuery Plugin into a Qlik Sense Extension

Hi Frank,

Requirejs can be a bit complicated.. You could try with the full path in the shim, so something like this:

shim:{

  "extensions/your-extension/tipsy":{

     deps: ["jquery"],

     exports: "" //I don't know if this is needed and if it should be the whole path

  }

}

and refer to it relative to your main extension file:

define(....."./tipsy"

Please forgive me if this does not work, I haven't actually tested this, but I've done like this in some extension. And do let us know if it does work.

Erik

Erik Wetterberg
https://extendingqlik.upper88.com/
2 Replies
erik_wetterberg
Honored Contributor

Re: How to load a jQuery Plugin into a Qlik Sense Extension

Hi Frank,

Requirejs can be a bit complicated.. You could try with the full path in the shim, so something like this:

shim:{

  "extensions/your-extension/tipsy":{

     deps: ["jquery"],

     exports: "" //I don't know if this is needed and if it should be the whole path

  }

}

and refer to it relative to your main extension file:

define(....."./tipsy"

Please forgive me if this does not work, I haven't actually tested this, but I've done like this in some extension. And do let us know if it does work.

Erik

Erik Wetterberg
https://extendingqlik.upper88.com/
fduchmann
New Contributor III

Re: How to load a jQuery Plugin into a Qlik Sense Extension

Hello Erik,

thank you very much for your answer. RequireJS is realy complicated if you want to add a non conform library :-(

But your hint was correct. My Script looks now like this and is working :-)

requirejs.config({

    "shim": {

        "extensions/ProcessExplorerD3/js/tipsy": {

            "deps": ["jquery"],

            "exports": ""

        }

    }

});

define(["./properties",

        "jquery",

        "qlik",

        "./js/tipsy",

.......

function(props, jquery, qlik   /* returned dependencies as arguments */ ) { ........

Note that no argument for the function is needed, because the library is a jquery plugin so you can use it like this:

jquery().tipsy();

Thank you very much.

Frank

Community Browser