Learning a new skill while on the job is difficult. For the past 6 months, I’ve been swamped doing what I’ve happily done for the last 12 years: QlikView. Luckily, I’ve involved others like Julian Villafuerte in my decision to become a Qlik Sense developer and that makes it easier. At the time of writing this post in December, I’ve come a long way since my last post about Web Dev Fundamentals, but let’s look back at my experience of applying these fundamentals to Qlik Sense development.

After my first round of learning Web Dev Fundamentals, there were a lot of things concerning JavaScript that were still confusing. Even so, I was anxious to finally apply this knowledge in Qlik Sense and I was confident that JavaScript would become less confusing as I continued to read about it. (This turned out to be true when I later found a great online course in Udemy called “JavaScript: Understanding the Weird Parts” that makes sense of all of JavaScript’s apparent quirks.)

Web Development in Qlik Sense

My first step after reading generic web dev resources was to look for documentation on how to apply this generic knowledge to Qlik Sense development. My first stop was Stefan Walther’s Qlik Sense Extension Tutorial. However, I later found out that Stefan’s tutorial is the basis for the same tutorial in Qlik Sense’s official help documentation, so I recommend you go directly to Qlik’s online help.

AngularJS

The tutorial includes a section on AngularJS, but I decided to keep things simple and skipped this part of the tutorial. I took Alexander Karlsson’s advice that knowing AngularJS wasn’t a necessary skill to possess to create an extension, and he was right. If you don’t already know AngularJS, I would recommend that you don’t get bogged down in learning it before you create your first extension.

RequireJS

Unlike AngularJS, you do need a basic understanding of RequireJS in order to create an extension. RequireJS lets you include external JavaScript, CSS, or HTML files (or modules) in your extension’s code. It helps you include libraries like D3.js and keep your own code tidy. It is also appears to be an efficient way to handle code dependencies.

In the generic web dev books and classes, we learn the following way to include external script files and CSS files.

<script type="text/javascript" src="script.js">
<link rel="stylesheet" type="text/css" href="css/layout.css">

When we write an extension, we include external files using RequireJS and we use the following Asynchronous module definition (AMD) syntax.

define( ["./script",
          "css!./css/layout.css"
        ],
        function( object1 ) {
        ...
        }
);

The first parameter of the define() function is an array of external dependencies that your Qlik Sense extension needs to run properly and the second parameter is an anonymous function where you are going to write your extension’s code.  The part of this code that was unclear to me as I went through the tutorial was the relationship between the files in the array and the parameters of the anonymous function.

If the external script file returns something then that something is passed as an argument to the anonymous function.  For example, in the previous code, if the script.js file (referenced as “./script” in the array) returns an object then that object is passed into the anonymous function as the parameter object1. We can then use that parameter to refer to this object in the extension’s code.

At some point in the Qlik Sense Extension Tutorial, we are instructed to separate the definition of the extension’s property panel into another JavaScript file as a way to make our code easier to read.  Then we are told to use RequireJS to include the file in the main script file and pass the object it returns into the anonymous function. When I did this exercise, everything in the extension’s properties panel suddenly disappeared.  Can you guess what I had done wrong? My code looked something like the following.

define( ["./script", 
          "css!./css/layout.css",
          "./props" 
        ], 
        function( object1, props ) { 
        ... 
        } 
);

After an hour of debugging, I discovered what I had overlooked.  The problem with the previous code is that the parameters of the anonymous function have to be in line with the files in the array.  The first parameter corresponds to the first external file, the second parameter to the second external file, and so on.  I had unintentionally passed a CSS object into the parameter (props) that I had expected to be the property panel definition.

To fix the issue I could have defined a new parameter called css and placed it in between object1 and props.  However, I decided to avoid creating parameters that I had no intention of using and changed the order of the external files in the array.  Therefore, I fixed my disappearing property panel using the following code.

define( ["./script", 
          "./props",
          "css!./css/layout.css"
         ], 
         function( object1, props ) { 
         ... 
         } 
);

When I look back six months later, this mistake seems beyond obvious.  However, at the time everything was new and it was only by making these mistakes did I begin to learn.

Lessons Learned

Other than this issue, the rest of the Qlik Sense Extension Tutorial went smoothly.  I can’t say I fully understood everything yet, but I did obtain enough knowledge to start my own extension. Namely, I ended up answering the following questions.

• How do I code something that then appears in Qlik Sense?
• How do I create extension properties and then reference the values assigned to those properties?
• How do I integrate the extension with the Qlik Sense app’s data model?

In this tutorial, I thought I’d also learn how to make the extension interactive and filter the app’s data model.  However, learning how to do this didn’t come until later when I developed my first extension using D3.js.

Other Resources for Beginners

There aren’t too many beginner Qlik Sense extension tutorials.  The following list is what I’ve found so far.  If you know of any others, I’d be glad to hear about them.

Tutorial: How to Build a Qlik Sense Extension with D3 by Speros Kokenes

This tutorial goes beyond the “Hello World” and table extension that we create in the official Qlik Sense Extension Tutorial, and is therefore, a great follow-up to it.

Building a Qlik Sense Extension Video Series by Speros Kokenes

This video series includes a couple of topics that you don’t need to understand in order to create your first extension (eg. D3.js, the resize function), but I would recommend watching it early on and then going back to it as your skills improve.  It’s also useful to listen to Speros’s thought process as he creates his extension.

Getting started building visualization extensions – Qlik Sense by Qlik

This video shows another way to create extensions through the Qlik Dev Hub.

My first extension

After learning basic web dev skills and going through these Qlik Sense extension tutorials, I was able to create my first extension. The idea for my first extension came from Julian Villafuerte who at the time was creating his Ecobici app and was looking to something that wasn’t available in Qlik Sense or Qlik Branch. The extension is called Evolcon Google Street View and is currently available in Qlik Branch. I’ll get into the details about how I created it and what I learned in the process in my next post.

One more thing…

If you’re looking for more motivation to become a Qlik Sense Developer, my friends at Vizlib have recently created a Marketplace where developers can lease their supported extensions to customers all over the world. I’ve already added my cycle plot extension to the Vizlib Marketplace and Ralf Becher has made several of his extensions available, too.

This is how I imagined Qlik Market to be. It’s good to see somebody making it a reality.