QR Codes for Qlik Sense

BorisBusiness, CreativeLeave a Comment

This post is about how to use a Qlik Sense extension to generate QR tags that enable mobile users to quickly navigate to an analytics solution or generally information that is relevant to them here and now.

What’s the idea?

Customers I work with always appreciate the mobile capabilities of Qlik Sense. This enables them to walk across their shopfloor and while discussing KPIs, orders, or other topics with their co-workers always have the freshest information on hand. This obviously applies to a number of scenarios, be it machine parks, warehouses, car parks, shops, hospitals or many more. The only thing that could be optimised, is the workflow to get to these numbers, currently the steps would be:

  1. Open the browser
  2. Navigate to your Qlik Sense server
  3. Find the appropriate app
  4. Navigate to the necessary sheet
  5. Apply a bookmark or make a selection
  6. Be enlightened

If you have the Qlik Sense mobile app installed and configured, steps 1 & 2 are already streamlined.

Since (most) people are lazy and marketeers know it, you won’t find lengthy URLs on advertisements (business cards, flyers, etc.) what you find these days are QR Codes like this:

Everyone knows: you just bring out your phone or similar mobile device, open the camera app, scan the beast and voila you’re good to go.

So let’s look at our issue above: All we need to simplify this problem is the ability to navigate to a Qlik Sense app and sheet, make selections turn it into an URL and then create a QR code off of that. Luckily ALL of this is possible with an idea for an extension I recently came up with.

QR Codes for Qlik Sense

To create QR codes for your current app, sheet and selections just download the extension from Github here: https://github.com/borismichel/qlik-qr-tags/tree/master/dist

If you are on Qlik Sense Desktop you can download the extension files qlik-qr-tags.js, qlik-qr-tags.js.map, qlik-qr-tags.qext and qr.png, and put them in a folder: %USERPROFILE%\Documents\Qlik\Sense\Extensions\qlik-qr-tags.

If you want to use this on your Server, just download the pre-built zip file and deploy it using your QMC.

After that, all you have to do is drag and drop the extension from the Extension Items menu and you’re good to go. The extension could use up as little as a 1×1 square on your current sheet.

A quick demo in everyone’s favourite Qlik Sense app.

To use the extension, just stick it on the sheet you want to create a shortcut to and apply the selections you want to go with it. This means if you were to apply the QR code to a storage bin or machine, just pre select the bin or machine to enable you’re user to directly navigate to this information when scanning the code. Once you’re ready to create the code, click the button and a new window will appear containing your QR code and some supplementary information, so you can keep them apart should you create and print multiple ones.

QR Code generated with extension

And that’s it: Qlik Sense mobile use just got better :).

The functionality has been baked into an existing extension by Fady Heiba that builds URLs to collaborate and share. More on that below.

If you’re interested on what the idea, rationale and workings behind all of this is, read on. If not, thanks for reading, hope you like the idea. Let me know what you think in the comments or on twitter @DataAlcmst.

Getting the URL right

If you’re not interested in the considerations going into generating the URL and just want to see the (granted: unspectacular JavaScript), skip ahead.

Some of you, who have used Qlik Sense in the past may have realised, that your URL changes while you use the software. Here’s a standard Qlik Sense URL.

[URL Snippet]

It is made up of several components:

  1. The server URL (yellow)
  2. The app id (green)
  3. The sheet id (blueish…turquoise? Why did i pick this color?!)
  4. A state suffix that says which state you’re in – edit/story/analysis/…

So using standard javascript objects like window.location and a handful of string handling methods should get us this part, right? Yes. Fady Heiba did it a bit differently, but I’ll get to that later.

So what about the selections?

