QlikTip #48: QlikView Mashup Examples & Documentation

Creating Mashups in QlikView is extremely simple but I am very often surprised that QlikView’s ability to integrate QlikView documents and objects into other web application is not used very often, sometimes it is not even known that this can be achieved easily.

Maybe one reason for that is that documentation and examples are very rare. That’s why I have created a very detailed documentation + examples which I am publishing now.

What are Mashups?

A definition from Wikipedia:

A mashup, in web development, is a web page, or web application, that uses and combines data, presentation or functionality from two or more sources to create new services.
The term implies easy, fast integration, frequently using open application programming interfaces (API) and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.

What do You Need for Mashups with QlikView?

From the license perspective “Workbench” has to be enabled on your QlikView server. So if you have a look at your LEF-file there should be one line which looks as follows:

WORKBENCH:YES;;


How Does QlikView Support Mashups?

There are three ways how one can realize mashups with QlikView document and/or objects:

  • Simple document integration (using opendoc.htm)
  • Simple object integration (using singleobject.htm)
  • Div integration (using the Ajax Javascript library)

The Basic Idea behind Opendoc.htm and SingleObject.htm Integration

If you have installed QlikView Server the ability to create Mashups is already there! Have a look at the folder “C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\” and you’ll find two files which can be used easily to either integrate a document or only some QlikView objects into another website:

  • opendoc.htm
  • singleobject.htm

The idea behind this kind of integration is to call a Url on the QlikView server and at the same time pass some parameters which document or object you would like to integrate. The result from the QlikView server can be easily integrated into any website using an Iframe tag in Html:

<iframe src="http://localhost/QvAJAXZfc/opendoc.htm?document=Sales%20Compass.qvw" />

The Result:

A QlikView document is integrated into another website

There are several parameters available to control the output from opendoc.htm or singleobject.htm.
A detailed list of parameters and how thy can be used are available in the QlikView Mashups Microsite.

The Basic Idea behind Div Integration

Div integration goes one step further and allows a more granular and powerful integration of QlikView objects into an existing website using the QlikView JavaScript API.

To get Div Integration to work there are three steps necessary:

Step 1: Include the QlikView JavaScript API into your website

<script language="javascript" type="text/javascript" src="http://localhost/QVAJAXZfc/htc/QvAjax.js"></script>

Step 2: Initialize the API

(in this example for the document “Sales Compass”)

<script language="javascript" type="text/javascript">
   Qv.InitWorkBench({
      View: 'Sales Compass',
      Host: null
   });
</script>

Step 3: Define where QlikView objects should be shown in your Html structure

<!-- Listbox with the Id LB5732 from the document "Sales Compass" -->
<div avqview="Sales Compass" avq="object:.Document\LB5732"></div>

The Result

Several QlikView objects are integrated into an existing website

QlikView Mashups Microsite with Documentation & Examples

To make it easier to demonstrate Mashup capabilities I have created a dedicated QlikView-Mashup microsite, which should help as

  • A reference
  • A collection of code-samples
  • A collection of ready-to-demo examples

Resources and Download

Bookmark and Share

Tags: , , , ,

QlikTip #47: Reloading QlikView Documents using the Ajax-/Mobile-Client (Triggering EDX Tasks by using a QlikView Extension)

It is quite easy to reload a current QlikView document if you are using the IE-Plugin or QlikView Desktop. But achieving the same result if you are using the Ajax-/Web-/Mobile-Client is a bit more demaning.

The solution described here closes the gap using a combined approach of misc. QlikView integration techniques:

  • The QMS API (QlikView Management Services API)
  • A new QlikView Object Extension called “CallEdxFromAjax”

Screenshot using CallEdxFromAjax QlikView Extension:

Architecture Overview:

You can find the source-code, detailed documentation, install-files on a dedicated project site on CodePlex.com.

Bookmark and Share

Tags: , , , , ,

QlikTip #46: CSS3 Cheat Sheets for QlikView Extension Development

