--- title: Loading Resources lastUpdate: "2015-07-03" abstract: tags: - visualization extension - extension - Qlik Sense - CDN - RequireJS - CSS - images - include draft: true --- In this chapter you'll learn how you can use several types of resources in your visualization extensions, e.g. * Style sheets / CSS files * JavaScript libraries * Images Before we start, let's recap how Qlik Sense manages to load resources asynchronously, thus using RequireJS. ## Repetition: Using RequireJS Qlik Sense uses [RequireJS](http://requirejs.org/) to take care of asynchronous loading of resources. First of all let's remember how RequireJS works: Anatomy of loading dependencies using RequireJS: ``` javascript define( [ /* dependencies */ ], function ( /* returned dependencies as arguments */ ) { ... } ); ``` So loading the predefined dependency of jQuery would work as follows: ``` javascript define( [ "jquery" ], function ( $ ) { 'use strict'; return { paint: function ( $element, layout ) { // Now we can use jQuery here console.log( $('head') ); } }; } ); ``` ***Explanation:*** jQuery is pre-configured as an internal dependency in Qlik Sense, so there is no need to load jQuery explicitly. By just defining the dependency in the first parameter of the `define` function, you can then be sure that jQuery is loaded and that the return value of this library will be passed as the first parameter in the function (second argument of `define`). Since we will use RequireJS in some of the solutions below, it's important to understand how this approach works. ## Stylesheets / CSS files If you want your custom styles (defined in one ore more CSS files) to be considered in your visualization extension we have to load them first. There are several ways how to achieve that: 1. Loading and adding the content of a CSS file to the document's header 2. Adding a link to a style sheet to the document's header 3. Using the RequireJS CSS plugin {{#hint}} When creating style sheets, always make sure to prevent conflicts with existing styles or style definitions from other visualization extensions. A good guide can be found in the official Qlik Sense developer documentation: ([Styling your visualizations](http://help.qlik.com/sense/2.0/en-us/developer/Subsystems/Extensions/Content/Howtos/working-with-styling.htm)). {{/hint}} ### 1) Loading and adding the content to the document's header Using RequireJS and the `text!` prefix in the `define` statement of your visualization extension can be used to inject the content into the header of the current document: In Qlik Sense the RequireJS [plugin for loading text resources](https://github.com/requirejs/text) is included, which we can use to load a specific CSS file: Let's assume we have the following file structure: ```batch .my-extension |── css |── myStyle.css |── my-extension.qext |── my-extension.js ``` By prefixing a path with `text!` the text plugin will load a file and pass it's content to a variable. ```js 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 $( '