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

Introduction

 

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 www.qlikanddirty.com 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;
 
        owner.AddManager(this);
 
        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;
 
            }
 
        }
 
        element.style.display = 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('<u>https://getfirebug.com/firebug-lite.js</u>', function(){
 
extensionInit();
 
});

 

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&lt; dataset.length; b++){
 
console.log(dataset[b]);
 
}

 

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

qlik1

 

When you’re ready, move on to the first step in creating your chart here: http://qlikanddirty.com/2016/08/25/step1-creating-a-basic-d3-chart/

References

 

Qlikview extension template by bmz‌ on https://community.qlik.com/docs/DOC-3742

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

Notepad++ https://notepad-plus-plus.org/download/v6.9.2.html

D3 Formatting http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

http://www.d3noob.org/2012/12/setting-scales-domains-and-ranges-in.html

A little note on G in svg http://tutorials.jenkov.com/svg/g-element.html‌ and SVG Group Element and D3.js | DashingD3js.com

D3 basic bar chart https://bost.ocks.org/mike/bar/

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/API.md 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

_adams-template-file

Leave a Reply