A look at filters in Qlik Sense charts

One of the recent new features in Qlik Sense is the ability to add filters to charts, filters that applies only to the chart they are included in, not other charts. So far this is only available n Qlik Sense Clod. (Help is available here)

It has always been possible to filter data in a chart, but setting it up has been more complicated. The new feature makes it much easier and more straightforward, so it is surely a feature that will be welcomed.

Setting it up

To try this I’ll use a copy of the Demo App – Beginner’s tutorial that’s available in QlikSense Cloud If you want to follow along, open it in Qlik Sense Cloud and then make a copy of the sheet ‘ Product details’. Then click on ‘Edit sheet’ in your new sheet.

The filter option is only available in the new authoring mode, so make sure you’r not in the old one (called ‘Advanced options’). I’ll be using the chart ‘Sales and margin by Product Group’ but since that is actually a master object, and you can’t use the new authoring mode on master objects, I’ll firts have to unlink it, to make it no longer a master object. Once that is done, we’re ready to go.

This is what the sheet looks like when we start

Adding a filter

Filters are based on Qlik set expressions, but do not fear, there is help available to create the expressions. To add filters you use this little area:

First step is to enter the field namn (no, you cannot use dimensions). Do that, either by clicking Add and then searching for the field namn or by dragging and dropping the ‘Region’ field and you get a dialog like this:

Selecting filter values

Just select one or more regions and we are done:

Chart with filter

To verify that it works, end edit mode and make some selections in the region field. Notice how the values in the other charts change, but not the values in our filtered chart, they will still be showing the values in the reion(s) we set in the filter (in my case Nordic). So far so good.

What does the filter affect??

But exactly what does the filter affect? It surely affects the data in the chart itself, but what about other expressions, like dynamic titles etc? Let’s try. Change the title of the chart to (you will probably need Advancd options for this):

=’Sales and Margin by Product Group. Total: ‘ & Sum(Sales)

And now you will have a sum added to your chart title. Switch to analysis mode again, and make some selections in the Region field. Notice that the sum in the title changes, so the filter does not affect the title.

The filter will only affect chart data, not dynamic titles etc. That’s important to be aware of if you are using dynamic titles.

Chart with filter and dynamic title. The filter does not affect the title.

Displaying the filter to users

As you might have noticed Qlik Sense shows the filter at the bottom of the visualization. That works pretty well in this case, but in many Qlik data models you have flags with name that are not so user friendly, or you might have fieldnames with prefixes or more cmplicated filters. If that is the case you can enter your own describing text as a footnote to the chart, like this:

Adding footnote in property panel

And you will get your own text instead of the default one:

Custom filter description in the footnote

Behind the scenes

If you take a look at the properties of your visualization (I use my own Chrome extension for this) you can find your filters in their own structure:

Filters structure in object properties

Using this structure Qlik Sense then generates the actual set expression (qContextSetExpression) that is used:

Add Sense Chrome 2.1.0: Validation of measures and dimensions

A new version of my Chrome extension Add Sense is now on it’s way out. There is only one new feature in it: measures and dimensions are now validated, and if there is an error, you’ll see it in the list of measures / dimensions.

If you, like me, often start a new app by copying an old one, you might by accident have published an app with invalid measures and/or dimensions. The new feature helps you find thos, so you can fix or remove them. Also pretty useful if you’ve made changes to the data model in the app.

You don’t need to do anything to get the new version, Chrome will update automatically.

Add Sense Chrome 2.0.0: New Chrome manifest version and more

Add Sense Chrome version 2.0.0 is now available in the Chrome web store. If you already installed the previous version it should be upgraded automatically.

The main change is that the extension now uses Chrome manifest version 3, a change that was needed since version 2 will soon no longer be supported. As a user that change will not mean much. There are however some other changes too:

  • if you use many Qlik Sense objects in your page numbers with more than 2 digits will work better
  • the Active objects list has been updated, number of currently active objects are now displayed in the header, if the are not valid you will see that
  • the small boxes in the page can now be closed to avoid clutter
  • ODAG objects work better
  • the properties button in Active Objects has been corrected

Trying Qlik Sense Business API’s

Much of Qlik’s focus is today on their cloud products. Getting up and running with Qlik Sense Business (the name Qlik uses for their entry-level cloud product) is easy. And even if the hub is different and there is no QMC, it feels familiar. After all it’s the same engine behind the scenes. Many (probably most) extension will also work, since the extension API is the same, and the Capabilities API also the same – almost. But even though the methods are all there, some of them actually don’t give the same result.

