Formatting QlikView Data the Web Way (qTemplate Object Extension)

I recently came across some projects with some special layout requirements. While it would certainly be possible to create a separate QlikView extension for every requirement I wanted to find a more generic an reusable approach for rendering QlikView content.

The goal was to bring some capabilities into QlikView (using an extension) which makes formatting data as simple as possible, ideally as simple as if you format a web page.

As a reference point I took the visualization of a very complex web-page like


So the main question was: how to bring such complex formatting capabilities to QlikView.

The idea behind …

I have worked in web projects for many years, so I like the flexibility how one can format web-pages using only

  • Html and
  • CSS (Cascading Style Sheets)

So I created a simple QlikView object extension which allows to define templates (using only Html and CSS) which automatically render QlikView data. I have called this extension qTemplate, because it uses the famous and excellent JavaScript template-engine jsRender (

Using this approach has some very important advantages:

  • You only need one extension for all your rendering/design requirements
  • There is no need to develop and install several extension, just use qTemplate and any QlikView Developer (with a little bit Html- and CSS-Know-How) will be able to custom visualizations

Let’s get started …

After you have downloaded and installed the extension drag and drop the extension to your QlikView application.

First you have to define at least one dimension and one measure (the dialog is similar to the dialog of standard Qlikview objects):


This will automatically result into:


The reason for this behaviour is a default template which is defined in the “Template” section of the extension’s properties:


Let’s have a look into this template:

<script id="renderTemplate" type="text/x-jsrender">
<div class="simpleStyle">
{{:#index+1}}: <b>{{:#data[0].text}}</b> ({{:#data[1].value}})

Line 1 and 5 are just necessary, but line 3 is the interesting one:

  • The number within the square brackets defines the index of the column (think as you were using a Straight Table object)
  • Using {{:#data[0].text}} you can reference the text representation of a column
  • Using {{:#data[0].data}} you can reference the data representation of a column

For more information about formatting using the jsRender-engine (which is used in the background of this extension), please visit or have a look at the examples stored in the "templates" sub-directory of the extension.

Options for the qTemplate Extension

Having a look at the properties of the extension you’ll find the following options which can be set:


You can either define a reference to a template or paste the template directly into the properties dialog. If defining a reference to a template use

  • Just the name of the file (then the extension will load it from the "templates" sub-directory
  • or reference to a valid Url on your server, e.g. (http://localhost/MyTemplates/template1.txt)


Style Options:

Using the section "Style Options" you can define the following:

  • Reference a custom CSS file for this extension (should be located in the sub-directory "templatestyles" of your extension
  • Check if horizontal/vertical scrolling should be enabled or not


Advanced Visual Formatting

Now let’s have a look at some advanced templates (the example can found in the “template” sub-directory, called “sample_bookstore.txt”):


<script id="renderTemplate" type="text/x-jsrender">
<div class="bookstore_authorList">
  <div class="bookstore_image">
    <img src="{{:#data[3].text}}" hspace="0" vspace="0" />
  <div class="bookstore_bookTitle">
  <div class="bookstore_author">
    Author: <a href="{{:#data[2].text}}" target="_blank">
  <div class="bookstore_language">
    Language: {{:#data[5].text}}
  <div class="bookstore_openlink">
    <a href="{{:#data[4].text}}" target="_blank">Buy book on</a>
  <div class="bookstore_price_container">
    <span class="bookstore_price_label">Price:</span>
    <span class="bookstore_price">EUR {{:#data[6].text}}</span>
  <div class="clearAll" />
  <hr />

… so, as you can see, it is just a little bit Html … and CSS:


Advanced Logical Formatting (Nested templates)

If you have a look at the other examples you’ll also find a demo how rendering templates can be nested (sample "sample_foreach.txt"):

<ul id="baseTemplateObject"></ul>  

<script id="renderTemplate" type="text/x-jsrender">
  {{for #data[0] tmpl="#innerTemplate"}}
<script id="innerTemplate" type="text/x-jsrender">
  <li class="simpleStyle">{{:text}}</li>


  • By defining an Html object with the Id "baseTemplateObject" you can define your base-object, the output of the main-template (with the Id "renderTemplate") will be rendered into that object
  • The main template (Id "renderTemplate") iterates through all values of the data behind the extension and will call the template with the Id "innerTemplate" for every row

This results into:



Advanced Logial Formatting (If … else)

You can also use if-then-else constructs or other advanced formatting techniques within your template. Have e.g. a look at the example “sample_if.txt” (open on GitHub). A detailed list of all rendering possibilities can be found on the demo-page of jsRender.

Tested with …

I have tested the extension using:

  • QlikView 11 SR2 (x64), both using the QlikView Desktop Client and QlikView Server
  • Internet Explorer 9
  • Chrome 22
  • Firefox 15

Known Limitations:

The amount of records available within the extension is hardcoded, change it by opening the Script.js file and change the following line to the desired amount:

 var gMaxRecordSize = 250; 


The extension itself and a sample QlikView application can be downloaded on GitHub:

Bookmark and Share

and tagged . Bookmark the permalink. Both comments and trackbacks are currently closed.