[1 - Introduction]
5 - Drawing a second indicator as a reference line [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.
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 .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.
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.
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.
In the next section, we’ll start extracting, exploring, and testing the D3.js code we found online.