1 2 3 Previous Next

Qlik Design Blog

391 posts

A few days ago I stumbled upon one of those little tricks that we all love. Roland Vecera came up with a nice solution to bring minicharts to Qlik Sense. It can help us to increase app data density and make our Qlik Sense tables sexy and informative again. Don't forget to add this to your bookmarks!


In Roland's blog post you will find instructions about how to build a linear gauge, a traffic light gauge, and even whiskers minicharts (right table in the image above),

I particularly like the linear gauge, with this technique we can now simulate small bars that goes along with each one of the table dimension items. The expression used to create the linear gauge 'bar chart' is actually reusable and very simple, looks like this:

repeat('█', rangemax(rangemin( ceil(((column(1)/column(2))-1)*10),10),1) )

The expression will paint a variable number of solid blocks █ based on a given calculation that is evaluated by row. By now you should have a nice grey bar from 1 to 10 blocks.

Next (optional) step is to apply color to it. You could add color based on any criteria you want, in the chosen example Roland is using color in the same way as he use size, both display Growth.

The text color expression looks like this in the example:


if(expression>2, argb(255,0,150,0),

     if(expression>1, argb(255,0,200,0),

         if(expression>0.5, yellow(),lightred())))


Where expression will be the same expression as in Growth column (Steigerung).


You can read more about minichars in tables trick at QlikView + Qlik Sense Blog von Heldendaten: Qlik Sense Calendar Measures & "Minicharts" in Tabellen


Hope you like it.


PS: For those of you who can't read German and/or use Google translator, please check out this community doc Creating Mini Chart in Qlik Sense tables (it also contains some hacks to make this trick even more complete)



Good Tuesday Qlik Community! Today I have a fun and entertaining way to showcase the power of the Qlik Sense platform, its APIs and the art of the possible. But first, let me give you some background. In March, Qlik participated in the Gartner BI Bake Off (direct highlights here) - and for the 'innovation' portion of the presentation, my colleague Josh Good demonstrated a neat concept, showing what is possible with the Qlik platform and it's robust set of APIs - a Qlik Sense Bot - developed by my colleague Juan Gerado Cabeza. Since then we are getting numerous requests to see and learn more about what was shown on that day, so I have create this brief video to share some of its insights.


4-18-2017 7-38-28 AM.pngWhat is a Bot you may ask?


You already know some popular bots – Siri, Cortana, Alexa and of course Google. These guys are programs designed to perform tasks, such as setting an alarm, telling you the weather, searching online or even ordering a pizza. So why not have a bot tell you who your top sales people are, alert you when profit margin reaches 20%  – or - even have it send you charts and reports directly to your device?  The possibilities are endless. Juan as done just that, creating an analytical assistant - that in actuality turns Qlik data visualization into conversational analytics.


Now understand the Qlik Sense Bot - IS NOT a product provided by Qlik, but rather a neat concept that demonstrates the art of the possible when using the Qlik platform and its APIs. Now - neatness, coolness and Qlik platform superiority aside, what I like the most about this innovation is that it provides many real world applications. Bots can be used by anyone, anywhere, on any device and at anytime – scheduling automated tasks and providing access to information when and where you need it – reducing complexities, and increasing availability of insight by simply having a conversation. So in my opinion I do see this as a viable product offering, but you never know. Watch this brief video to learn more about this awesome concept. If you want even more information about this superior innovation, please contact us at qlik.com, or you can reach out to us on Twitter or on the Qlik Community.


Have a great day!



Michael Tarallo (@mtarallo) | Twitter


Pushing the Boundaries of Analytics  - Qlik Sense Bot


We want to hear from you. Please leave your comments and questions in the comments section below.


NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.


NOTE:  Can't see the video? Download the .mp4 to play on your machine or mobile device.



Did you know that you can register extensions on the fly in mashups? That's right, you can register an extension in a mashup to use in that mashup, regardless of whether the extension is already loaded into your Qlik Sense environment. That means you can distribute your mashup with any extensions it uses as one package, and you have total control of the extension version your mashup is using.


Doing it is pretty straightforward. You just need to load the extension code into your mashup, then register it. It'll look something like this.

