You can use different types of resources in your visualization extensions, for example:
- Style sheets / CSS files
- JavaScript libraries
- Images
- Fonts
- Items from the content library
Qlik Sense load resources asynchronously using RequireJS.
Loading resources asynchronously using RequireJS
Qlik Sense uses RequireJS to take care of the asynchronous loading of resources.
define( [ /* dependencies */ ],
function ( /* returned dependencies as arguments */ ) {
...
} );jQuery is pre-configured as an internal dependency of Qlik Sense and there is therefore no need to explicitly load jQuery. By defining the dependency in the first parameter of the define function, you ensure jQuery is loaded and that the return value of this library will be passed as the first parameter in the function (the second argument of define).
Loading the predefined dependency of jQuery looks like the following.
define( [ "jquery" ],
function ( $ ) {
'use strict';
return {
paint: function ( $element, layout ) {
// We can use jQuery here
console.log($('head'));
}
};
} );Style sheets / CSS files
There are several ways of loading style sheets into your visualization extension:
- Loading and adding the content of a CSS file to the document header
- Adding a link to a style sheet to the document header
- Using the RequireJS CSS plugin
Qlik Sense set the CSS class qv-object-[extension name] on your visualizations and your CSS rules should be prefixed with that.
Loading and adding the content of a CSS file to the document header
You can use RequireJS and the text! prefix in the define statement to inject the content into the header of the current document.
Qlik Sense includes the RequireJS plugin for loading text resources, which can be used to load a specific CSS file. Assuming you have the following file structure:
When prefixing a path with text!, the text plugin loads a file and passes its content to a variable.
define( [
'jquery',
'text!./css/myStyle.css'
], function ( $, cssContent ) {
// cssContent now contains the content of myStyle.css
// Let's inject the CSS declarations into the header of the current document
$( '<style>' ).html(cssContent).appendTo( 'head' );
} );- $("<style>") creates a new object.
- The content of the cssContent variable is then assigned to the inner content of the style object.
- The style object, now including the CSS content, is added to the <head> section of the current document.
Adding a link to a style sheet to the document header
You can add a link to the style sheet and append it to the head of the document.
define( [
"jquery"
], function ( $ ) {
$('<link rel="stylesheet" type="text/css" href="/extensions/my-extension/css/myStyle.css">').appendTo("head");
} );Using the RequireJS CSS plugin
You can use the CSS loader plugin of RequireJS to load your style sheets.
define( [
"jquery",
"css!./css/myStyle.css"
], function ( $ ) {
// Nothing more is needed
} );JavaScript libraries
You can load local or external JavaScript files.
Loading local JavaScript files
Use RequireJS to add the local JavaScript file as a dependency:
define([
'./lib/js/extensionUtils'
],
function ( extensionUtils ) {
'use strict';
return {
paint: function ( $element, layout ) {
extensionUtils.doSomething();
}
};
});Loading external JavaScript files
If you want to load resources from a Content Delivery Network (CDN), see this example:
define([
'//code.highcharts.com/highcharts.js'
],
function ( highCharts ) {
'use strict';
return {
paint: function ( $element, layout ) {
// do something with highCharts
}
};
});Qlik Sense does not support exporting or printing of visualization extensions that use external resources.
Images
When including images in your visualization extension, all you need to do is referencing the path correctly so that the image works in Qlik Sense as well as Qlik Sense Desktop.
Syntax: Root path
\extensions\<YOUR_EXTENSION_NAME>\
Example:
paint: function ( $element, layout ) {
$element.empty();
$element.append('<img src="/extensions/MyExtension/lib/images/pic.png" />');
}