Sunday, 9 January 2011

Beginners Guide to QlikView Extension Objects : Part 2

In the last part, I showed how to create a really basic extension object.  Now, I will build on that to use data from my QlikView application.

I am going to add a sub-folder to my CVL folder called “BasicTable” (so, CVL\BasicTable will be the sub-folder).

I need a definition.xml, icon.png and script.js.  The quickest way to build these is to copy them from the previous project and then modify.

The initial contents of my definition will be:

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

Now, we can concentrate on the JavaScript to generate the output.

The QlikView object holder (which we can access via “this” in our JavaScript) defines an object called “Data” which will define the data passed by the object from the QlikView document.  The data passed will depend on the Dimensions and Expressions defined in the properties of the object.

The Data object has a Rows property.  Each Row in Rows is an array of values.  The index corresponds to the number of Dimensions and Expressions.  In a simple example, with one Dimension and one Expression, there will be 2 values in the array – 0 and 1.  In multi-dimensional or multi-expression objects, the Dimensions will be the first values in the array, followed by the Expressions.

Lets define some code to cycle through the data and present it in a simple html table.

Qva.AddExtension('CVL/BasicTable', function() {

        // Create a variable to hold generated html
        var html = "<table>";

        // Cycle Through the data
          for (var i = 0; i < this.Data.Rows.length; i++) {
                // get the row
        var row = this.Data.Rows [i];

                // Generate html
                html += "<tr><td>" + row[0].text + "</td><td>" + row[1].text + "</td></tr>";
    }

        // Finalise the html
        html += "</table>";

        // Set the HTML
    this.Element.innerHTML = html;

},true);

Now, if you add this object to a document, you won’t see anything.  This is because we need to specify the Dimension and Expression first before any data will become available.

It is possible to define a default, of sorts, for Dimension and Expression.  You could define an actual name or expression but, not every document might have that name and this could cause problems.  If we set a blank default for Dimension and Expression, then QlikView will pick the first dimension and the sum of the first number value in the document as defaults.  This gives something to show when the object adds (which might cause other problems!).  To do this, we modify the definition.xml file.  I am also going to define a default caption here:

<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject Label="CVL Basic Table">
    <Dimension Initial="" />
    <Measurement Initial="" />
    <Initiate Name="Caption.Text" value="CVL Basic Table" />
</ExtensionObject>

By the way, if you do make changes to the definition.xml or script.js files, it is not necessary to close and reopen QlikView to see those changes.  Simply press F5 and QlikView will refresh.  This is very useful in debugging.

Speaking of debugging, I’m afraid that the best way I have found to debug these JavaScript files is to add alert statements.

In the next part, I will show how to add code to handle when a user clicks in your custom object that will make a selection in your QlikView document.

8 comments:

  1. Great Introduction. I exactly the same. But the problems is that I have more than 200 values in the field are selected, but it seems only the top 40 are passed to the extension. (the this.Data.Rows array contains only 40 Rows). I have never set 40 anywhere. How can I use all data?

    ReplyDelete
  2. I need on calender extension object, can any one guide me developing it or passing on the .qar file

    Please it is very Urgent

    ReplyDelete
  3. Hi,
    I m unable to view my Org Chart using extension object in QV 11 in the Browser. Any idea ?

    ReplyDelete
  4. How do you access the object's properties? I would like to change the size, position, and visibility of an object. I tried coding something like this and it didn't work.

    this.style.backgroundColor="yellow";

    ReplyDelete
  5. This is so essential post. This information helps them who are new bloggers. Thanks for helpful post for us.
    Real Estate Investment

    ReplyDelete
  6. Hi,
    Even I am facing same problem, not able to see data except first 40 rows,..please help..

    ReplyDelete
    Replies
    1. Hi,

      Default PageHeight is 40, default PageWidth is 20. Which means 40 rows and 20 columns by default.

      Details find here

      Full JavaScript API helps you.

      P.S. Stephen thanks a lot for your blog and your books!

      Delete
  7. This comment has been removed by a blog administrator.

    ReplyDelete