Using tabs in a Qlik Sense mashup

The Qlik Sense Mashup API (also known as Capabilities API or simply qlik.js) allows you to inject Qlik Sense charts with full interactivity into your web page with just a few lines of code. It also allows you to dynamically define hypercubes, lists or simple expressions, send them to Qlik calculation engine and get results back, so you can visualize the data yourself. If you use the APIs all this would be well known to you. But there is more.. Let’s have a look at some more advanced things you can do.

Show visualizations in a tab

Sometimes you want a user interface that is a bit more advanced than just showing visualizations when the page is loaded. For example you might want to show the visualization in a tab, something like this:


This examples uses jQuery tabs, but you could use any tabs implementation, the basic ideas are the same. What you need to do to make this work:

  • when the user wants to add a new visualization, call the getObject method, with the html element and the id of the visualization as parameters
  • when the user switches between tabs, you need to call the resize method, to make sure that the visualization displayed is updated.

A code example. Note that much of this is actually more jQuery than qlik, the only part that is really qlik is the two methods calls:

You’ll find a working example in the Github repository. Note that the key to this is only two calls:

  • call getObject the first time the user wants to see a new chart, not when the page loads
  • call resize whenever the user changes tabs



This is a blog about extending Qlik Sense. Qlik Sense has excellent support for using Qlik objects in your own web page or app. With the tools supplied with the product you can drag-and-drop charts from your Qlik app into a web page and get it injected into basically any web page without programming. That is not what this blog is about.

Instead I will try to go a bit deeper. Probably everything in this blog will be based on actually programming, that is writing, mainly Javascript, code. Even if you can get a web page up in minutes, without writing a line of code, when you try to do things a bit more advanced you will soon need to understand how to actually program the stuff. And even if you start out with the autogenerated pages from Qlik Sense mashup editor, it will be useful for you to understand the code created for you.

Looking at the material I have for this blog I realize that some of it (possibly all of it) is not easy. You need to know a bit about programming and have an interest in learning more. You probably also need to know something about Qlik.