Introduction to Bootstrap for Qlikview people

This post may be of interest to you if you want to do a branded layout in Qlik Sense.

With Qlikview it was very easy to throw a layout together and use show hide conditions to make intuitive layouts. Qlikview people often comment that Sense is more restrictive, or somehow has less features because the layout by default is now grid based to cater for mobility.

I would argue that actually the opposite is the case.

With both Qlikview and Qlik Sense the best approach to building stable, mobile, branded layouts is to use a library designed for it. Qlik is a business intelligence tool that has a GUI to position graphs, while it does a very good job at using variables to show and hide objects, that is not what is built to do, and anyone who has built a complex UI using Qlikview only components will understand the complexity that can build once you get past a certain stage. I like to use Qlik for what it is best at, which is making discoveries in your data.

How to approach a layout or UI focused requirement?

To get maximum results and to save time and effort in the long run, it is only logical to use something that is built for creating dynamic, mobile layouts. This is libraries like Bootstrap can provide us.

The learning curve is relatively small, if you can do simple copy and pasting. You should be able to throw together a decent layout in half an hour. If you really don’t want to go near HTML and CSS, you always have the option of choosing one of the hundreds of HTML/CSS GUI editors that exist. You don’t need to be a HTML and CSS expert to use Bootstrap, I would argue the library is built for people who are not UI developers.

To make life even easier check out this great drag and drop bootstrap layout creator:

The following link will give you a basic understanding of how it works:

Conceptually it is just putting boxes inside of other boxes to make the layout you want. Bootstrap does all the clever stuff about reordering them when it detects a smaller screen like a mobile device.

Just copy and paste into the Qlik Sense mashup builder or your text editor if you are using a different one, just remember to include the javascript file references

<code class="language-html" data-lang="html"><span class="c"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></span><span class="nt"><script </span><span class="na">src=</span><span class="s">""</span><span class="nt">></script></span><span class="c"><!-- Include all compiled plugins (below), or include individual files as needed --></span><span class="nt"><script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">></script></span>