QlikView Mashup Examples & Documentation (QlikTip #48)

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

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

31 Comments

  1. Hari
    Posted April 26, 2013 at 08:50 | Permalink

    Nice one stephan.

    So work bench license needed for iframe too ? Isnt it ?

    Is any more license required ? Like named cal or doc cal etc ?

  2. Posted April 27, 2013 at 02:12 | Permalink

    Stefan, this is great.
    I’m having trouble accessing the Microsite (http://tools.qlikblog.at/QlikView-Mashups/) a 404 error is coming up.

    • Posted April 29, 2013 at 09:54 | Permalink

      Please try it again, for me this page works fine …

      Regards
      Stefan

  3. Posted May 9, 2013 at 02:59 | Permalink

    Hey Stefan, thanks for writing up this documentation. It is really helpful.

    I’ve run into a problem however. When trying the div integration, I cannot get listboxes to work properly. I tried using the exact example you used. I put both the listbox and the chart on the page in separate divs. I can click into the bar chart and it will make my selections correctly. However, when I click into the listbox, it appears to freeze on the selection I’ve made. The selection highlights in green, but nothing else happens, including grey appearing. I made another example with a bar chart that contained the same dimension as the listbox and noticed the same results. If I click into the bar chart, it will correctly filter and my listbox will update appropriately. However, if I make the selection in the listbox, it will freeze on the green and no updates will be made to the objects.

    Any idea what could be causing this?

    Thanks for any help

    • Posted May 17, 2013 at 18:36 | Permalink

      Which version of QlikView are you using? Which browser do you use?

      Regards
      Stefan

      • Posted May 21, 2013 at 00:31 | Permalink

        Thanks for replying. I am using 11SR2 and Google Chrome.

        • Posted May 22, 2013 at 13:28 | Permalink

          Hmmmmm, could you please paste the code you are using, thx!

          Regards
          Stefan

          • Posted May 22, 2013 at 14:29 | Permalink

            Sure, here is my code. I downloaded the Sales Compass onto my server and then tried following your instructions:

               Qv.InitWorkBench({
                  View: 'Sales Compass',
                  // Instead of using "Host: 'Local'", use "Host: null"
                  Host: null
               });
            
            
            .QvInlineObject
            {
               position:relative;
               margin-left:100px;
               margin-right:100px;
               float:left;
            }
            
            
            
            <!-- Listbox with the Id LB5732 -->
            
            
            <!-- Chart with the Id CH351 -->
            
            
          • Posted May 22, 2013 at 14:31 | Permalink

            Hm it didn’t like me pasting HTML into here, here is a link to download a text file with the full code http://www.filedropper.com/divintegrationhtml

          • Mattias
            Posted February 10, 2014 at 11:15 | Permalink

            Hi,

            did you ever get this sorted? It’s sort of showstopper if you can’t make selections in listboxes – I’ve got the exact same problem. QV 11 SR5. Doesn’t work in IE or Chrome.

          • Posted February 10, 2014 at 14:37 | Permalink

            @Mattias No I did not. Colleagues of mine have run into other issues with listboxes as well when using Workbench. Sorry I can’t be of more help.

          • Damien Trippeda
            Posted February 10, 2014 at 14:43 | Permalink

            Here’s a suggestion that may yield some successes that I’m currently working through as part of my own grand integration plan.

            Containers.. before you go into building the div code, merge as many things as possible into well organized containers. They seem to hold up better within the frames and doing so I was able to link 2 charts, 2 search prompts (with listbox functionality) and a straight listbox, all working fluidly.

            There’s another suggestion I will be writing up shortly if me and my team have success with it. Hoping it will be a gamechanger. Not going to waste anyones time on it though until I have it down pat.

          • Mattias
            Posted February 11, 2014 at 07:03 | Permalink

            @Damien Trippeda

            Confirmed. Putting a listbox inside a container solves the problem – it works as intended. (Works with more than one listbox too) Thanks!

  4. Amir
    Posted July 12, 2013 at 15:24 | Permalink

    Hi Stefan,

    these are great examples of the one way street to embed QV into other places.

    is there anything available to extend this further to be able to communicate from QV back to embedding environment

    • Posted November 19, 2013 at 01:57 | Permalink

      What exactly do you mean with “back” … What are you trying to achive? Contacting a web-service?

      Regards
      Stefan

  5. Nikhil
    Posted December 2, 2013 at 08:06 | Permalink

    Hi Stefan,

    I am new to qlikview and want to understand that how can i use qlikview java script for android ,
    i want to build a app using qlikview so what is the procedure for that, have gone through many docs but not getting it.

    Regards,
    Nikhil V

  6. nikhil
    Posted December 17, 2013 at 11:16 | Permalink

    Hi Stefan,

    I am using the above div integration example ,i save it to html page and when i run, nothing is displayed
    am following all 3 steps .

    Reg,
    Nikhil V

    • Posted December 17, 2013 at 14:13 | Permalink

      Do you have a QlikView Server and a Workbench license?

      Regards
      Stefan

  7. nikhil
    Posted December 18, 2013 at 06:50 | Permalink

    Hi Stefan,

    Thanks for replying, S i have a qlikview server which is running but i need to check the Workbench license.

    Reg,
    Nikhil

    • nikhil
      Posted December 19, 2013 at 06:58 | Permalink

      Dont have workbench license

  8. nikhil
    Posted December 19, 2013 at 08:56 | Permalink

    Thanks, will get the workbench license soon.
    The above 3 steps wil be fine to get Div Integration to work right? or do i have to configure some other files , and i am using IE browser.

    Reg
    Nikhil

  9. Damien Trippeda
    Posted January 19, 2014 at 19:28 | Permalink

    Stefan,

    Thank you for the time and effort you put into showing us all how to utilize this less than well known feature in qlikview. I’ve been expanding on it’s uses through the ongoing development of my company’s erp reporting front end portal. Out goal is to provide all levels of management in the company with a front page solution that integrates all individual pieces of up to 10 different dashboards into a single snapshot page that tells them when there are problems they need to look into more fully. I started off development with singleobject.htm and am slowly stepping it up to div integration now that we have a workbench license. We’ve since developed a custom solution within sharepoint that allows us to pull user info from sharepoint to drive the selections being made within the portal (a project manager logs in it will auto select his projects, but in full dashboard he can see all projects in his organization). This solution works wonder, and will work even better when DIV is fully implemented, however I’m not coming u p across a brick wall that I’m hoping you can help with.

    Specifically, what would it take for us to share selections from individual objects sourced from one dashboard, to another object from a second dashboard, embedded in the same html page? I’ve gotten multiple objects form one dashboard working with a select box from that dashboard but I have been unable to find anything online about people succeeding in getting that to work across multiple ones. From the digging I’ve done into qlikviews JS Api, there are ways to read state information and store that as variables. My thought is that if we can code within the javascript something that effectively does :

    On state change, read dashboard state for selected items, reload other frames with selected items passed through as variables.

    Another solution would be to hardcode selection boxes into the webpage using the SJ api to pull specific fields into sharepoint listboxes, and then feed the selection choice there to all objects. Could make the objects all read only so that users will not inadvertently select something not supported, however ultimately the best solution would be for the selection to happen directly in one dashboard (i click on a project number in one box and all other boxes update)

    Being you seem to be the guru of div integration online, I’m hoping you have some familiarity with this scenario and can point me in the right direction. My javascript abilities are limited but I have a few members of my staff who are very proficient, so feel free to be super technical and I’ll pass it along to them. Any help would be tremendously appreciated.

    Thanks,
    Damien

  10. Posted February 6, 2014 at 22:16 | Permalink

    Hi Stefan,

    Thanks for such a good documentation on the Qlikview mashup, especially the div-tag integration.

    Would it be possible to use the dynamic div tag integration within an extension object ? Here’s my use case:

    1. In my document, there are a few server objects available for the logged in user. For instance: ‘object:.Server\\CH01’ and ‘object:.Server\\CH02’.
    2. I would like to create an extension object which pulls these server objects and put them into their respective divs after initializing the Qlikview Workbench.

    I have seen several examples for integrating the server/document objects within an html page. However, can the power of extension objects be combined with the div tags ?

    Thank you,
    Puneet Lakhanpal.

    • Posted February 6, 2014 at 22:50 | Permalink

      Sure, this can be done. Have also a look at http://www.qlikblog.at/2698/executive-dashboard-combining-multiple-qlikview-documents-into-a-single-dashboard/
      This approach is not using DIV integration but you could certainly also write an extension where you create the DIVs dynamically …

      Regards
      Stefan

      • Posted February 7, 2014 at 19:20 | Permalink

        Hi Stefan,

        Thanks for the suggestion. I tried out that approach by using the WebPageViewer2 extension and modifying the source of the url to A QLIKVIEW DOCUMENT. First time when the Qlikview content is rendered, it works like a charm.

        However, upon any event on the document, for instance: even a drag on the extension object destroys the extension as can be seen in the following video:

        http://screencast.com/t/yPpKYALkd

        If a qlikview document is rendered within an iframe, which actually exists within a parent Qlikview document, two DOM elements exist with the same id “PageContainer” (or even “MainContainer”). Therefore, it appears that within QvAjax.js, programmatic actions occur on PageContainer (or MainContainer), and since two elements now exist with the same id, the PageContainer / MainContainer DOM is modified.

        Is any fix possible for this approach ? I can try to programmatically change the ids of the children rendered within the iframe, but I am afraid it might lead to other issues.

        Thanks,
        Puneet Lakhanpal.

  11. Jam wang
    Posted April 10, 2014 at 04:03 | Permalink

    HI Stefan,

    Do you have some idea to solve the problem below,

    http://community.qlik.com/thread/84641

    if i call an oracle procedure which has variables of REF CURSOR, how to write the script,

    BR,
    Thanks,

    Jam

  12. Murali Krishna
    Posted May 2, 2014 at 10:20 | Permalink

    Hi,

    I am placing my HTML file in qlikview rootfolder(i.e Qlikview/web). My HTML is having Chart Objects. I am trying to access the HTML from the browser, then I can able to view the charts objects in the browser. But I am trying to access from the iPad, I can’t able to access the chart Objects.

    For iPad, In XCode I created the project. And from UIWebview, I am trying to access the HTML file which is in server.
    In HTML file, I placed two anchor tags and two Chart objects(By using the ).
    HereI can able to view the anchor tags in iPad simulator but I can’t able to view the Chart Objects.

    Please Help me on this.

    Thanks & Regards,
    Murali Krishna.

  13. phani
    Posted July 1, 2014 at 02:10 | Permalink

    Not sure what is going wrong..i have followed all your steps. and still i cant get this thing working.
    Below is my code… i tried with HOST: null and no luck.

    i have server and workbench license. Interestingly i got this thing working with “http://community.qlik.com/message/306293” this setup. But not sure how i can integrate multiple objects in the same page. all he showed is a localhost path with single object.

    any help will be greatly appreciated.

    Qv.InitWorkBench({
    View: ‘Sales Compass’,
    Host: ‘QVS@Local’
    });