Load resources
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 loads resources asynchronously using RequireJS.
Loading resources asynchronously using RequireJS
Qlik Sense uses RequireJS to take care of the asynchronous loading of resources.
define( [ /* dependencies */ ],
( /* returned dependencies as arguments */ ) => {
...
} );
jQuery is pre-configured as an internal dependency of Qlik Sense so there is
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" ],
( $ ) => {
'use strict';
return {
paint: ( $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
Note: Make sure to prevent conflicts between existing styles or style definitions from other visualization extensions when you are creating style sheets. For more information, see Style your visualizations.
Tip: It is good programming practice to keep your styling in a separate CSS
file. Separating the content from the design makes it easier to maintain your visualizations.
Qlik Sense sets 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'
], ( $, 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' );
} );
Tip: See below for an explanation of the code example.
$("<style>")creates a new object.- The content of the
cssContentvariable is then assigned to the inner content of thestyleobject. - 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"
], ( $ ) => {
$('<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"
], ( $ ) => {
// Nothing more is needed
} );
Note: Using the RequireJS CSS plugin is supported as of Qlik Sense 2.0.
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'
],
( extensionUtils ) => {
'use strict';
return {
paint: ( $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'
],
( highCharts ) => {
'use strict';
return {
paint: ( $element, layout ) => {
// do something with highCharts
}
};
});
Tip: Loading JavaScript files from a CDN is a good approach if you use the same library in several visualization extensions since the browser does not have to load the resource all over again. It is also a good approach if you know for certain that the users of your visualization extension have Internet access.
Note: Qlik Sense does not support exporting or printing of visualization extensions that use external resources.