PreReading- Qlikview Extension in a few easy steps and with an improved template



Having used Qlikview for many years, I decided it was time to learn about extensions.

I come from a financial background with some SQL and no javascript or web experience, so I am pretty much starting from scratch.


As with many things Qlik, I found the information to be very sparse, hard to track down and sometimes incredibly technical which means it can take a very long time to get to a point where it all makes sense and I nearly gave up a couple of times.


So I’ve referenced my sources here to bring everything in to one place and this absolutely doesn’t replace any of the sources I have used, it just collects and expands on them. Without these excellent articles I would never had learned how to bring all this together.


Selfishly this is also great for me as even as I have been writing this I’ve learned extra bits about what I have done and how things work.


The first two parts of this tutorial are published here on the community, will the remaining chapters on my blog which you can of course access openly.


Steps to follow


Firstly download some D3 code, open it up in notepad++ and try and hack it into a Qlik extension then get annoyed it doesn’t work.

Ok well that is how I started, then I took a deep breath and realised that this probably wasn’t something I was going to be able to learn by hacking pieces of code together from google . So I decided to build my extension up piece by piece so I could digest everything and learn what each bit did and how it interacts with Qlik.


So the sensible steps to follow (depending on your existing knowledge) are:


  1. Take the Javascript Course on code academyJavaScript | Codecademy
  2. Fill in that knowledge with the css bits from w3schools JavaScript Tutorial
  3. Work through the excellent examples by barryharmsenon QlikView Extension tutorials, documentation and examples – The Qlik Fix! The Qlik Fix!
  4. Learn to love the extension template by bmz on Object Extension Templates
  5. Make my tweaks to the extension template (See attached file)
  6. Go Nuts with D3


When you’ve worked through steps 1-3 and digested step 4 then this is where this tutorial fits in.


The Extension Template Script.js (adjusted)


Before we try anything, lets get to grips with this extension template. If you look at the code off the bat its going to scare the %£$ out of you, but actually Brian explains it very well and I’ve expanded on this below with the little tweaks I have added or where I think a little explanation is needed.

Run the qar file and it will extract the template to your extensions folder and then navigate to it and open up the Script.js file.


The Name, Path and Files Required


The first two lines just set up some simple variables for the extension name and path


var extensionName = "_Adams Template File"; //remember to also update this in definition.xml 

var extensionPath = Qva.Remote + "?public=only&name=Extensions/" + extensionName +"/";


I slightly changed the template so you only have to enter your extension name in one place, as you will see from my comments this is because I spent hours looking for a simple / which I had missed from the extension path.

It also means when we add the actual extension code, we don’t have to type the name again.


The next step is to load the additional JavaScript files which you might want, again I changed this purely as I didn’t like the nesting of functions, I think this just reads a bit easier:

*EDIT* Since publishing I’ve found Qlik can crash if you overload it with files in the push, so the new template includes an example of the nested load in case you need to load it */EDIT*

function extensionInit() {

  var jsfiles = [];

  //load jquery if required

  if (typeof jQuery == 'undefined') {

  jsfiles.push(extensionPath + "jquery.js");


  //Pushing any other js files

  jsfiles.push(extensionPath + "d3.v3.min.js");

  //jsfiles.push(extensionPath + "additionalfileshere.js");


  //now load these and call next function

  Qva.LoadScript(jsfiles, extensionDone);

  } //end extension_Init


So rather than nesting Qva.LoadScript functions, we just push the files we want into an array and then call this.

Breaking down the code by way of explanation:


Just declare the function and then set a variable ( [ ] means blank array) to hold the script names


function extensionInit() {

  var jsfiles = [];


This is standard code to check if jQuery is loaded or not and if not then it loads this as the first items into our array.


if (typeof jQuery == 'undefined') {

  jsfiles.push(extensionPath + "jquery.js");



Then we can just repeat the push line for any other files that we want to load. In this case we want to load the d3 script.


jsfiles.push(extensionPath + "d3.v3.min.js");


Finally we just tell qlikview to load the files and then call the next function to run which is the extension function.


  Qva.LoadScript(jsfiles, extensionDone);

  } //end extension_Init


Then a Big Chunk of Confusing Code


Ignore it! I did after figuring out that it is basically required to enable click events in the extension. I just took it as wrote and left it well alone.


if (Qva.Mgr.mySelect == undefined) {

    Qva.Mgr.mySelect = function (owner, elem, name, prefix) {

        if (!Qva.MgrSplit(this, name, prefix)) return;


        this.Element = elem;

        this.ByValue = true;

        elem.binderid = owner.binderid;

        elem.Name = this.Name;

        elem.onchange = Qva.Mgr.mySelect.OnChange;

        elem.onclick = Qva.CancelBubble;


    Qva.Mgr.mySelect.OnChange = function () {

        var binder = Qva.GetBinder(this.binderid);

        if (!binder.Enabled) return;

        if (this.selectedIndex < 0) return;

        var opt = this.options[this.selectedIndex];

        binder.Set(this.Name, 'text', opt.value, true);


    Qva.Mgr.mySelect.prototype.Paint = function (mode, node) {

        this.Touched = true;

        var element = this.Element;

        var currentValue = node.getAttribute("value");

        if (currentValue == null) currentValue = "";

        var optlen = element.options.length;

        element.disabled = mode != 'e';

        //element.value = currentValue;

        for (var ix = 0; ix < optlen; ++ix) {

            if (element.options[ix].value === currentValue) {

                element.selectedIndex = ix;


        } = Qva.MgrGetDisplayFromMode(this, mode);



Loading the Extension Code


This is where the main code gets loaded, there is only one small change I made here and that is to use the extension name variable we set as the first line, rather than having to retype it (KISS!)


Qva.AddExtension(extensionName , function(){



Finally Some Debugging


I REALLY like this little bit of code thank you dgudkov BI Review: Building extensions in QlikView: some hints & tips Firebug is one of the best debugging tools and its available as a firefox add-on, however with this little bit of code you can run it in any browser, just hit F12 when in the document on the access point.


However it does also present within the Qlikview application. While it can’t read the script files to help debugging (Javascript can’t load local files) it does display the console which is really useful as you can console.log() messages to test things.


This is a slight tweak on the way Dmitry uses it, again for simplicity’s sake I found it easier just to run the extensionInit function inside it as that is the function which everything runs from


Qva.LoadScript('', function(){





For example I wanted to double check the values in an array so I used the following code (you can use window.alert etc as well):


console.log("your max value is "+d3.max(dataset));

console.log("The array values are:");

for (var b=0; b< dataset.length; b++){





And there you go, right there in your application you’ve got the console window showing you your debugging values:



When you’re ready, move on to the first step in creating your chart here:



Qlikview extension template by bmz‌ on

Extension tutorials by barryharmsen on QlikView Extension tutorials, documentation and examples – The Qlik Fix! The Qlik Fix!

Extension tips and tricks by dgudkov‌ BI Review: Building extensions in QlikView: some hints & tips


D3 Formatting

A little note on G in svg‌ and SVG Group Element and D3.js |

D3 basic bar chart

Qlikview SDK QlikView Version 11 SDK | Qlik Community

Basic D3 bar by ajlandry‌ GitHub – wallyflops/d3Graph: Trying to get d3.js working in a QV extension (any graph can be added on later, in theory)

D3 API Documentation d3/ at master · d3/d3 · GitHub


Supporting Files

Please note that you will need to change the extension from .zip to .qar to get them to auto install in the correct directory


Leave a Reply