The global object in the Capabilities API

The differences I have found are in the global object, as should be expected. (documentation is here). So let’s try it.

The first method is getAppList(). In Qlik Sense Desktop or Qlik Sense Enterprise (which is Qlik’s name on the product you install yourself on a windows server) this method will give you a list of all apps the currently authorized user has access to. In Qlik Sense Business it still works, but if you try it, it looks something like this:

In my Qlik Sense Business hub, I’ve got four apps, but getAppList only returns the one I am currently using. So if your extension uses getAppList to create a list of other apps, it won’t work in Qlik Sense Business.

Another frequently used method in the global object is getAuthenticatedUser(). You use it to find out the users id. In Qlik Sense Desktop you’ll get ‘Personal\\Me’, in Qlik Sense Enterprise you’ll get a string containing UserId and UserDirectory. In qlik Sense Business it looks like this:

So, while the format is the same as in Qlik Sense Enterprise, the content is different. The UserDirectory is empty, and the UserId is actually the IdP subject you can find in the cloud console (IdP stands for Identity Provider).

callRepository

The Capabilities APIs has one method designed to call the repository, originally built to call Qlik Sense Enterprise REST API called callRepository(). It is marked as Deprecated, but it is still there in Qlik Sense Enterprise, and looks like it’s there in Qlik Sense Business too. What happens if we try it?

Qlik Sense Cloud has the REST endpoint /api/v1/items to list apps the user has access to. If we try it, it looks like this:

We do get a warning in the console, but the call works, the data array actually contains the four apps I’ve got in my Qlik Sense Business hub. But since it is deprecated we probably shouldn’t use it but use some standard method of making a REST call instead.

Add Sense Chrome 1.3.0: corrections and changed icons

Version 1.3.0 of my Chrome Extension Add Sense is now available here. If you already have it installed, you should get the update automatically. These are the changes

Changed icon set

The extension now uses Qlik’s Leonardo UI instead of material design icons. The loading of Material Design icons does not work without configuration changes in Qlik’s cloud products, while Leonardo UI is already loaded.

Fixed bug when properties where treated like HTML elements

Sometimes expressions containing set analysis where destroyed in the tool. Mostly this happened when there was a letter immediately after the < character. That has now been fixed.

Other changes

If the visualization on screen is in the library, you previously only got the link (containing the id of the master visualization) in the property popup. Now you get the master objects properties.

The default filename when you save properties to file now contains the id of the visualization. You can still use another filename if you want to.

Qlik Sense and CSS revisited

I while ago I wrote a post on using CSS in Qlik Sense, with focus on extension development (you find it here). Much of it is of interest also if you are making Themes. While that post is still relevant, there are some recent changes in the Qlik Sense client that are important to know.

Inline styles

Qlik Sense now uses more inline styles. An example is headers, that are now styled something like this:

element.style {
    font-size: 1.15385em;
    font-family: "QlikView Sans", sans-serif;
    color: rgb(128, 128, 128);
    padding-right: 0px;
    padding-left: 0px;
}

This is because you can now actually set header color etc for some of the built-in charts. Where this is possible you will find a ‘Styling’ button in the property panel under ‘Presentation’, that gives you some new options:

Based on your settings here, Qlik Sense will create an inline style. Even if you do not have this section (looks like it is undocumented, if you find any documentation on it, please let me know) Qlik Sense will still create inline styles. Since it is an inline style, you will need to use !important if you want to override it, whether in a theme or in an extension, something like this:

 .qv-object-qlik-variable-input  .qv-object-title {

   color:red !important;

}

(I answered a question on this recently here)

Hiding the expand button

A common request is that you want to disable the maximize functionality for some objects. While expanding a chart or a table to full-page is often a good feature, for many extensions, like buttons, or most text objects it makes no sense. This once used to be possible to do with some CSS, but because of changes in the HTML structure is no longer possible. But in the latest release there is a new flag under Appearance/General that allows you the disable the hover menu:

This is almost the same, though not quite:

  • everything in the hover menu will disappear
  • instead you can use the context (right-click) menu, where everything is still available, so you can still make a button full screen

AddSense Chrome 1.2.1: active objects, dimensions, measures, link to Catwalk

A new version of my Chrome extension for Qlik Sense, Add Sense, is now available in Chrome Web Store. This is a pretty big version, actually that’s why it has number 1.2.1, because a bug sneaked into 1.2.0 which I had to fix.

