Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
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
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
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
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