controller and template

controller and template are the standard AngularJS components required to render an extension using AngularJS. Both have already been comprehensively explained in Chapter 11, Coding in Qlik Sense.

When using AngularJS, the basic structure of your code compared to the paint approach looks as follows:

define(['text!./template.html'],
    function(template) { 
    return { 
        paint: function(){},
        resize: function(){},
        template: template,
        controller: ['$scope', '$element', function (scope, $element) {
            console.log("This is Mastering Qlik Sense");
        }
    };
});

The equivalent of layout in the paint() method can be found in $scope.layout object.

It's important to note there's a downside to the AngularJS approach. In the previous example, the code will only run once and will not respond to resize or selection events, which is crucial if you wish to update your visualization based on the selections which are being made on the dashboard. As such, additional functions need to be added to the code which captures this event. On the bright side, this gives you more control of how the extension is rendered, including the ability to implement D3 transitions.

Loading Resources

When developing extensions within Qlik Sense, you can reference many already existing JavaScript libraries that are being loaded with the Qlik Sense AngularJS module and are presently available in your scope. You can load these resources at the top of your extension code, using the following approach:


define( [ /* dependencies */ ], 
    function ( /* returned dependencies as arguments */ ) 
    { ... } 
);

For example, if you wish to include jQuery or d3 in your extension, all you need to do is reference them in the definition part. Extending the previous code sample, it would look as follows:

define(['text!./template.html', 'jQuery', 'd3'],
    function(template, $, d3) { 
        return { 
            paint: function(){},
            resize: function(){},
            template: template,
            controller: ['$scope', '$element', function (scope, $element) {
                $element.html("This is Mastering Qlik Sense");
            }
        };
});

This would load the jQuery and d3 modules, which can then later be referenced in the code using the $ and d3 variables.

Make sure to keep the order of loaded reference libraries consistent with the order in which the variables are defined in the function(), for example: function(template, $, d3) mixing the order up is one of the most common errors.

Furthermore, you can use RequireJS to load many more resources of different kinds, such as the following:

Style sheets / CSS files
JavaScript libraries (see the previous example)
Images
Fonts
Items from the content library

The most relevant local resources that can be loaded straightaway are the following:

jQuery
d3v4
Qlik (to use the Engine API)
AngularJS

When using local resources, be aware that you will need to import them when deploying your extension to a mashup or web application that is not hosted on the Qlik Sense server.

Bear in mind that the Extension API and the Backend API are automatically loaded and available, and they do not need to be explicitly referenced in the extension code.

Table of Contents for controller and template

Create new playlist

Sign In

Sign Up

Table of Contents for
controller and template