I have already posted my favorite cheat sheets for jQuery. Today here are my favorites for CSS3 (Cascading Style Sheets v3):

Cheat Sheet by CSS3.com

Online cheat sheet by CSS3.com with a comparison to CSS1 and CSS2 plus a direct link to the CSS reference on W3C.org.

Online CSS Cheat Sheet by CSS3.org


http://www.css3.com/cheat-sheets/

CSS3 Cheat Sheet / Smashing Magazine

Excellent (but not very pretty) cheat sheet created by Smashing Magazine, available for download as PDF file:

CSS3 Cheat Sheet


http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

CSS3 Cheat Sheet by Liquidicity

Another CSS cheat sheet with a more elegant layout (available for download as PDF file):

CSS Cheat Sheet by Liquidicity


http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf

Compatibility Cheat Sheet

Excellent website with a compatibility cheat sheet for CSS3, Html5, JavaScript and SVG.

Compatibility Tables by CanIUse.com


http://caniuse.com

CSS3 Selectors Explained

This site explains CSS3 selectors in detail:

CSS3 Selectors Explained


http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Bookmark and Share

Tags: , , ,

A Comprehensive List of QlikView Object Extensions (01/2013)

In the last few weeks I have dedicated quite a lot of time to extension development in QlikView. Doing so I have certainly reviewed existing extensions to get new ideas and study existing code. Unfortunately there is no central repository available where you can find all extensions.

So I thought it would be helpful to share my collection of existing extensions.

QlikView Object Extensions

I have only added extensions which work in QlikView 11. If I have forgotten some, please let me know and I’ll add them.
Document extensions and GeoAnalytics-extensions will be covered in another upcoming article.

Business Related

Gantt Chart Extension Object

Excellent Gantt chart implementation which really demonstrates the power of QlikView’s extension concept.

Author: Lee Mathews
Documentation + Download: http://community.qlikview.com/docs/DOC-3427
Technology: Html, CSS, JavaScript
Namespace: lmsGanttChart

Calendar

Calendar to display events

Author: QlikTech
Download: Installed with QlikView (\Examples\Extensions\Extension Examples.qar)
Technology: Html, CSS, JavaScript
Namespace: QlikView/Examples/calendar

Charting Extensions

3D Surface Chart Extension Object

Integration of 3D Surface Plot into QlikView as chart object extension.

Author: Lee Mathews
Documentation + Download: http://community.qlikview.com/docs/DOC-3303
Technology: Html, CSS, JavaScript
Namespace: GRSurfacePlot

Bullet Chart

Author: QlikTech
Download: Installed with QlikView (\Examples\Extensions\Extension Examples.qar)
Technology: Html, CSS, JavaScript
Namespace: QlikView/Examples/bullet

Google BigQuery QlikView Extension

QlikView Extension for Google BigQuery provides instant querying capability against the Google BigQuery platform for the business user from the QlikView application’s User Interface.

Author: QlikTech
Download: http://market.qlikview.com/qlikview-extension-for-google-bigquery.html
Technology: Html, CSS, JavaScript
Namespace: QVBigQuery

PieChart Visualization for Google BigQuery

The PieChart Visualization for the QlikView Extension for Google BigQuery extends the existing extension object by providing an additional visualization along with documentation on how to develop your own.

Author: QlikTech
Download: http://market.qlikview.com/category/extension/piechart-visualization-for-google-bigquery.html
Technology: Html, CSS, JavaScript
Namespace: N/A

Navigation Bar Extension Object

“A navigation bar extension object that allows a 2 tiered menu system to be created from data in you QV app.
The look and feel of the navigation bar can be changed via a standard stylesheet file in the extension object directory.”

Navigation Bar
Author: Lee Mathews
Download: http://community.qlikview.com/docs/DOC-3702
Technology: Html, CSS, JavaScript
Namespace: navigationBar

OnOffSwitch

OnOffSwitch is a simple control which manipulates the state of a variable in a QlikView document in iPad style.

