How to Develop Qlik Sense Extensions from D3.js: Introduction

    [1 - Introduction]

    2 - Testing the D3 visualization in HTML

    3 - Importing the D3 visualization into Qlik Sense

    4 - Customizing the D3 with Qlik's data

    5 - Drawing a second indicator as a reference line [coming soon]

    6 - Creating Custom Settings by editing CSS from Javascript [coming soon]



    1 - Introduction:

    When I first started looking into Qlik Sense extensions, I thought it took specialized developers weeks in order to build and customize them to work on Qlik apps. Well, they don’t. You can build your own extension, get it up and running within minutes, and have it fully functional a few hours later. In this series of blog posts, I will break down the steps I took to do exactly that.

     

    One of the many ways of building Qlik Sense extensions is by using existing D3.js code as the core engine of your visualization. D3.js is a charting framework used to create amazing visualizations using only Javascript and SVG. You’ll only need a basic understanding of Javascript to follow this tutorial.

     

    The extension we’ll be building in this series is a simple speedometer with two indicators (one for the KPI measure, and one for the reference line) based on this D3.js code.

    Speedometer D3 - TwoDials Extension.gif

     

    Installation:

    Qlik Sense extensions are stored under ~/Documents/Qlik/Sense/Extensions. Add this new folder with all the template files we'll need in Qlik’s Extension’s folder.

     

    The files:

    There are three core files at the heart of each Qlik extension: the QEXT file, the Javascript file, and the CSS file.

     

    The .qext file sets the properties of your extension, viewable on the left side of the Edit window. The .js file retrieves the dimensions and measures from Qlik and creates the visualization. The .css file stylizes the visualization.

    Screen Shot 2016-03-23 at 13.51.51.png

    You’ll also find two optional files: the .wbfolder file tells the Qlik extension editor what files to open if you want to edit this extension in Qlik’s Extension Editor in the Dev Hub. The .png file is used by the .qext file as a preview image of the extension. You can disregard the other files now, we'll use them later.

     

    The environment:

    Now that we have our files set up, let’s set up our working environment.

     

    To edit extensions quicker, we need to be able to update our extension without having to close and reopen Qlik Sense every time. To set that, Control+Shift+rightclick anywhere on a Qlik Sense app’s sheet, and choose “Show DevTools”. This will open a new tab with all the web development tools we’ll need. Click on the gear button on the far top right and make sure “Disable cache (while DevTools is open)”  is checked. This will allow us to refresh our extension in the sheet by simply using F5 (only works while the DevTools tab is open) instead of having to close and reopen Qlik Sense every time.

     

    The web development tool we’ll be using the most is the Console tab in DevTools. There, we can check for any javascript errors that pop up and even click on them to reveal exactly where the trouble is in the code (as seen in the GIF below).

    Speedometer D3 - Errors.gif

    In the next section, we’ll start extracting, exploring, and testing the D3.js code we found online.