QlikView Extensions – rolling up the DOM in Style


QlikView Extension Objects allow a developer to create their own, custom objects in QlikView by using XHTML, CSS and JavaScript.  In this blog post, I’m going to show you how to (a) discover what type of HTML Element “this.Element” really is, (b) what its HTML Attributes are, (c) what its lineage is (parent, grandparent, great-grandparent, etc.), and (d) how to present this information is a way that ‘stands out’.

Create your Definition.xml file.  For this demo it can be the bog-standard ‘HelloWorld’ offering found in any old ‘QlikView Extension Object’ blog/forum post.

Next, create the Script.js file as so:

Qva.AddExtension("HelloWorld", function() {    
    var e = this.Element;
    var p = document.createElement('p');
    e.appendChild(p);

    p.innerHTML="";

    var j = 1;
    while (e.tagName !== undefined) {
        p.innerHTML += '<br/><br/>' 
            + j + ': ' 
            + e.tagName;
        for (var i = 0; i < e.attributes.length; i++) {
            p.innerHTML += '<br/>' 
                + e.attributes[i].nodeName 
                + '=' 
                + e.attributes[i].nodeValue;
        }
        e = e.parentNode;
        j = j + 1;
    }
});

Here, I’m assigning the ‘this.Element’ to a variable (‘e’), creating a new paragraph element (p) and adding it to the DOM (‘e.appendChild(p)’). I then re-set the innerHTML of this newly created and added element (p.innerHTML=””). Then I loop through e’s parents, one by one, until I reach the root element (HTML) which has no parent (ie. undefined). For each element found, I’m looping through its attributes and adding the attributes Name and Value to the innerHTML of p. The end result is:

QVOE

Not very exciting but, nonetheless, very informative. From “1.” we can see straight away that “this.Element” is a DIV element. Furthermore, it is descended from many other DIVs – 4 deep from the BODY element. You can modify the above code to traverse the DOM. For example, go up to HTML and drop down to HEAD and see what LINKs are being called.

Now, to “spice it up” a bit, let’s add some CSS. QlikView 11 and 12 support CSS3 animations so let’s implement some. Create a “main.css” file in the same directory as your Script.js and populate it as follows:

@keyframes pulse {
    0% {
        color: rgb(255,255,255);
    }
    100% {
        color: rgb(255,0,0);
    }
}
@keyframes nudge {
  0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(50px, 0);
    }
}
@keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
#myPara {
   animation: nudge 3s linear infinite alternate;
}

Now change your Script.js file to:

Qva.AddExtension("HelloWorld", function() {    

    var template_path = Qva.Remote 
        + "?public=only&name=Extensions/HelloWorld/"; 
    Qva.LoadCSS(template_path + "main.css");

    var e = this.Element;
    var p = document.createElement('p');
    e.appendChild(p);

    p.innerHTML="";

    var j = 1;
    while (e.tagName !== undefined) {
        p.innerHTML += '<br/><br/>' 
            + j + ': ' 
            + e.tagName;
        for (var i = 0; i < e.attributes.length; i++) {
            p.innerHTML += '<br/>' 
                + e.attributes[i].nodeName 
                + '=' 
                + e.attributes[i].nodeValue;
        }
        e = e.parentNode;
        j = j + 1;
    }

    p.setAttribute("id", "myPara");
});

Here, I’ve used Qva.LoadCSS to load our CSS file and – at the very end – I’ve altered the ‘p’ element we created to give it an ID of “myPara”. In the main.css file (at the end) you’ll see we specify the “nudge” animation on the element having the ID “myPara”.

Now when you refresh your Extension in QlikView, you’ll see the text moving from left to right and back again. There are a many, many more CSS3 animations available on the web. I have included another couple (pulse and fadein) in our main.css file. Now that you’ve been shown, you can practice on your own. Experiment and make your QlikView Extensions come alive!

Categories:BI, JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: