Sunday 9 January 2011

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.

24 comments:

  1. Hi Stephen,

    Very nice and useful post.

    i was following your above post to create my 1st extension chart.i`m getting the Extension object on Qv but when i tried to drag the object in Qv it is throwing me the following error. Pl help me to debug this error.

    "An Erro has occured in the script on this page

    Line: 3033
    Char: 16
    Error: 'Qva.Mgr[...]prototype' is null or not an object
    Code: 0
    URL: http://qlikview/QvQjaxZfc/QvAjax.js

    Do You want to continue running Script on this page?"

    ReplyDelete
    Replies
    1. Hi Shridhar,

      You probably have the subfolder and name of your extension wrong in your script.js file:

      Qva.AddExtension('SubFolder/ExtensionName', function() {
      ....
      }

      It should be the same as the location of the extension within the $APPDATA/QlikTech/Extensions folder.

      Delete
    2. For others running into the same problem. Remember using forward slashes in the .js file. And "Objects" should not be part of it.

      Delete
    3. Hi Shridhar, don´t create de folder "CVL" and paste directly de HelloWorld folder in the Objects folder. This worked for me.

      Delete
  2. Hi Stephen...
    Can I do this example in QlikView Trial version?
    Why I am asking this,there is no such folder named QlikTech in my system.I could found the path upto D:\Users\Rams\AppData in my system,and there is no Local folder.Presently I am using trial version.

    ReplyDelete
  3. Hi,

    Local is a Windows default folder, not a QlikView one so the folders may be hidden. Change your settings to show hidden folders.

    It should work fine in Personal Edition. PE is a fully functioning version of QlikView - the only restriction is on the QVWs that you create with it.


    Stephen

    ReplyDelete
  4. Hi Stephen,
    Thanks for your quick reply. I have changed my settings as you told.Now that folder is visible .But,I have a small doubt,I have installed QV in 'D' drive,but my OS is in 'C' drive.I could find Local\QlikTech\QlikView in 'C' drive. If I create Extension object there,does it work?

    Thanks,
    Rams

    ReplyDelete
  5. Hi,

    Again, the Local is a Windows folder so it shouldn't matter where QlikView is installed.


    Stephen

    ReplyDelete
  6. And there are no Extensions\Objects folders.Shall I need to create those folder in QlikView folder?.
    If you dont mind can I ask one question which is out of this context?
    How to create web application from QlikView.I have seen that we can change to Desktop View to WebView vice versa.
    But,how to create url, I mean how to run that application in browser.
    I am new to QlikView, plase help me.....

    ReplyDelete
  7. Hi Rams,

    If you have a QlikView server then you can deploy your QVW there and it can be connected to via web (or thicker clients). The "Web View" is just to show you how it will look once deployed.

    Regards,


    Stephen

    ReplyDelete
    Replies
    1. Hello Stephen, i'm using Org Chart in my application but the chart is not visible in the browser. Plz help

      Delete
  8. Thank you very much for this tutorial!! It was VERY helpful for me.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. After BDWT I got inspired learning about extensions. Feels like this was a great place to start. Well written, easy to understand. Now I just have to set aside some hours for the actual hands on experience. I wo.t become a good QlikView Extension JavaScript developer by only reading about it on your blog.

    Cheers
    Vegar

    ReplyDelete
    Replies
    1. Hi Vegar,

      I am new to Qlikview extensions, i have a requirement to show Job dependencies flow diagram using extensions, we have three columns, predecessor, task and sucessor. I have checked all of the extensions available like Sankey, directed diagram, Icon graph. but they all uses two dimensions. will you please help me guide which extension i should use which will except three dimensions and when i click on any of the nodes it should its predecessor and successor. Please email me at fouzia.khan47@gmail.com

      Thanks a lot

      Delete
  11. Hi,
    I'm new to QlikView. I have followed your instructions to create extentions. But I could not find the newly created extension under the 'Extension Objects' in QV. Below are my folder structure and the corresponding definition file:

    C:\Users\skrajima128\AppData\Local\QlikTech\QlikView\Extensions\Objects\CVL\HelloWorld\Definition.xml

    Definition.xml
    ----------------------


    ReplyDelete
    Replies
    1. If the Definition.xml and the script.js are both in that folder and both are exactly as written above, then the extension will appear.
      Try pressing F5 to refesh (or just close and re-open QlikView Desktop).

      Delete
  12. Hi,
    I am able to drag & drop Hello World extension, but getting an error "Unable to get property 'prototype' of undefined or null reference". (Line 417, Char 94810). Earlier I have followed the same folder structure, after that removed the subfolder HelloWorld modified the JS file too.

    Please let me know is there anything that I need to modify.

    Thanks.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. After comparing the other samples already loaded, the file path referred in JS file modified as 'QlikView/Examples/CVL' and it started working.
      Thanks for the blog.

      Delete
  13. Hi Stephen and all,
    Please tell me how to include the icon.png file. Which file to insert and how(the code)? I know its simple but I'm a beginner. Please help. Thanks in advance.

    ReplyDelete
  14. hello Stephen,
    please i want to know how to modify an extension to customise it.

    ReplyDelete

Note: only a member of this blog may post a comment.