New app level operations

You reach the new functions from the app popup box:

In fact, most of the buttons are new. From the left to the right they are used for:

  • showing the script
  • listing the tables
  • exploring the data model (in Catwalk)
  • listing variables
  • listing dimensions
  • listing measures
  • listing extensions used
  • listing active objects

Data model

A number of the new functions helps you with the data model. You can see what tables are defined in the app, and list dimensions and measures (and copy their definition into a program of your choice, like Excel or something). But perhaps the best new function is the link to Catwalk. Click on the compass icon, and it will open Catwalk with your current app:

If you don’t know what Catwalk is it’s time to get to know it knopw. It’s an open source tool from Qlik that helps you explore the data model of a Qlik Sense app. If it doesn’t work on your server, you might need to whitelist it. Check the documentation! Originally I planned to do some visualization of the data model, but I realized that I cannot make anything better than Catwalk, so why not reuse it.

List all active objects

The Add Sense extension uses Angular and some CSS selectors to find Qlik objects in your page, whether it’s the standard Qlik Sense client or a mashup. This only works for visualizations that are either Qlik Sense standard visualizations or extensions built with the traditional Angular-based method. But in a custom built web app using Qlik you might choose to visualize the data in some other way. Qlik Sense objects used this way have previously not been available in Add Sense, you could not check their properties, monitor recalculation times etc.

With the new function to list all active objects that has changed. While the little boxes showed on the page start from the HTML DOM and Angular scopes, this function uses enigmajs and lists all objects active in the enigmajs session. It might look something like this:

Example from the demo app ‘History of the fortune 500’

It still needs to find the enigmajs session, which might not work in all cases. If you want to use the extension for a case where it does not work, please let me know, you might be able to fix that with just a very small change.

Dimensions and measures

The extension can now also list dimensions and measures.

Dimensions

You can use the copy function in the dialog to copy the contants to the clipboard and then into application of your choice, like Excel etc.

Measures

And that’s it for the new functions. Please let me know if there is anything you are missing.

Printing Qlik Sense extensions

From time to time I get questions from Qlik customers and partners with some problem regarding Qlik Sense extensions or mashups. Usually this means a few hours of troubleshooting and hopefully fixing something, fun and interesting. Could be extensions that break when Qlik Sense is upgraded, performance issues or some feature that doesn’t work.

A recurring problem is with printing extension objects. Many customers don’t care whether this works, they don’t use NPrinting or it’s not relevant for their extensions, but some do. And if they have problems, it can be a challenge to solve them if you have never done it before.

How does it work

Qlik Sense uses snapshots for printing. That means what’s printed is not what you see on your screen, but a snapshot of the data in the extension, that is then re-rendered by the rendering engine and eventually printed. There is no live connection to the Qlik Sense engine available during this re-rendering, which means that everything that needs a live connection is not available. That’s why you should always base your rendering only on the layout.

So, a first step is to verify that the extension does not do any calls that require an engine connection in the rendering part (they can be used in the property panel, and in many cases are to fill dropdown lists with content etc). This might require some refactoring to solve and so might take some time, but in most cases this is not the problem.

Waiting for the extension to be ready

A more common problem is that the printing is made before the extension is ready. This might mean that printing works sometimes, but not all of the time. It might also mean that the printout is partial, showing the extension when parts of it are rendered, but not all of it etc.

To solve this you need to return a Promise and make sure it is not resolved until your rendering is complete, something like this:

paint: function ($element, layout) {
  // do your rendering
  return new qlik.Promise(function (resolve, reject) {
    // when rendering is complete, call resolve
    resolve();
    // optionally if rendering fails, call reject 
    reject();
  });
} //end of print function

The Promise supplied by Qlik now follows the standard javascript API (though it looks like it isn’t the standard) unlike in previuos releases where it was essentially angular $p service. I’m afraid that means the code I’ve published earlier in this blog no longer works, the code above is how it should be.

Using CSS in Qlik Sense

Whether you are building extentions in Qlik Sense or including Qlik Sense objects in a mashup you very likely will need some CSS. There are even some things you can really only do with CSS. And since Qlik released Themes support there is also the possibility of adding your own stylesheets to the Qlik Sense client with or without other changes, like extensions or mashups.

But stylesheets are different. They are not like javascript, with a defined API with methods, parameters and return values. Instead they have their own logic, with CSS selectors, specificity and interdependance. When something breaks, you won’t get error messages but things will just look wrong, not be visible at all or stop working. And very little is documented.

The qv-object rule

When you build an extension you can include CSS rules. To make it possible for you to add rules that affect only your extension Qlik Sense will add a CSS class with the format ‘qv-object-[extension]’ to the HTML element your extension is rendered in. So if your extensions qext filename is xxxx.qext, it will add the CSS class ‘qv-object-xxxx’. The idea is that you should prefix all your CSS rules with qv-object-xxx, somthing like this:

.qv-object-xxx .qv-object-content {
  overflow: auto;
}

.qv-object-xxxx ul {
  list-style: none;
}

.qv-object-xxxx .important {
  color: red;
}

If you don’t do this, your styling might affect other content in the page. Sometimes that is what you want, but for normal extensions you should not do that. You might break other stuff in the page and create bugs that are hard to find.

Extension HTML structure

The structure your extension is rendered into looks like this(this is a simplified structure):

<article class="qv-object qv-object-xxx">
  <div class="qv-inner-object">
    <header class="qv-object-header">
      <h1 class="qv-object-title">
        <h2 class="qv-object-subtitle"></h2>
      </h1>
    </header>
  </div>
  <div class="qv-object-content-container">
    <div class="qv-object-content">
      Your extension renders here
    </div>
  </div>
</article>

This means that:

  • a .qv-object-xxxx rule will affect the whole box the extension is rendered in, including title
  • a .qv-object-xxxx .qv-object-content rule will affect just the extension body, not titles etc
  • a .qv-object-xxxx .qv-object-title will affect the title and possibly the subtitle
  • hoover buttons are outside of the qv-object-xxxx element and cannot be styled based on the qv-object-xxxx class

Note that this structure is as far as I know undocumented. It has been pretty stable so far, but still might change in the future. The same structure is used for both built-in and extensions, might be good to know if you are building a mashup.

Loading your CSS

To make your CSS rules work you need to load them in the browser. They should be loaded once, even if your extension is used several times in the same page/sheet. The best place to do this is at the very start of your code, at the beginning of the callback function in the define call.

There are two ways of loading the CSS. First you could add a link to the CSS file to the HTML page. An easy way to do this is with the requirejs css plugin, like this:

define( [ "css!./style.css"], function () {
/* requirejs will add a link to the document, nothing more is needed */

You could do this yourself too, but there is really no reason to do this, and you need to be careful and handle all cases, like virtual proxies and when your extension is used in a mashup not served by Qlik Sense.

The other possibility is to add the contents of your stylesheet to a style element in the document header. That requires a bit more code:

define( ['jquery', 'text!./style.css'], function ($, cssContent ) {
    $( '<style>' ).html(cssContent).appendTo( 'head' );

You can also do it without using jQuery, with standard javascript, but that means a few more lines.

The first method, adding a link to the stylesheet, has the advantage that references to external resources, like images and fonts, works, provided that you include those files in your extension too. But if you are running the extension in a mashup on an external (not Qlik Sense) server you might run into problems, since there are security restrictions on loading CSS from other servers.

That’s why I generally use the second method, adding the stylesheet text to the document. Images referenced in the stylesheet then needs to be Base64-encoded and included in the stylesheet itself. That works well for small images, if they are not too many. But if you have many images, or need to load for example font files, you should probably go for the link method.

Work status

Things have changed! In December of 2022 I finished the pretty large project which has taken up most of my time for the last two years. This means that I can now make room for other projects, even if full-tme projects are still not possible.

I also hope to have some time for this blog, and my Chrome extensions. And there are some other pretty cool stuff on the way.

Remote contracts are the easiest to find time for, and most of the work I do can be made remotely, so please get in touch if you need help with Qlik Sense mashups, extensions or integration. Stuff I can help you with:

  • development of mashups and extensions
  • lower level integration using the Qlik Engine API, possibly together with other APIs
  • extension and mashup strategy: when and how to use them, what to check for in an extension or mashup
  • maintenance of extensions
  • troubleshooting and performance problems
  • validating (and fixing) extensions and mashups with new Qlik Sense versions

Recently I have helped customers and partners with among other things:

  • make extensions work with NPrinting (pretty common problem, I’m afraid)
  • building a generic write-back solution with extension and back-end service
  • advanced extension development
  • making sure extensions work on a mashup hosted on a web server (not Qlik)
  • trobleshooting performance problems in a mashup, using my Chrome add-on Add Sense
  • moving solutions to Qlik Sense SaaS environment

Best way to reach me is through mail: erik at upper88.com