Recently I’ve been doing some research into the world of web applications or mashups. The new capabilities that ship with Qlik Sense are really nice to explore and again give designers and developers a huge potential of creating better experiences when thinking of data-driven applications.

This post is intended to highlight a few examples of what you could be doing yourself as of now.

Changing themes and/or styling

This example shows how you could switch styling and design of a Qlik Sense web mashup.

Changing your theme

In this example you’ll notice the switch of styles by selecting an option from the dropdown on the right. What this does is activate another css style sheet to adjust the titles, font-families, colors etc. Next to that the colors of the charts are also changing. Because these charts and objects, for the most part, are rendered into HTML5 <canvas> elements there is no way of targeting these objects with CSS. The work around for this is to use Qlik Sense variables with, in this case, an rgb() – color code for the chart or object. In this example there is some javascript involved to help access the variables that are available in the Qlik Sense application.



Working with off-canvas components

This example shows how off-canvas components can help you to utilize screen pixels more adequately.

Off-canvas filtering

The interactive capabilities for filtering your data with point-and-click-analysis are showcased in this example in combination with listbox filtering. The listboxes in this example are at first hidden from the user. When the user needs to adjust or add filtering to his point of view, he can then open the filter panel by clicking on the ‘Toggle filters’ button. As you can see, a panel will appear to help filter the data. Nice thing of the listboxes is that the green, white and grey can be adjusted with CSS targeting.



Popup windows

Popup windows was something we also used with Qlikview. But the technique for using these components was a bit cumbersome in most cases. With web technology this becomes easier to implement as a lot of web libraries, like twitter bootstrap, offer these components out of the box.


This example shows how selections made in the other visualizations help to narrow down the data-points. Then a popup with the world map is opened allowing for geographical selection and panning/zooming.



In a next post I’ll be explaining some more examples and also be posting some code and logic to how stuff can be achieved. For now, I hope you guys are a bit inspired and motivated to ask questions or do research on your own into this topic.

Some resources that you might find handy:

See you next post!