I originally intended to use single API objects that can be called with the ?select= URL parameter, which enables selections. The limitation of that would be however, that you would not arrive in the actual app. This would complicate navigation from that point on. I then learned about the App Integration API (https://help.qlik.com/en-US/sense-developer/February2019/Subsystems/APIs/Content/Sense_ClientAPIs/app-integration-api.htm) this allows developers to use simple URL parameters to apply bookmarks, selections and so forth – but most importantly: It brings you directly to the application.

So now we have everything, right? Yes, BUT!

Wait, wasn’t there an Extension for that already?

I realised, that I am trying to achieve the exact same thing as I had seen in an extension included in the dashboard bundle with a recent Qlik Sense release: Fady Heiba’s Dashboard Link Generator. (https://github.com/fadyheiba/Dashboard-Link-Generator). This extension allows users to collaborate via sharing a link to an app and sheet they’re currently looking at.

Using Fady’s work as a foundation I only needed to intercept the URL and find a way to convert it into a QR code… So, how do we do this?

Finding the right QR library

Digging around ye olde google I rapidly found qrcode.js a library developed by David Shim based on work by Kazuhiko Arase. It allows to easily use a function which fills an html object with a QR code:

This will fill the object “<your div here>” with a QR Code pointing to the website provided in the “text” property. This is super useful if you just want to embed the functionality in your website.

But I wanted to use the established build process using node.js to create my extension (use advantages like gulp, babel and webpack) and therefore needed a library that I could import via ES6. Luckily there’s a package on npm called node-qrcode by Ryan Day. This allows easy webpack integration and codes can be generated with a simple function call like:

The main “disadvantage” being that you need a canvas element to draw the result.

Now we have the tools: Fady’s extension to generate the link and Ryan’s node-qrcode library to generate the QR codes. So let’s get going…

Building the Extension

I cloned the qlik open source repository containing the build process for a forked version of Fady’s extension from github. I wanted to integrate this functionality into the existing extension rather than having a plethora of extensions with similar functionality.

Also, while it would be eaier to have the QR code display on the dashboard directly, this brings with it three drawbacks:

  1. You cannot right-click and save the image this generates
  2. You cannot easily print the QR code which defies its main purpose
  3. The QR code takes up sizable real estate on the dashboard.

So the – in my opinion – best behaviour would be to open a new tab displaying the code and information required to tell them apart after printing – i.e. something like a breadcrumb. Taking Fady’s extension I made the following changes:

index.js

I’ve added a third option called qrtag to the export settings. So that users can choose this option when using the extension. I’ve also changed the “about” section to reflect this behaviour.

paint.js

The code preparing the export button needed to be extended to contain a third option preparing the canvas element that would receive the QR tag. Also this is where the app ID and sheet ID are determined which we use to build the breadcrumb.

Remember when I told you we’d not take apart the window’s location to get these IDs? Here’s how Fady does it: He uses a Root API method called currApp() to get the app ID and a Navigation API method called getCurrentSheetId() to get the sheet ID.

Capability APIs significantly simplify the interaction with Qlik Sense objects from within Extensions!

There are a couple of other minor changes which mainly have to do with building the breadcrumb and current selections.

utilities.js

This is where the main part of our journey happens. We simply import the node-qrcode library and then use the object to create the qrcode in our canvas. We then take the content of the canvas object and create a dataURL from it. This is then sent to the new tab which will contain the final QR code.

Note: There is a function that can create the dataURL directly, which allows us to skip using the canvas element. The advantage of the latter is, that in the future we could wish to display the QR code on the sheet is embedded in. Should we want to use NPrinting to batch create a multitude of codes at once for example.

I’ve also added a function to parse the current selections into a human readable paragraph to add to our breadcrumb.

So that’s it?

Well, yes actually. Taking apart the inner workings of qrcode.js is a pain of binary operations, so thanks for there being a library for that. Also Fady having done most, if not all, of the work with creating an extension that already gave me the URL made this a short but, in my opinion, very useful addition to how we can use Qlik Sense on mobile devices.

So what’s next with this?

As mentioned above, I’d like to include an option to show/hide the code in line on the dashboard itself to enable batch creation using NPrinting (if this bad boy prints at all…).

One could also include custom colours to make it a bit more appealing when plastered all over the place… Also some CSS for the output tab?

I’d be happy to hear about your ideas, so leave some at the bottom of this post.

Thanks for reading!!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.