Watermark in Qlik Sense

Most QlikView developers are familiar with adding watermarks to charts/objects. In Qlik Sense, it’s not something you can do with the out of the box options. However, this is achievable relatively simply with the use of some CSS. There are couple of ways we can do this and in this blog post, I aim to take you through those methods.

Watermarks – what & why?

A watermark is a text or a logo that is intentionally superimposed onto another image/object. This is usually achieved with transparent logo or text, so that it doesn’t interrupt the users from viewing the original object while adding additional information.

At this point, you may be wondering, “Why would anyone like to add watermarks to their Qlik Sense charts?” Well, watermarks are a great way to add brand identity to your visualisations. There are also other scenarios where this becomes a really nice feature.

Imagine you have a Qlik Sense chart that’s being consumed in public domain. Adding watermarks is a simple way to add more information to that chart, e.g., information on data sources etc to the chart. Other scenarios can be “Proof of concept (PoC)” applications or “User Acceptance Testing (UAT)” applications or “Confidential” charts you do not wish users to share. You would want your users to be informed visually that this application is in development status or UAT status or contain confidential information, also when users share charts/screenshots, that notice remains, allowing others to see the purpose of the original chart/application.

Show me how to do it already!

Now that we looked at what is a watermark and why would anyone want to use it, lets take a look at how we can add them to our Qlik Sense applications. There are couple of ways we can do this –

1. Using CSS in Qlik Sense Theme
2. Using custom CSS in Multi KPI chart from “Qlik Visualisation Bundle“

CSS in Qlik Sense Theme

This is the best approach when you want to add watermark in every charts in an application. You can create your own Qlik Sense theme or download one from Sense Theme for ease of use. A Qlik Sense theme consist of 2 core files and some optional assets.

1. A definition (QEXT) file
2. A main JSON file
3. Other optional assets (Images, Cascading Style Sheets etc)

To add watermarks to your theme, you need to add a CSS file to the theme, or just amend the existing one (if your theme already includes a CSS). Open the CSS file in any text editor and just add the following code at the bottom.

.qv-object-content-container::after {
    content: "kabonline.net"; /* Whatever you want to show in the watermarks */
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    /* Legacy and some vendor prefixes that you probably don't need... */
    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);
    opacity: .7;
}

This will add a small watermark at the bottom right corner with a background gradient to every charts in the Qlik Sense application.

This approach has some drawbacks, e.g., users may not like to see the same watermark in every charts and also this will not work for the container extension that is in the “Qlik Dashboard Bundle”. To simplify things, you can just add one watermark per sheet, that goes across the screen diagonally. Here is an example code for how that can be done.

.qvt-sheet-container::after {
    content: "kabonline.net"; /* Whatever you want to show in the watermarks */
    position: absolute;
    top: 45%;
    left: 45%;    
    opacity: .7;
    z-index: 999;
    font-size: 30px;
    font-weight: 900;
    transform: rotate(-40deg);
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    /* Legacy and some vendor prefixes that you probably don't need... */
    /* Safari */
    -webkit-transform: rotate(-40deg);
    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);
    /* Firefox */
    -moz-transform: rotate(-40deg);
    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);
    /* IE */
    -ms-transform: rotate(-40deg);
    /* Opera */
    -o-transform: rotate(-40deg);
    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

CSS in Multi KPI chart

Multi KPI chart is an extension that is part of the “Qlik Visualisation Bundle” that comes with the installation (if you chose to install the additional extension pack. I would highly recommend installing these if your organisation has not done so yet). This chart allows you to add custom CSS. We can use this extension to add watermark to the sheet or every charts where this extension is being used. You can simply copy and paste the above examples and that will work. Remember, the scope of this chart is confined only with in the sheet this chart belongs to, the watermark will not show in other sheets using this method. This is a nice way to show message on a PoC or UAT sheet in an existing application. User then will have better experience, as they will be able to tell at one glace that this is a test/dev version of a sheet.

Wait! there’s more..

When it comes to custom CSS, there’s plenty more we can do. The examples only shows one of many ways we can achieve this. If you noticed, the watermarks we are adding, it is being drawn on the top of the objects/charts, which means, sometimes we can’t click on object right under the watermark text. You can always try targeting “qv-object-content” class in CSS and use ::before to draw the watermark, which will put the watermarks behind the charts. Here’s an example of that code –

.qv-object-content::before {
    content: "Data on the rocks";
    position: absolute;
    bottom: 10px;
    left: 10px;    
    opacity: .7;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    /* Legacy and some vendor prefixes that you probably don't need... */
    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);  
}

Another trick you can do with CSS and the second approach (Multi KPI chart) that we looked at. You can ultimately use the extension to just impact the sheets in the app without displaying the KPI object to the users. You can do this by just simply adding the following to your CSS.

.qv-object-qlik-multi-kpi {
    visibility: hidden;
}

Make sure you resize the object just to a single grid. This will still allow you to click on the KPI chart in edit mode, but will only show a blank grid to the users while the custom CSS still be applied to the sheet.

That is all for now…

This is all the time I have today. I hope this springs up some new ideas and use cases, also helps anyone who is looking for a solution to add watermarks to their Qlik Sense project. If you have alternative ways to add watermarks, please feel free to share those, as I am sure others will benefit from your knowledge. Thanks for reading.