Author: Stefan Walther
Description: http://www.qlikblog.at/1851/onoffswitch-qlikview-extension/
Download + Documentation: QvExtOnOffSwitch.codeplex.com
Technology: Html, CSS, JavaScript
Namespace: OnOffSwitch

Org Chart:

An object extension to display hierarchical data based on a hierarchy in your QlikView document.

Author: QlikTech
Source: Installed with QlikView (\Examples\Extensions\Extension Examples.qar)
Technology: Html, CSS, JavaScript
Namespace: QlikView/Examples/org

Stream Chart

Namespace:
Author: Dan English (QlikTech)
Download: http://community.qlikview.com/docs/DOC-2583
Technology: Html, CSS, JavaScript
Namespace: StreamChart

Whisker Pie Chart

Pie chart very similar to the standard pie chart of QlikView but with optimized labels.

Author: QlikTech
Download: Installed with QlikView (\Examples\Extensions\Extension Examples.qar)
Technology: Html, CSS, JavaScript
Namespace: QlikView/Examples/piechartlabel

Windrose Chart

Windrose Chart implementation using the excellent Raphael library to create SVG on the fly.

Author: Lee Mathews
Documentation & Download: http://community.qlikview.com/docs/DOC-3111
Technology: Html, CSS, JavaScript, SVG
Namespace: Windrose

Data Formatting (DataGrids, Html, etc.)

(Minimalistic) HtmlTextBox Extension

This QlikView object extension allows you to integrate Html formatted content into your QlikView application (either loaded from a database or declared manually).

Author: Stefan Walther
Description: QlikTip #39: Displaying Html content within QlikView
Download: github.com/stefanwalther/QlikView_Extension_HtmlMinimalisticTextBo
Technology: Html, CSS, JavaScript
Namespace: HtmlTextBox

Embed Video in QlikView

A QlikView extension to embed videos in QlikView.
“The extension supports MP4, OGG and WebM formats. It will default to HTML5 playback with flash fallback support for legacy browsers. Since it’s HTML5 it will work in your iPad aswell!”

VideoPlayer QlikView Extension
Properties of VideoPlayer  Extension
Author: Alexander Karlsson
Documentation + Download: http://community.qlikview.com/qlikviews/1179
Technology: Html5, CSS, JavaScript
Namespace: VideoPlayer

Word Cloud Object Extension

Author: Brian Munz
Documentation & Download: http://community.qlikview.com/thread/62947
Technology: Html, CSS, JavaScript
Namespace: WordCloud

Data Processing/Manipulation Extensions

Data2Webservice

Data2Webservice passes data from QlikView to a web service using this extension. Doing so you can process the received data on the server side to perform tasks like saving the data to a database, creating custom outputs (Excel, PowerPoint), pass the data to other processes and systems.

Author: Stefan Walther
Description: Posting Data from QlikView to Other Systems using the Ajax Client
Download: https://github.com/stefanwalther/QlikView_Extension_Data2Webservice
Technology: Html, CSS, JavaScript
Namespace: Data2Webservice

Formatting QlikView Data the Web Way

qTemplate brings custom web formatting into QlikView. Use a very simple language to define rendering templates based on Html and CSS to display any data passed to the extension. No need to develop several extension, just use the properties of this extension.

Author: Stefan Walther
Article: Formatting QlikView Data the Web Way (qTemplate Object Extension)
Download: https://github.com/stefanwalther/QlikView_Extension_qTemplate
Technology: Html, CSS, JavaScript
Namespace: qTemplate

QvDial Extension

QvDial is a visual input control giving the user the possibility to manipulate a variable value, very similar to the functionality of a slider or like a volume control on the stereo system.

QvDial

Author: Thomas Friebel
Documentation: http://blog.dijit.de/qlikview-extensions/qvdial-qlikview-extension/ (Documentation is available in German, use Google Translate to translate it to english)
Download: https://github.com/thomasfriebel/QvDial
Technology: Html, CSS, JavaScript
Namespace: QvDial

Social Media

Twitter Feed inside QlikView

