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:
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
Stefan WALTHER
31 Comments
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 ?
Stefan, this is great.
I’m having trouble accessing the Microsite (http://tools.qlikblog.at/QlikView-Mashups/) a 404 error is coming up.
Please try it again, for me this page works fine …
Regards
Stefan
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
Which version of QlikView are you using? Which browser do you use?
Regards
Stefan
Thanks for replying. I am using 11SR2 and Google Chrome.
Hmmmmm, could you please paste the code you are using, thx!
Regards
Stefan
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 -->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
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.
@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.
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.
@Damien Trippeda
Confirmed. Putting a listbox inside a container solves the problem – it works as intended. (Works with more than one listbox too) Thanks!
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
What exactly do you mean with “back” … What are you trying to achive? Contacting a web-service?
Regards
Stefan
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
Hi Nikhil,
please post this general question to http://www.qlikview.com/community, you’ll also find a lot of useful free learning material there.
Regards
Stefan
Thanks for replying.
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
Do you have a QlikView Server and a Workbench license?
Regards
Stefan
Hi Stefan,
Thanks for replying, S i have a qlikview server which is running but i need to check the Workbench license.
Reg,
Nikhil
Dont have workbench license
Then this approach will not work …
Regards
Stefan
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
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
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.
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
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.
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
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.
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’
});