Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Brian_Munz
Employee
Employee

In a perfect world for developers and designers, their work would be approached by users on the same (or very similar) device.  Ensuring a consistent aesthetic and user experience would be simple because the developer’s experience would be the same as everyone else’s.

As we’re all well aware, unfortunately, we don’t live in a perfect world, and I’m not completely convinced that world would be all that perfect.  There are hundreds of different devices, screen resolutions, and operating systems that contribute to a nearly endless combination of user experiences while traversing the web.  In some ways this variety is very exciting in that it drives innovation, offers users choices, and potentially allows the user to customize their experience.

Luckily, despite this variety, the users are basically attempting to view a document or image which is a very old form of communicating information.  But what if we want users only on a particular device viewing our apps differently? 

For example, the Insurance Demo on the QlikView Demo site had a fairly large dashboard, and attempting to use the app on a phone would be very difficult without tiny fingers:

photo 2.PNG

In this case, tailoring this experience toward a particular device seems unavoidable.  Fortunately, device detection can be fairly simple to do on the web.  There is a variable called “navigator” that is set in most browsers that can be easily examined using javascript.  Navigator contains some important and useful information such as browser type, operating system, and whether or not the device identifies itself as mobile. 

So how do we get that javascript into QlikView?  Extensions of course!  Document extensions are especially useful for performing simple javascript tasks to gather user information and pass it into QlikView by using a QlikView variable.  This way, QlikView is able to take this variable and use it for whatever purpose it wants, which is much simpler than attempting to customize the page from the document extension itself.

The best part is that the extension itself couldn’t be simpler.  JavaScript has already done all of the work.  The deviceDetect document extension referenced below, for example, consists of four lines of JavaScript code to set a QlikView variable called “vDevice” to the browser information retrieved from “navigator”:

Qva.AddDocumentExtension('deviceDetect', function() {

      var mydoc = Qv.GetCurrentDocument();

      mydoc.SetVariable("vDevice", navigator.userAgent.toLowerCase());

});


Using this extension on the Insurance Demo, a sheet customized for the iPhone could be shown, creating a much nicer view:

photo 1.PNG

Click here to download the deviceDetect document extension.

5 Comments