This QlikView extension display live search results from Twitter within QlikView (querying for a Twitter hashtag).

Author: Alexander Karlsson
Download: http://dl.dropbox.com/u/18211954/Extensions/LiveTwitterStream.zip
Technology: Html, CSS, JavaScript
Namespace: LiveTwitterStream

Twitter Button Object Extension

This extension add a twitter button to QlikView and allows users to click it which opens up a new window with a tweet already started for them.

Author: Brian Munz
Documentation & Download: http://community.qlikview.com/thread/60962
Technology: Html, CSS, JavaScript
Namespace: twitter

Other QlikView Extensions

QvConsole

“QvConsole provides an output range for logging issues in QlikView dashboard. This is especially useful when working with the Windows client of QlikView.”

Author: Thomas Friebel
Documentation + Download: http://blog.dijit.de/qlikview-extensions/qvconsole-qlikview-extension/
Technology: Html, CSS, JavaScript
Namespace: QvConsole

Bookmark and Share

Tags: , , , , , ,

QlikTip #45: jQuery Cheat Sheets for QlikView Extension Development

When developing QlikView extensions you will probably use jQuery, too. jQuery is also used by default by the QlikView Ajax client so jQuery is available out of the box. For all QlikView Extension developers who are not working with jQuery every day these cheat sheets may help:

Online Cheat Sheet:

I like this cheat sheet most, because you are able the select the desired jQuery version and all entries are linked with the official jQuery documentation.

Online and interactive jQuery cheat sheet

Direct access: http://oscarotero.com/jquery/

Offline Cheat Sheets:

This cheat sheet by Antonio Lupetti can be downloaded as PDF file and contains 8 pages of the most important jQuery functions.
Highly recommended to get a quick overview of the functionality of jQuery.

Offline jQuery Cheat Sheet

Download available on http://www.woorkup.com

Bookmark and Share

Tags: , ,

QlikTip #44: How I Use Visual Studio.net 2010 to Develop QlikView Extensions

I have tried several ways and editors to develop QlikView extensions. But finally I have found a good and easily to set up way using Visual Studio.net 2010.

Why Visual Studio

Maybe you are asking why I am using Visual Studio although a “normal” editor would be absolutely enough.

My answer:

  • I have been using Visual Studio for years now and it is my editor of choice for nearly all my software projects.
    • So I am just a bit lazy to use a different editor which is maybe more web targeted (like for example Aptana Studio)
    • … and if I am now starting with Visual Studio 2012 I am really excited about the new focus on web technologies in the latest release of Visual Studio …
  • Using Visual Studio is the easiest way for me to incorporate also QlikView Extension solutions into my personal code versioning setup (I am using a combination of MS Team Foundation Server/TFS Team Explorer and Subversion/TortoiseSVN)

Why not Using Workbench?

Sure, if you are using Visual Studio, QlikView Workbench is a good starting point for developing QlikView extensions. But my experience is, that after some practicing hours you will not need QlikView Workbench anymore and there are a lot of WYSIWYG features which are not covered in QlikView Workbench, unfortunately.

My Final Setup in Visual Studio

This is the step by step guide how I set up a Visual Studio solution/project to develop a QlikView extension:

Preperation

First of all I create an empty solution:

File > New > Project > Other Project Types > Visual Studio Solutions

Create a blank Visual Studio solution

Add an empty “ASP.net web project” (in fact you could use also other project types):
File > Add > New Project > ASP.NET Empty Web Application

Create any empty project (e.g. "ASP.net Empty Web Application")

Delete all not necessary references and properties:

Delete unnecessary files

Add the basic files for your QlikView extension:

  • Defintion.xml
  • Icon.png (any 24×24 pixel .png file)
  • Script.js

The result should look as follows:

Resulting view after adding the basic files for your QlikView Extension

You could for sure also automate the steps described above by creating your custom project template in Visual studio and use this for your projects.



Hmmmm ….

Now you are ready to develop your extension … Hmm, wait, that’s not the big deal, isn’t it?
Yes, one important point is missing: automatic deployment to the path where QlikView Desktop and QlikView Server are trying to load the extension from.

