Loading resources

You can use different types of resources in your visualization extensions, for example:

Style sheets / CSS files
Images
JavaScript libraries
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

Make sure to prevent conflicts between existing styles or style definitions from other visualization extensions when you are creating style sheets. See Styling your visualizations.

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' );

    } );

See below for an explanation of the code example.

$("<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

    } );

Using the RequireJS CSS plugin is supported as of Qlik Sense 2.0.

Learn more

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here