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 amazon.com.

image

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 (https://github.com/BorisMoore/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):

image

This will automatically result into:

image

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

image

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}})
</div>
</script>

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 https://github.com/BorisMoore/jsrender 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:

Template

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)

image

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

image

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”):

image

 
<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>
  <div class="bookstore_bookTitle">
    {{:#data[0].text}}
  </div>
  <div class="bookstore_author">
    Author: <a href="{{:#data[2].text}}" target="_blank">
    {{:#data[1].text}}
    </a>
  </div>
  <div class="bookstore_language">
    Language: {{:#data[5].text}}
  </div>
  <div class="bookstore_openlink">
    <a href="{{:#data[4].text}}" target="_blank">Buy book on amazon.de</a>
  </div>
  <div class="bookstore_price_container">
    <span class="bookstore_price_label">Price:</span>
    <span class="bookstore_price">EUR {{:#data[6].text}}</span>
  </div>
  <div class="clearAll" />
  <hr />
</div>
</script>

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

image

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>  
<script id="innerTemplate" type="text/x-jsrender">
  <li class="simpleStyle">{{:text}}</li>
</script>  

Explanation:

  • 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:

 

image

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; 

Download

The extension itself and a sample QlikView application can be downloaded on GitHub: https://github.com/stefanwalther/QlikView_Extension_qTemplate

Bookmark and Share

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

4 Comments

  1. Roopa
    Posted March 6, 2013 at 08:35 | Permalink

    Hi

    We have used this template in one of our report file. When i try to define dimensions, after 20 dimension,
    I cannot use the 21st dimension in the template. When used as {{:#data[20].text}}, it gives error

    “Error: Unable to get value of property “text”. object is null or undefined. ”

    Why this happens? is there a limit on number of dimensions defined.

    Please help out

    Thanks
    KRs

    • Posted June 3, 2013 at 19:55 | Permalink

      This is based on a default setting of every extension. Change the definition.xml and add the following property in the ExtensionPropertyTag


      PageWidth="100"

      This will allow you to add up to 100 columns (dimension and measures) …

      Regards
      Stefan

  2. Tijmen Groustra
    Posted September 24, 2013 at 21:58 | Permalink

    Hi,

    I try to use this template but I have some issues with implementing the images in the template. Unlike the example qvw, we store our images in the Qlikview document as Thumbnail using (Bundle Info). Is there a way to implement thumbnails as imgages?

    Please help out.

    Thanks!

    Tijmne

  3. Dietmar Noll
    Posted March 27, 2014 at 10:12 | Permalink

    Hi,

    I am using this Extension and I have the problem that I can not select any text in the “Direct Template”-textarea to copy the code. Is this a normal behaviour or is there something wrong within the configuration of my environment?

    Any hint is appreciated.

    Thanks,

    Dietmar