My approach: Using “Post-build events” in Visual Studio. So I am using Visual Studio to build the project (Ctrl+Shift+B) which does in fact nothing but I have created a script I am using in all QlikView extension projects:

The code below is created to work as a post build event in Visual Studio, so the code will be executed after you have successfully built your code. In fact when using only JavaScript, Html and CSS nothing happens during a build but it can be triggered easily by hitting Ctrl+Shift+B or using the menu: Build > Build %ProjectName%.

Add the code to the “Post-build event command line” text field within the project properties:

Project Properties: Post Build Events

SET LOCAL_PATH="C:\Users\swr\AppData\Local\QlikTech\QlikView\Extensions\Objects\SwitchOnOff\"
SET SERVER_PATH="D:\QV-Server\v11\Extensions\Objects\SwitchOnOff\"

REM ****************************************************************************************************************
REM COPY TO LOCAL
REM ****************************************************************************************************************
Rem Create target directory if not exists
IF NOT EXIST "%LOCAL_PATH%" (
	ECHO "Create local path: %LOCAL_PATH%"
	MKDIR "%LOCAL_PATH%"
)
REM Remove remaining files from old builds, so delete everything
DEL "%LOCAL_PATH%*.*" /S /F /Q /EXCLUDE:DynProperties.qvpp
XCOPY "$(TargetDir)*.*" "%LOCAL_PATH%" /Y /E /I

REM Delete .dll and .pdb
DEL "%LOCAL_PATH%"$(TargetFileName)
DEL "%LOCAL_PATH%"$(TargetName).pdb

REM ****************************************************************************************************************
REM COPY TO SERVER
REM ****************************************************************************************************************
REM Create target directory if not exists
IF NOT EXIST "%SERVER_PATH%" (
	ECHO "Create server path: %SERVER_PATH%"
	MKDIR %SERVER_PATH%
)
REM Remove remaining files from old builds, so delete everything
DEL "%SERVER_PATH%*.*" /S /F /Q /EXCLUDE:DynProperties.qvpp
XCOPY "$(TargetDir)*.*" "%SERVER_PATH%" /Y /E /I

REM Delete .dll and .pdb
DEL "%SERVER_PATH%"$(TargetFileName)
DEL "%SERVER_PATH%"$(TargetName).pdb

For getting this to work you have to mark all files which should be included in the build with:

  • Build Action: “Content”
  • Copy to Output Directory: “Copy Always”

Setting the build action for each file properly

The advantage of this approach is furthermore that I can include several other files, prototypes and examples within my Visual Studio projects which will not be included in the “Extension output” because I do not mark these files with “Build Action: Content” & “Copy to Output Directory: Copy Always”

What do you think?

What do you think? How to you set up your development environment to develop QlikView Extensions?
I’ll be happy to read about your experiences and gotchas …

Bookmark and Share

Tags: , , ,

OnOffSwitch QlikView Extension

In the recent months I have seen a lot of QlikView applications where QlikView developers & designers have used layout techniques in combination with “Show Conditions” to enable the feeling to have a control that allows the user to change the state of a variable. This technique works, but it is always a little bit tricky to set up and is time consuming.

So I have created a QlikView object extension which encapsulates the logic describes above, I have named this extension “OnOffSwitch”.

QlikView Extension OnOffSwitch

Features:

  • Use this extension to allow users to change the value of a variable with a nice looking interface (very similar to the experience on an iPad).
  • You can use this extensions multiple times on each QlikView sheet to manipulate different variables.
  • No need to code anything, all properties can be set in the extension’s property dialog.
  • Settings via extension’s property dialog:
    • Name of the variable to be manipulated
    • Label for on/off status

Download & Further Instructions

I have posted the project on QvExtOnOffSwitch.codeplex.com where you can find the following

  • The extension itself (.qar file)
  • Further instructions how to use the extension
  • A QlikView example application
Bookmark and Share

Tags: , , ,