Using Bootstrap CSS in Qlik Sense Visualization Extensions

Since Twitter’s Bootstrap library is very famous and common nowadays it’s quite natural that you might want to use Bootstrap styles within your Qlik Sense visualization extensions.

But …

If you just start straightforward and try to load Bootstrap’s CSS (which can be downloaded from here), you’ll not be that happy because something definitely unwanted happens. The styling of Qlik Sense completely crashes because of CSS conflicts respectively Bootstrap’s CSS is overruling some of Qlik Sense’ CSS styles:

5000_Boostrap_Clash

Solution

But there’s an easy solution for this problem available. What we basically have to do is to “scope” Bootstrap’s style only to our extension and not to the rest of the document, so something like this

<!-- Bootstrap styles do not work -->

<div class="bootstrap_inside">

	<!-- Here Bootstrap styles are working -->
	<button class="btn btn-success">A Bootstrap Button</button>	

</div>

<!-- Bootstrap styles do not work anymore -->

There is already a W3C proposal available to solve this problem, which allows you to create scoped CSS by adding the `scoped` attribute to a style element (read more here). Unfortunately this solution is – frankly speaking – not widely supported.

But you can achieve the same result with standard CSS:

.bootstrap_inside { }

.bootstrap_inside .btn {

	/* now the class btn only works within the class bootstrap_inside */

}

Now it’s certainly not a practical solution to change the entire CSS library of Bootstrap manually. Just too much work and would also break if there are Bootstrap updates. Fortunately Bootstrap uses Less to generate the CSS, a CSS pre-processor which helps you to write cleaner CSS definitions.

Step by step instruction

The following instructions assume that you are familiar with the basics of Node.js, Bower and Grunt (or Gulp). All the steps demonstrated below can also be achieved manually or with other tools, but this just seems to be the easiest way for me.

  • Create a folder (we call it BootstrapExtension)
  • Inside the folder install Bootstrap using Bower:
    bower install bootstrap
    
  • You’ll see a folder bower_compoents inside the folder BootstrapExtension. If you look into \BootstrapExtension\bower_components\bootstrap\less you’ll find all .less based styles of Bootstrap. The file bootstrap.less is the entry point for generating the entire Bootstrap CSS.
  • Create another folder called “less” where we put our main .less file (_root.less)
  • Your folder structure should then look like this

    5000_FolderStructure
  • Then we have to add our bootstrap_inside class:
    .bootstrap_inside {}
    
  • Nothing exciting so far but within this class we can now also include the main file from bootstrap. By doing so all the Bootstrap CSS definitions will then be “scoped” within .bootstrap_inside, so instead of generating .btn our less file will then generate .bootstrap_inside .btn {}
    .bootstrap_inside {
    	@import "./../bower_components/less/bootstrap.less";
    }
    

Generating the CSS output

Now we can use Grunt for generating the CSS based on the .less files with just a few simple steps

  • Install Grunt
    npm install grunt --save-dev
    
  • Install the Grunt plugin to compile LESS files to CSS (grunt-contrib-less)
    npm install grunt-contrib-less --save-dev
    
  • Next we have to create a file with our Grunt tasks (Gruntfile.js)
  • Create the file in the root of BootstrapExtension and paste the following code to it:
    'use strict';
    
    module.exports = function(grunt) {
    
      grunt.initConfig({
        less: {
    	  bootstrap: {
    	  	files: {
    		  "./output/scoped-bootstrap.css": "./less/_root.less"
    	  	}	
    	  }
    	}
      });
    
      grunt.loadNpmTasks('grunt-contrib-less');
    
      grunt.registerTask('default', ['less']);
    
    };
    
  • Finally run the command grunt in the command line and you’ll see a folder output appearing containing a file named scoped-bootstrap.css with the generated style
  • The last step is easy, reference the generated scope-bootstrap.css file in your extension and use it as follows:
    paint: function ( $element /*, layout*/ ) {
    
    	$element.empty();
    
    	var $noBootstrap = $( document.createElement( 'div' ) );
    	$noBootstrap.html( '<button>Should not be bootstrap style</button><br/><br/>' );
    	$element.append( $noBootstrap );
    
    	var $bootstrapStyle = $( document.createElement( 'div' ) );
    	$bootstrapStyle.addClass( 'bootstrap_inside' );
    	$bootstrapStyle.html( '<button class="btn btn-success">Should be bootstrap style</button><br/>' );
    	$element.append( $bootstrapStyle );
    
    }
    

