2 Replies Latest reply: Jul 1, 2016 9:45 AM by Frank Duchmann RSS

    How to load a jQuery Plugin into a Qlik Sense Extension

    Frank Duchmann

      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

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

          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

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

              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