Dynamically modify a Qlik Sense visualization

One of the really powerful features of Qlik Sense API’s is the possibility to dynamically modify visualizations. You can build solutions that allows the user not only to make selections and have them reflected in all charts displayed (that’s the default, you will get that automatically if you don’t turn it off) but also to dynamically change chart properties and do things like

  • change dimension from for example Product to Product Lin (or to Division)
  • change measure from Sales Amount to Quantity or Margin or Cost
  • add an additional dimension and make a barchart into a stacked bar chart
  • modify ordering
  • limit the chart to only show Top 10, or bottom 5
  • change the chart type from Barchart to Linechart or to an extension

And all of this can be done for both built-in visualizations and extensions in the same way. The key to all of this is the applyPatches method and soft patches.

Soft patches

A soft patch is a temporary change to properties for a visualization. The fact that it is temporary means:

  • it will not be persisted either in Desktop or Server
  • it will not affect other users using the same app
  • once the Qix engine session is closed it will be gone, so when the user reconnects, visualizations will be back to their original state
  • the user can make soft patches to visualizations that me does not have the right to modify

You make sure that its a soft patch by setting the second parameter in the applyPatches call to true. The first parameter is the list of patches you want to apply. Since you might want to apply several patches, it is an array, where each entry has three values:

  • qPath: the path to the property you want to change, with slash (/) where javascrip/json usually has a dot
  • qOp: the operation you want to perform, one of “add”, “replace”, “remove”
  • qValue: the value you want to set. This should be a JSON value inside a string, so a boolean value would be “true” or “false”, a numeric value something like “-1” and a string (this is the tricky part) “\”new string\”” (that is a string in a string). You could also set a javascript object, use javascript standard JSON.stringify method in that case.

Perhaps this is clearer if we look at an example:

What we do in this example is that we show a list of dimensions and measures to the user. When the user clicks on one of them, we move it to be the first one in the sort order, and use applyPatches to update the array and the chart will be resorted. Since it is all done with soft patches, it will not affect other users.

You find a full working example in the Github repository.

This post is based on a session I originally held at Qonnections 2015, under the title ‘5 things you did not know you can do with the Mashup API’.

 

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:

visualization-in-tabs

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

 

Welcome

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.