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.
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.
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!
Hi, Can you post the code how it was achieved.
Thanks.
I’ll post more on related topics in the future. Be on the outlook 😉
this is great! I look forward to any insights you can give as to how you created the trigger pop-out. I do something similar in Qlikview and have been waiting to create just this type of thing with Qlik Sense!
Great job Patrick.
Waiting for the next post !
Hi Patrick, it looks great! I would be very interested to check how you achieved it.
I took a look to plugin of visual studio which looks pretty nice, it would be interesting to know if you have used the standard Qliksense Dev Hub to achieve it, and another question which I am asking myself is how it is working the section access part with mashup solutions. Can you give me some inputs regarding it?
Thanks,
Patric
Patric, I used multiple tools to achieve the results. The single configurator, the dev-hub, but also text-editors like atom or notepad++. Section access will only work on the server and it works like you are used to work with it. I didn’t try the plugin for visual studio, thanks for your input on that!
This is a great looking article. I really like the use of gifs to bring the images to life, without the use of video, and the design of the dashboards is spot on.
Genial Patric nos podrias dejar los ejemplos, ya que he estado buscando este tipo de desarrollo
Saludos y Gracias
I’m not quit sure what this means. My spanish is very bad.
We need these examples please!
Some of the things still sit on my backlog. But time and creative sparks sometimes keep me from doing stuff 😉
Hi Patrick tehbijuluw..
Amazing work, I really could use this type of web mashup, Do you have any plans to share code for this. I would really appreciate it.
Some things are sitting on the backlog…
I want to make this mashup. I have created a great app in Qlik Sense server. I want to present it just like this. Its really impressive. Is there a template or tutorial to create this mashup?