Beginners Guide to QlikView Extension Objects : Part 1

I thought that I might write a quick guide to creating an extension objects for QlikView 10.

What is an extension object?  Well, it allows us to create a chart using html and javascript or consume a 3rd party flash/silverlight object.  Our chart can use data from QlikView and it can pass click events back to QlikView.  Basically, we can create any chart that we want that doesn’t exist already.

You might think that there would be a whole lot of work to do to create this, but it is actually really simple to get a chart up and running and consuming QlikView data.

Extension objects live in the C:\Users\your.username\AppData\Local\QlikTech\QlikView\Extensions\Objects folder for desktop users.  Each extension must have a folder for itself.  However, you can have multiple sub-folder levels if you want.

The first thing that I will do in the Objects folder is create a sub-folder for my company’s extensions.  My company is Capricorn Ventis Ltd. so I will create a folder called CVL.  In this folder, I will create a sub-folder for each extension.  First one that I am going to create is HelloWorld (doesn’t every example have to start with a Hello World!).  Now, under the Objects folder, I have CVL\HelloWorld.

Every extension has a minimum of 1 file associated with it - Definition.xml.  This file will define the element, ExtensionObject (which can have other sub elements to, for example, set some default values):

<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject />

That’s it – simple.  We will have a look at some additional options for this file in the next part.

With this one file in the HelloWorld folder, I can now see in QlikView (in Web View mode) when I right-click and select New Sheet Object, Extension Objects, I will see my new CVL/HelloWorld object (with no icon) which I can drag onto the sheet and it will create an object.  It won’t be a very awe inspiring object (a blank box) but you can set properties (such as caption) just as you would for other charts.

We need to add a couple of things to make this just a little more advanced.  First, if we want to have an icon (and you really should), we need to add a 24x24 PNG file called icon.PNG to the folder – any design that you want.  Next, I am going to make a small modification to the Definition.xml file:

<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject  Label="CVL Hello World" />

This label will be what is displayed in the New Sheet Object dialog – next to the icon defined by the PNG file.

Now that those aesthetics are sorted out, we can make the object actually do something.  We need to add a JavaScript file that will define the code that will be run by this object.  The file is always called script.js.  This js file must define a call to Qva.AddExtension which defines a name and function that will be called when the extension loads:

Qva.AddExtension('CVL/HelloWorld', function() {
   // Set the HTML
   this.Element.innerHTML = "<h1>Hello World</h1>";
},true);

Note that the name defined in AddExtension is the same as the path to the folder as it would be from the Objects folder.  This is required.

This code is very simple – it just outputs some simple html – but it reveals how we can do some much more advanced stuff.  If we can generate html, we can output it to our application and do so much!  All we need now is some data.

In the next part, I will show you how to consume QlikView data.