The output:

5000_Bootstrap_styled_button

Improvements

You can certainly do some improvements to this basic concept:

  • Instead of using the entire Bootstrap CSS just go to bootstrap.less and comment imports (and therefore components) which are not needed
  • You can integrate the build process explained above into your workflow how you create extensions (e.g. by using some of the best practices shown in Yeoman Generator for Qlik Sense Extensions)

References




Bookmark and Share

Tags: , , , ,

Funnel Chart Visualization Extension for Qlik Sense

I have just published a customizable Funnel chart Visualization Extension for Qlik Sense:





Documentation & Download: github.com/stefanwalther/qsFunnel


Bookmark and Share

MediaBox Visualization Extension for Qlik Sense

The idea behind the MediaBox Visualization Extension is to have on Visualization Extension for Qlik Sense which can serve different media types.

As of now the following media types are supported:

  • (External) Images
  • Videos
  • Web sites

Screenshots

Roadmap

I am planning to support more media types, but I need your feedback! What are the media types you’d like to see supported by this visualization extension for Qlik Sense? So far these are the ideas I am working on

  • Vimeo support
  • YouTube support
  • Markdown
  • Inline Html, e.g. displaying some HTML formatted text from a database

Download & Documentation

The project is published at GitHub: https://github.com/stefanwalther/qsMediaBox

Bookmark and Share

Calendar Heatmap Visualization Extension for Qlik Sense

This is the port of my Calendar Heatmap Extension to Qlik Sense.

Download it on github.com/stefanwalther/qsCalendarHeatmap

Bookmark and Share

QR Code Visualization Extension for Qlik Sense

I have created this Visualization Extension for Qlik Sense for a customer who is presenting some dashboards in kiosk mode and wanted to include a QR Code to point to some offerings on their website.

You can download this Visualization Extension from GitHub.

Bookmark and Share

Generate Your Qlik Sense Extension in Less Than 2 Minutes

I have created this tool for my daily work. Instead of always reinventing the wheel and setting up a project structure for Qlik Sense Extensions, I prefer to let it generated.

Project Site: https://github.com/QlikDev/generator-qsExtension

Bookmark and Share

Tags: ,

See you there?: Hackathon@Qonnections2014

I hope will see you there – I’m sure it will be fund, and I am really lookking forward to see the results at the evening on Sunday!!!

BTW, I’ll also show you some new nice QlikView.Next related examples – if you like …
Regards Stefan

We’re pleased to announce the inaugural Qlik Hackathon for Partners, scheduled to take place on April 6th, 2014 in Orlando, Florida, premiering at Qlik’s ninth annual partner conference, Qonnections 2014.
Registration for the Qlik Hackathon for Partners is now open at http://qlikhackathon.eventbrite.com.

Who Should Attend?
This event is for Partner individuals with strong web and JavaScript skills. Participants will form groups of 2. If you do not have a buddy to team up with, don’t worry; the Qlik Hackathon team will find you a match with another participant.
What is the Hackathon?
Teams will be presented with several challenges involving the international humanitarian organization MedAir. Developers must use web skills, data, and the QlikView.Next APIs to achieve new insights and/or visualizations that best address the challenge. Every Hackathon participant will have hands-on access to QlikView.Next and its new capabilities in web integration, with ‘live’ enablement and support from internal QlikView experts moderating the event.

How to Register
Registration for the Qlik Hackathon is now open at http://qlikhackathon.eventbrite.com. Act fast as there are only 40 places available, to be allocated on a first-come, first-served basis. Don’t miss out on the opportunity to be part of a day filled with technical web indulgence, exposure to QlikView.Next’s API capabilities, plus learning and competition to spark some fun!

Bookmark and Share