require(["js/qlik"], function (qlik) { //load qlik module

  require(["path-to-my-extension/my-extension.js"], function(myExtension) { //load extension entry point
   qlik.registerExtension( 'my-extension', myExtension ); //register extension
    //do stuff with extension


Notice that I loaded the extension entry point after loading the qlik module. That's because many extensions use the qlik module, and if your extension loads the qlik module but you try to load your extension code before loading the qlik module in your mashup, you'll end up with errors. So better just to load the extension after the qlik module has been loaded in your mashup.

Once the extension has been registered you can do stuff with it, like use it with the Visualization API. An interesting use case is if you are loading objects that use an extension from an app into your mashup. The version of the extension you register with the mashup will override the extension loaded into your Qlik Sense environment, which can be really useful.


You can read more about it and see a few examples here Creating extensions on the fly.

Happy Tuesday everyone! Thanks for joining me in this week’s Qlik Community Design Blog. Today I have the pleasure of introducing our newest guest blogger, Denise LaForgia. Denise is a colleague of mine in the Product Marketing group and is a Senior Product Marketing Manager focused on our cloud solutions. In this week's edition she will be covering our new REST connectivity recently made available to Qlik Sense Cloud Business subscribers. On an occasional basis, Denise will share updates on our Qlik Sense Cloud solutions. Take it away Denise.


Hi Everyone,


Welcome to this first installment of what I would like to refer as our Qlik Sense Cloud Update blog. I plan on bringing you all the news about the latest updates in Qlik Sense Cloud as well as some tips and tricks to help you get the most out of your Qlik Sense Cloud subscription. Occasionally, I might even ask Mike to embed a supplemental video to go along with the topic as we have done in this article. Please note that I will also provide continuous updates in the Qlik Sense Cloud Community Section along with the occasional appearance here. We have a lot of exciting features rolling-out, so stay tuned!


This week we’re excited to announce the launch of REST Connectivity in Qlik Sense Cloud Business. We know Qlik Sense Cloud Business users are eager for additional data connectivity options in order to automatically import and associate data sets from multiple sources. REST connectivity provides flexibility to a wide range of connectivity options with many of the applications you may be using in your business or project group or team.


So what is REST?


REST stands for Representational State Transfer, a modern and lightweight, secure communications protocol used to transfer data over the web. The Qlik Sense Cloud Business REST connector is designed to load data into a Qlik Sense app from a service that supports REST. It can return data in many formats such as JSON, XML, or CSV. Most web-based applications, social media channels, cloud-based CRM systems and even Google Analytics are REST-enabled, which means you can now build a connection between Qlik Sense Cloud Business and those data sources.


How does it work?


The Qlik Sense Cloud Business REST Connector can be considered a 'generic' connector, meaning it gives you the flexibility to configure a connection with any REST-enabled source you’d like to pull data from. Depending on which application you want to connect to, you can navigate to its developer area and configure that application’s settings to open up a REST connection. Visit this area in our help section to read examples on how to do that for LinkedIn, Twitter, Facebook, and Google Analytics. (included in video) Once you have the query parameters, head to the data manager or data load editor in Qlik Sense Cloud Business to complete the connection.





You can also use the REST Connector to load data files directly from public web files, such as DropBox, by simply entering the file’s URL in the REST Connector configurator.  The Qlik Sense Cloud Business REST Connector loads the data into your app and automatically parses the information into appropriate table and field structures so that it’s easily used with your application’s data model. And, you can use the scheduled refresh feature in Qlik Sense Cloud Business to ensure your data files from the REST Connector are always up to date.


Ready to learn more - webinars, videos:


Watch Mike's video below or go to the Set Up Select Sources for REST Connectivity page for more information about how to connect to different data sources – including Facebook, Twitter, and Google Analytics - using REST. Mike will also be presenting a Tips and Trick's webinar on REST Connectivity with a LIVE Q&A on May 10th at 1PMEST - you can learn more about it and register HERE.




Denise LaForgia

Senior Product Marketing Manager






Introduction to the Qlik Sense Cloud Business REST Connector and JSON Schemas


Can't see the video? Download the .mp4 to play on your machine or mobile device.


Additional Qlik Sense Cloud Connectivity Resources


How-To Guides:


How-To Videos:

The ability to make selections and see what data is associated is one of the powerful capabilities of Qlik Sense and QlikView.  Selections allow users to explore the data in an app and to answer their specific questions at any given time.  In this blog, I will discuss the following selection options you may find in a selection pop-up window (shown below): Clear selection, Select all, Select possible, Select alternative and Select excluded.


Clear selection

Let’s start with the Clear selection option.  As you may expect, this will clear all selections that have been made in an app excluding locked selections.  Locked selections are selections that cannot be cleared or changed.  They are used when the user wants to protect a selection.


Select all

Select all will select all values in a field making them green.  If there are excluded values in the field when you select all, then they will become selected excluded – these items will remain gray but they will get a check mark next to them indicating that they are also selected.  In the image below, Dairy was selected in the Product Group field and Cheese was selected in the Product Sub Group field.  All the other values in the Product Group field are excluded and therefore gray.  Once all values are selected in the Product Group field, the excluded items stay gray but now have a check mark to indicate they are selected excluded.

select all.png

If the selection that excludes some of the values (which is Cheese in this example) is removed then they will all become selected and turn green.


Select possible

To explain the select possible selection, let’s first define possible values.  Possible values are values that are not selected and not excluded by a selection.  They appear with a white background.  For example, all values in a filter pane will be possible if no selections have been made.  In the image below, Dairy is selected in the Product Group field and the Product Sub Group has 5 possible values (the first 5 values in the list).  The possible values are product sub group items that are associated with the Dairy selection.

what are possible.png

If select possible is applied to the Product Sub Group, you will get the following results:

select possible.png

Select alternative

What are alternative values?  Alternative values (light gray) are values that would have been possible (white) if a selection was not made in the field.  We have already seen an example of that in the image below.  In this example, Dairy was selected first and then Cheese was selected.  Before Cheese was selected, the first five values in the Product Sub Group field were white (possible values).  After Cheese was selected, Cheese became selected (green) and the other four values became alternative (light gray).

selected dairy and cheese.png

Select excluded

Select excluded will select all the non-selected values in a field.  If Dairy is selected in the Product Group field, then select excluded will select all values that were excluded (gray) and will make them green and the Dairy selection will become an alternative value (light gray).  If Dairy (Product Group) and Cheese (Product Sub Group) were selected and select excluded was selected in the Product Sub Group field (see image below), then the selected value Cheese becomes an alternative value (light gray), the possible values become green and selected and the excluded values become selected excluded (gray with a check mark).

select excluded.png

The selection options reviewed in this blog can be used not only in filter panes and the selections tool but they can also be used in charts.  This gives the user the ability to drill down in the data and see what data is associated and excluded by selections.  Selections are very powerful so it is important to know all your options and how you can make selections to analyze your data.  The example images used in this blog are based on the data in the Consumer Goods Sales demo.  Feel free to use the selection tool in the app to test out selections or log in to qlik.com so you can add your own filter panes to the demo app.




Well guys - it is release time again and today I am please to announce the arrival of Qlik Sense 3.2. Now if you have been using Qlik Sense Cloud since February 2017, some of these features may seem familiar to you already. Going forward we may not always roll out everything in one big bang for a dot/feature release. In fact, as we continue to build on our strength in the cloud, we are beginning to make features available in Qlik Sense Cloud on a continuous basis so there is really no need to wait for the ‘big day’ to get the latest features. So if you are eager to try out new features and capabilities in Qlik Sense, there is always a chance they could already be in Qlik Sense Cloud ahead of the Desktop and Enterprise software. So stay tuned and connected to us for the latest news.


In this blog I wanted to demonstrate and present what's new in Qlik Sense 3.2. As one of our community members puts it, it is "a pretty beefy dot release". To keep it plain and simple here are the highlights:


4-3-2017 8-01-20 PM.png


  • Advanced coloring
    Ability to more easily choose user defined colors for visualizations, measures, and KPI objects


  • Calendar measures (my favorite)
    Automatically generated fields for comparing date ranges for measures without writing Set Analysis expressions. (BTW, if you don't know what Set Analysis is, I suggest you check out this primer video:A Beginners' Introduction to Set Analysis (video) as the concepts learned can still apply to other analysis.)


  • GeoAnalytics
    This is technically not "in" 3.2 - but is ready to be used with it. I make mention of this in the video and you can learn more here: Introducing Qlik GeoAnalytics

  • Shared persistence
    A new installation option for Qlik Sense Enterprise when deploying multi-node sites that allows nodes access to centralized storage, improving performance and stability with larger deployments.


  • Supported desktop client
    Allows Qlik Sense Desktop to authenticate against a Qlik Sense Enterprise server NOW with full support by Qlik in production environments. (No Qlik Sense server? - then you must register for a QlikID and use those credentials)


  • Additional visualization, navigation, and search improvements


So, sit back and enjoy this short video that describes and demonstrates these aforementioned features in more detail. Leave your comments and feedback to below, we'd love to hear from you.


If you want to get Qlik Sense Desktop 3.2 today - you can get it from this temporary link Qlik Sense Desktop here - we are currently updating our Qlik Sense Desktop products page on our website. You can also experience 3.2 without downloading any software by using the Qlik Sense Cloud.


For additional help on these features and more check out our Qlik Help Channel on YouTube. (I don't manage this, so videos are not always available as .mp4)



Michael Tarallo (@mtarallo) | Twitter




What's New in Qlik Sense 3.2

NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.

Note: Can't see the video? Access to YouTube blocked?
Download the .mp4 file attached to this post.


Yianni Ververis

BiPartite Extension

Posted by Yianni Ververis Mar 31, 2017

One interesting Qlik Sense extension that we have successfully used, is the BiPartite one. We have used it in couple of mashups like the UK Migration http://webapps.qlik.com/telegraph/uk-migration/index.html.


I like this one since you have a visual representation of all the values, selected and not and there is a nice animation moving from one dimension value to the next.

2017-03-30 14_00_01-_UKMigration _ Sheets - Qlik Sense.png


This is a responsive extension with minimum view of 320px. You add One dimension for the left column and one for the right and then one measure for the values in each column.

You can write your own labels for each column and add your custom coloring palette.

That's it! Give it a try

Branch : http://branch.qlik.com/#!/project/58b820c55efd3b8f0b6743ce

Git: https://github.com/yianni-ververis/SenseUI-BiPartite

It’s been a while since the last time we covered an extension in this blog, this time I would like to introduce ColorStyler by Johannes Sunden jsn .





The reason I found ColorStyler very special, besides its obvious value, is due the way this extension was built. It’s half an extension half a mashup or should I rephrase it as a “mashup that extends your Qlik Sense app”.


ColorStyler as you might have figured out by now is a coloring extension, it will let you preview and apply different color schemes to your charts, no coding is required, it will take care of the not-so-easy task of creating a ColorMix expression for you.


Once installed in your computer, ColorStyler sets up a mashup that will let you interact with the available apps and apply some color options to your charts.


To start working with ColorStyler you must pick an app from a list of your available Qlik Sense apps, then you will be presented with a list of available visualizations (as of today it only loads Master Items), and finally ColorStyler will offer you four main color categories to pick from.


I find very useful the gradient options, and especially gradient themes, it’s a good selection of nice and safe colors palettes. If you are not happy with the proposed themes you can always create your own by defining the gradient colors.


It’s quite interesting to see the chart update on real-time and compare how different color alternatives affect to our ability to read the visualization. Once you’re happy with your color selection you just need to “Save Changes” to make it persistent not only in the mashup but in the actual Qlik Sense app.

As I mentioned before,ColorStyler will only let you interact with Master Visualizations from your Qlik Master Items library so you must have at least one master object in your app to be able to use this tool. After applying color to your master item, you can edit it as normal in your Qlik Sense client and copy the generated expression (ColorMix1 or ColorMix2) and then apply it to any other visualization.

Note: I would recommend to be extra careful when applying colors to charts by dimension, it’s very important to use color with care, just remember color in data visualization should be used to convey information, and not as decoration. Also, is very important to make sure that a dimension chosen color will be applied consistently across your app, avoiding situations where the same dimension value has two different colors in two charts.

For latest version and technical questions please check Qlik Branch project page: Qlik Branch


If you prefer to watch a video instead:

If you don't already know, enigma.js is an open source library for communicating with Qlik Sense backend services. The QIX Service of enigma.js provides an API to communicate with a QIX Engine, giving you the ability to build applications powered by Qlik.


Vega calls itself a visualization grammar. It is a declarative language for creating visualizations. You just describe the appearance and behavior of the visualization you want to create, and Vega does the rest. And it can render with canvas, avoiding costly dom manipulations.


I'm going to demonstrate using enigma.js and Vega to create a simple bar chart. I'll be reusing the qApp.js module and qSessionObject class I introduced in Getting started with enigma.js, so check that out first if you haven't already.


Getting Setup

You can review Getting started with enigma.js, and follow the "Setup", "Connecting to an app", and "Creating Session Objects" sections. You'll also want to load jQuery and Vega (https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.25/vega.min.js).


Alternatively, you can download the getting-started.zip file below. The getting-started.zip file includes package.json and webpack.config.js files, the qApp.js and qSessionObject.js files, as well as an index.html file, and a main.js file. There's also a .qext file, in case you want to use Qlik Sense as your server for your static files.


For this demonstration, I'm using fields from the Helpdesk Management app, so make sure your qApp.js file is connecting to a copy of the Helpdesk Management app.


The Project

Now that you're setup, we can start the project. We'll do everything in main.js for this demonstration. So open up main.js. We'll need to import qSessionObject.js and create our session object.

import qSessionObject from "./qSessionObject";

let chartCube = new qSessionObject({
  qInfo: {
    qType: "visualization"
  qHyperCubeDef: {
    qDimensions: [{
      qDef: {
        qFieldDefs: ["[Case Owner Group]"]
      qNullSuppression: true
    qMeasures: [{
      qDef: {
        qDef: "Avg([Case Duration Time])"
    qInitialDataFetch: [{
      qWidth: 2,
      qHeight: 1000


Now that our qSessionObject has been created, let's define the Vega spec for our bar chart. The spec is roughly based on the spec from Vega's tutorial Vega: Let's Make A Bar Chart Tutorial, so feel free to check that out if you like. I simplified it a bit, and removed the data values so that we can stream the values in using data returned from enigma.js. It looks like this:

let barchartSpec = {
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
      "name": "table"
  "scales": [
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width"
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
  "axes": [
      "orient": "bottom",
      "scale": "xscale",
      "encode": {
        "labels": {
          "update": {
            "angle": {"value": -50},
            "align": {"value": "right"},
            "baseline": {"value": "middle"},
            "radius": {"value": -2}
      "orient": "left",
      "scale": "yscale"
  "marks": [
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category", "offset": 1},
          "width": {"scale": "xscale", "band": 1, "offset": -1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        "update": {
          "fill": {"value": "steelblue"}
        "hover": {
          "fill": {"value": "red"}


With our qSessionObject and our bar chart spec created, we can create the bar chart. After the dom is ready, we'll initialize the Vega view (Vega: View API), open the qSessionObject, get the layout of the qSessionObject, reformat the matrix to work with Vega, insert the values into our Vega view, setup updating the Vega view when the qSessionObject changes, and add an event listener to the Vega view to enable selections. It all looks like this:

$(() => {

  //initialize vega view
  let view = new vega.View(vega.parse(barchartSpec))

  //open cube
  chartCube.open().then(() => {

    //get object layout and insert data into vega view
    chartCube.object.getLayout().then((layout) => {
      let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {
        return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}
      view.insert('table', values).run();

    //when object data changes, update data in vega view
    chartCube.object.on("changed", function() {
      chartCube.object.getLayout().then((layout) => {
        let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {
          return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}
        view.remove('table', (d) => { return true; }).run();
        view.insert('table', values).run();

    //add event listener to make selections on hypercube when a bar is clicked
    view.addEventListener('click', function(event, item) {
        chartCube.object.selectHyperCubeValues("/qHyperCubeDef", 0, [item.datum.qElemNumber], true);



And that's it. Don't forget npm run webpack, and check out the results. Here's what it should look like - Vega bar chart.

I've attached the full project in case you'd prefer to just download that and play around too.

Today I am going to blog about five Counter Aggregation Functions that can be used in Qlik Sense and QlikView in both charts expressions and the script.

  1. Count()
  2. MissingCount()
  3. NullCount()
  4. NumericCount()
  5. TextCount()

Before taking a closer look at how we can use each of these functions, let’s first look at the data set I will use for the examples.  Below is the Excel data I will load.  It is a simple list of fruits, their color and quantity.


1. Count()

The Count function is probably one of the most common functions that can be used.  In a chart, Count() aggregates the number of values in each chart dimension.  In the script, Count() returns the number of values aggregated in the expression as defined by a group by clause.


Expression for a chart: Count(Distinct Fruit)


In the script below, Count() will return color and the number of fruits that have that color.

Count.png              Count Table.png

2. MissingCount()

In a chart, the MissingCount() function will aggregate the number of missing values in each chart dimension.  In the script, it will return the number of missing values aggregated in the expression, as defined by the group by clause.


Expression for a chart: MissingCount(Quantity)


In the script below, MissingCount() will return 1 if the Quantity field is missing a value.

MissingCount.png              MissingCount Table.png

3. NullCount()

NullCount() will return the number of null values in each chart dimension in a chart.  In the script, NullCount() returns the number of null values aggregated in the expression, as defined by a group by clause.


Expression for a chart:  NullCount(Color)


In the script below, NullCount() returns 1 if the Color field is null.

NullCount.png              NullCount Table.png

4. NumericCount()

In a chart, NumericCount() aggregates the number of numeric values by each chart dimension and in the script, NumericCount() returns the number of numeric values found in the expression, as defined by a group by clause.


Expression for a chart: NumericCount(Quantity)


In the script below, the total Quantity fields that have numeric data is returned.

NumericCount.png              NumericCount Table.png

5. TextCount()

In a chart, TextCount() aggregates the number of non-numeric values by each chart dimension and in the script, TexCount() returns the number of non-numeric values found in the expression, as defined by a group by clause.


Expression for a chart:  TextCount(Color)


In the script below, TextCount() will return the total number of text values in the Fruit field.

TextCount.png              TextCount Table.png

Here is a table with all these functions used in a chart:


While I have not used all of the counter aggregation functions in my work with QlikView and Qlik Sense, I think they can be valuable when auditing and checking the health of your data.  They can highlight gaps in the data that should not be there and point out data type issues in the data.  I would be interested in hearing how you use these functions in your apps.




Another great mashup from the Demo Team!


After my favorite CIO where we introduced KPIs into the navigation, salesforce is beautiful, elegant and made mostly of custom extensions!


I started with the custom Selection toolbar (Angular Directive) that I introduced in the CIO dashboard. This changes based on the number of selections, if it's only one item of that dimension selected, or more than 6, it displays "Dimension: item selected". If there are more than one, but less than 6 items selected, it changes to a dropdown menu with the x button to deselect it. This is listening to selections, which means that whatever selections are made in the webpage, they will be displayed here as well.

2017-03-03 08_51_07-Salesforce.png

Then, we needed Sense like filters but as drop down menus (Angular Directive). I have done this with the UN Gender Statistics site but this one is more advanced and stays open until you finish making all selections and sorts them by state. It scrolls if many items.

2017-03-03 08_56_03-Salesforce.png


Another issue we were faced with, was that we created a combo chart in Sense but we needed to customize the colors to match our webpage. This lead me to create the Combo Chart extension. This not only gives you the option of changing colors but, hover states, borders, set bar widths, dot widths, has a better display of the labels etc.

2017-03-03 11_23_51-Salesforce_Mashup_Demo_Team _ Sheets - Qlik Sense.png


In the same page, we had to display and compare two vertical bar charts. The problem is that when we placed the out-of-the-box ones, the y-axis max were different thus visually misleading.  So I used the combo chart with only one measure and set the max to achieve the desired results

2017-03-03 09_32_24-_Salesforce_Mashup_Demo_Team - Dashboard 2 _ App overview - Qlik Sense.png

2017-03-03 11_26_06-Salesforce.png


Moving on to the next page, we had two more issues to solve.

We needed to have a Stacked bar Chart based on the value of the measure and not the number of measures. For this, I created the SenseUI-ValueStackedbarChart. I used the same tooltips, coloring, hover states etc as I used in my other extension like my most popular one, SenseUI-BarChart.

2017-03-03 10_27_46-_Salesforce_Mashup_Demo_Team - Opportunities 1 _ Sheets - Qlik Sense.png

The other issue was that we needed a horizontal menu for quarters and years. For this I used an older extension, the SenseUI-Filter.

2017-03-03 10_47_36-Salesforce.png

Lastly, I used my SenseUI-BarChart extension for all of the horizontal bars. I used the same bar color, border and hover color to match the rest of the website's objects.

2017-03-03 14_04_16-Salesforce.png

The mashup is found at http://webapps.qlik.com/salesforce/index.html

Please note that this is a work in progress. I still have to work on the mobile version and some other UI issues


Extensions mentioned here:






For more of our work, you can go to webapps.qlik.com




NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.



Just that, a mashup template for dev-hub (aka dead simple drag and drop mashup creator) that ships with a bunch of cool features such as:


  • Dev-hub ready
  • Multi Page
  • KPI row built in
  • Prebuilt CSS color library
  • Cards with full screen toggle
  • Offcanvas filters pane
  • Help modal popup
  • Responsive design
  • Bootstrap built in
  • Custom fonts ready



Because we’ve heard you asking for a more powerful and good-looking template that can constitute a solid framework to create your customized mashups.



Anyone looking for a feature rich mashup template designed for use in the dev-hub.



Available today!



You can grab the latest* version here GitHub - fkabinoff/qs-dev-hub-dashboard-template: Dashboard template for Qlik Sense dev hub


*Please notice this is a live project, we will keep updating it frequently. Right now the project documentation (readme.md) is far from what we would like it to be.

In this week's edition of the Qlik Design Blog, I'd like to introduce Mitul Vadgama. Mitul is a member of our Qlik Consulting Services team in the UK. He has worked on a variety of consulting projects using both Qlik Sense and QlikView with many enterprise customers. His passion is transforming data into valuable business insights, knowledge sharing, and enabling customers to get the most value out of Qlik products. Mitul is going to show you how to optimize a powerful and unique capability in Qlik Sense, Smart Search. Thanks for your valuable contribution Mitul!


Smart Search


Smart Search provides powerful functionality allowing users to search dimensions and values found within an application’s data model. When working with customers on consulting projects I have found that sometimes the business users, data architects, and app designers want to control which fields are included or excluded in the search. Did you know that you can control which fields are included or excluded from Smart Search?


Here is an example using Smart Search in action where I search for “Rob” in my sales application:




You can see Qlik Sense finds the value “Rob” in the following fields:


•    First Name

•    SalesPerson

•    CompanyName

•    ContactName


Consider a scenario where you want Smart Search to exclude searching in the “ContactName” field when the users search. You can achieve this by inserting the exclude clause in the Search statement in your script.


The Search statement


The Search statement is a script function used for including or excluding fields in smart search.


It can contain two clauses:



  • Search Include *fieldlist
  • Search Exclude *fieldlist

In our case I want to exclude ContactName from my results. I do this by opening my data load editor and typing in the following right after the SET statements:


Search exclude ContactName;




....and reload.


When I search again for “Rob” you can now see ContactName excluded from the results:



Tip: If you want to exclude multiple fields, simply list the fields you want to exclude using comma separators while ensuring your field name syntax is correct.


Search exclude field1,field2,field3;


Another common scenario may be you want to hide most of the ID fields from your Smart Search (maybe because they are only needed for the data model building process).


A possible way you can achieve this is through the following syntax:




The above contains two lines of code:


  • Search Exclude '*ID';
  • This excludes all fields ending with ID from searches in Smart Search.


  • Search Include CustomerID;
  • This includes the field CustomerID in searches in Smart Search.


This way I am ensuring all but one ID field is included in my Smart Search.


We hope through this post you can see how the Search syntax along with Exclude and Include keyword clauses is a simple yet powerful way to control which fields a user can search on your Qlik Sense application. It also speeds up the search index creation when the data model is first loaded.


For a full list of services offered by Qlik Consulting check out: http://www.qlik.com/us/services/qlik-consulting.




Mitul Vadgama

Consulting Services, UK


For more information on the Smart Search feature check out these videos:


enigma.js is Qlik’s open source library for communicating with Qlik Sense backend services. I’m going to show you how to get started using enigma.js, as well as a couple general patterns I’ve been using.


I’m going to use ES2015, Babel, and webpack. These are not necessarily requirements for building an app with enigma.js, but I recommend them.



Create a new folder for your project. Run npm init or just create your own package.json file, however you prefer. Now run npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev. This will install our development dependencies and save them to our package.json file. Next, run `npm install enigma.js --save`. This will install enigma.js, and save it to our package.json file.


For convenience, we’ll add webpack to the scripts property of our package.json file. This will let us run npm run webpack instead of having to supply the entire path to webpack. Open up the package.json file and add ”webpack”: “webpack” to the scripts property. Your package.json file should now look something like this:

  "name": "enigmapatterns",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "enigma.js": "^1.0.1"
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1"
  "scripts": {
    "webpack": "webpack"


We’ll also need to create a webpack.config.js file, which should look like this:

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  devtool: 'source-map',
  module: {
    loaders: [
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']


Finally, we’ll want to create a main.js file which will be our entry point, and an index.html file which loads the bundle.js file that our build will output.


Connecting to an app

The pattern I’ve been using to connect to the app is to create a qApp.js file, and export the promise to connect to the app. This way, anywhere I need to use the app I can simply import this file and do something like getApp.then((app) => { //code here }).


So create a file named qApp.js, which looks like this:

import enigma from 'enigma.js';
const qixSchema = require('./node_modules/enigma.js/schemas/qix/3.1/schema.json');

const config = {
  schema: qixSchema,
  session: {
    host: 'localhost',
    prefix: '',
    port: 4848,
    unsecure: true

export default enigma.getService('qix', config).then((qix) => {
  return qix.global.openApp('Helpdesk Management.qvf').then((app) => {
    return app;


Creating session objects

I like to have a class for creating session objects. That way I can have an open() and close() method for each session object. The open() method calls createSessionObject on the app and returns the promise if the object does not exist in the app, and simply returns otherwise, so that I can always check to see if an object is available, without inadvertently creating a duplicate object in the app. The close() method calls destroySessionObject on the app, passing along the object’s id.


So create a file named qSessionObject.js, which looks like this:

import getApp from "./qApp";

class qSessionObject {

  constructor(properties) {
    this.properties = properties;
    this.object = null;

  open() {
    if (!this.object) {
      return getApp.then((app) => {
        return app.createSessionObject(this.properties).then((object) => {
          this.object = object;

  close() {
    if (this.object) {
      return getApp.then((app) => {
        return app.destroySessionObject(this.object.id).then(() => {
          this.object = null;


export default qSessionObject;


You can also put other methods in this class which may be helpful. For example, I recently built an app that had 2 alternate states, and when the states changed I needed to call applyPatch on each object and change the state of the object. Having a class for the session objects made this really easy.


Usage example

So now we have our project setup, a qApp.js file for connecting to the app, a qSessionObject.js file for creating session objects, let’s cover a simple use.


We’ll create 3 lists objects, and 3 filters in our UI with those list objects. For this, we’ll use the Filter class which you can find at the end of this post, along with the rest of the source code. You'll need the filter.js file from the zip below.

You’ll also find a .qext file in the source code. That’s so we can put this project in the Extensions folder of Qlik Sense Desktop to use it as a server, but you can serve this any way you’d like, just make sure that your config in qApp.js is pointing to your Qlik Sense server.


So first, let’s get our html ready. The Filter class relies on jQuery and Bootstrap 4 alpha v6, so we’ll load those. Also, we'll need to load our bundle.js and main.css files. Then we can add the html we’ll need to the body. Your index.html should look like this:

<!doctype html>
  <title>Enigma patterns</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Tether -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <!-- Bootstrap 4 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <!--Project code -->
  <script src="bundle.js"></script>
  <link rel="stylesheet" href="main.css">
  <div id="loading">Loading...</div>
  <div id="loaded" style="display: none">
    <div class="filters row">
      <div class="col-auto">
        <div class="filter" id="case-number-filter"></div>
      <div class="col-auto">
        <div class="filter" id="subject-filter"></div>
      <div class="col-auto">
        <div class="filter" id="case-owner-filter"></div>


Grab the main.css file from the attached source code and save it in your project folder.


Now open main.js. We’ll import the qSessionObject class and the Filter class, create 3 list objects, create 3 filters, open the 3 list objects, and then initialize the filters. This is what that should look like:

import qSessionObject from "./qSessionObject";
import Filter from "./filter";

let caseNumberList = new qSessionObject({
  qInfo: {
    qType: "visualization"
  qListObjectDef: {
    qDef: {
      qFieldDefs: ["[CaseNumber]"],
      qFieldLabels: ["Case Number"]
    qAutoSortByState: {
      qDisplayNumberOfRows: 1
    qShowAlternatives: true,
    qInitialDataFetch: [{
      qWidth: 1,
      qHeight: 1000
let subjectList = new qSessionObject({
  qInfo: {
    qType: "visualization"
  qListObjectDef: {
    qDef: {
      qFieldDefs: ["[Subject]"],
      qFieldLabels: ["Subject"]
    qAutoSortByState: {
      qDisplayNumberOfRows: 1
    qShowAlternatives: true,
    qInitialDataFetch: [{
      qWidth: 1,
      qHeight: 1000
let caseOwnerList = new qSessionObject({
  qInfo: {
    qType: "visualization"
  qListObjectDef: {
    qDef: {
      qFieldDefs: ["[Case Owner]"],
      qFieldLabels: ["Case Owner"]
    qAutoSortByState: {
      qDisplayNumberOfRows: 1
    qShowAlternatives: true,
    qInitialDataFetch: [{
      qWidth: 1,
      qHeight: 1000

$(() => {
  let caseNumberFilter = new Filter(caseNumberList, "#case-number-filter");
  let subjectFilter = new Filter(subjectList, "#subject-filter");
  let caseOwnerFilter = new Filter(caseOwnerList, "#case-owner-filter");

  Promise.all([caseNumberList.open(), subjectList.open(), caseOwnerList.open()]).then(() => {


Don’t forget to run npm run webpack to build your bundle.js file.


If you’ve followed along, you should have 3 dropdowns on your page now that look like this - Enigma patterns. You can also just download the source code below, put it in the Extensions folder of your Qlik Sense Desktop installation, run npm install and then npm run webpack, and check out the project that way.

Simon Kirby.jpg
In this week's design blog I have the pleasure of introducing our newest guest blogger, Simon Kirby. Simon is a Director of SI Industry Solutions with our Financial Services group out of the UK and has prepared an introduction and video that shows you how Qlik Sense can be used to analyze car insurance claims data.


Insurance Whiplash Fraud


It was recently announced in the UK that car insurance premiums are at their highest ever levels (The Actuary Magazine) and one of the key factors for this is an increase in whiplash injury claims. In addition to legitimate whiplash injury claims, insurance companies are struggling to cope with an increasing trend in fraudulent whiplash claims. These claims occur when a third party deliberately creates an accident by causing another car to crash into the back of them. They then feign a whiplash injury and receive thousands in compensation. It’s been discovered that these people repeat these accidents regularly and effectively earn a living from scamming the insurance industry.


How Qlik Sense can help


A key weapon for insurers in identifying these fraud perpetrators is the analysis of data. Insurers need to be able to search for associations in data between similar types of claims, in similar locations, including something unique like a mobile phone number. These associations between the data can lead to a significant increase in identifying the groups of people that commit these types of fraud. This is exactly where Qlik Sense can play an important role in this activity.  The QIX Associative engine, at the heart of Qlik Sense, is designed to make the discovery of these associations easy and intuitive. Together with the ability to quickly create drag and drop visualizations, Qlik Sense can help Insurance Fraud Analysts identify trends, patterns and examples of fraudulent Whiplash claims. (view more about Qlik's Associative Model: Qlik Snippets - The Qlik Associative Model - YouTube and Qlik's Associative Model - Part I - YouTube)


See and try it for yourself


The next step for insurers would be to combine the power of Qlik Sense with their fraud detection models.  The result would be a Qlik Sense visualization embedded into the claims system that showed the claims handler the real-time results of the fraud model at the time of the Notification of Loss.  This would allow the insurer to push suspicious claims to a dedicated fraud management team for further investigation which could potentially save the company millions.


If you would like to see how Qlik Sense can be used to identify claims fraud, take a look at our video on YouTube and the attached Qlik Sense app. For more details on this app, please visit this link available on the Qlik Financial Services Community site: Insurance Claims App



Simon Kirby

Director, SI Industry Solutions - Financial Services




NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.


Can't see the video, YouTube blocked? Download the attached .mp4.


If using Qlik Sense Desktop please copy .qvf file to your C:\Users\<user profile>\Documents\Qlik\Sense\Apps and refresh Qlik Sense Desktop with F5. If using Qlik Sense Enterprise Server please import .qvf into your apps using the QMC - Qlik Management Console.

Filter Blog

By date:
By tag: