Any colour, as long as it’s green

By Barry Harmsen

Any colour, as long as it's green. Henry Ford would approve.Today I read the blog post “Green Is The Colour” by Henric Cronström on QlikTech’s Business Discovery Blog. In this post, Henric points to the fact that, while green may be QlikView’s signature colour, it is the unassociated, gray values that are a crucial part of the discovery process.

While I completely agree with Henric that the colour coding is integral to the QlikView experience, his post did leave me wondering. Does it always have to be green?

The answer: No, not always. At least, not when you are running your applications in the AJAX or web view clients on QlikView 11 that is.

Inspired by Henric’s post I decided to create a small document extension that let’s you change the selection colour to whatever colour you like! The video below shows a blue colour scheme applied to the Movies Database application. You can easily change these colours by modifying the NoGreen.CSS file in the extension directory.

Of course, this document extension is just a fun little hack that is provided free but also completely as-is. If you have any improvements or comments though, then I’d like to hear from you.

Download NoGreen.qar

Update 2012/11/14: I’ve made some improvements to the NoGreen extension based on suggestions by Michael Griffiths, thanks Michael!

About The Author

Barry Harmsen

Hi there, I'm Barry and I'm a Business Intelligence Consultant at Bitmetric and based in the Netherlands. Originally from a background of 'traditional' Data Warehousing, Business Intelligence and Performance Management, for the past few years I have been specializing in QlikView and a more user-centric form of BI. I have done numerous QlikView implementations in many different roles and industries. In 2012 I co-authored the book QlikView 11 for Developers. You can follow me on Twitter at @meneerharmsen.

43 Comments

  • 1
    May 21, 2012 - 10:44 | Permalink

    Excellent Barry. Thanks for sharing. Although I can’t download the .qar file.

    Cheers,
    DV
    http://www.QlikShare.com

    • 2
      May 21, 2012 - 16:56 | Permalink

      That’s strange, the link seems fine here. If you send me an email through the contact form I will email the .qar to you.

  • 3
    June 16, 2012 - 13:04 | Permalink

    Hi Barry,

    Nice article. I’m quiet interested in qlikview extensions (I have a .net background, you know;). Do you know where I can find more information about that subject? Documentation is hard to find! I ran into a Qlikview-video last week, but that was just a short introduction. Thanks in advance!

    Regards Frank

  • 4
    Gustav
    June 20, 2012 - 10:52 | Permalink

    Nice extension, how do you know the path to the image for the led image, is there any documentation? I

  • 6
    qlik_techie
    July 18, 2012 - 13:51 | Permalink

    hI,

    HOW DO I USE THIS EXTENSION IN MY APPLICATION.
    where shud i change the color in the css file ?

  • 8
    Michael Griffiths
    October 23, 2012 - 13:52 | Permalink

    Hi Barry,

    This extension is really useful, thanks! One modification that I found helpful is to change the following line in Script.js:

    $(‘img.Qv_LED’).attr(“src”,”/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&host=Local&slot=&public=only&color=%23A0BEFF” );

    To something like the following:

    $(‘img.Qv_LED’).attr(“src”, function() {
    return this.src.replace(“%23808080”, “%23D4D4D4”).replace(“%23ffffff”, “%23FFFFFF”).replace(“%2300ff00”, “%23A0BEFF”);
    });

    This way,

    1. It works on server by keeping the host parameter as what it was previously rather than replacing it with Local.
    2. It allows you to have different colours for selected/excluded/associated values.

    One other good addition is to replace the colour of the indicator LED that appears in the tabrow on older versions of IE (8 and older):

    $(‘li.selectedtab’).find(“img”).attr(“src”, function() {
    return this.src.replace(“%2300ff00”, “%23A0BEFF”);
    });

    Thanks again,

    Michael

  • 9
    Michael Griffiths
    October 23, 2012 - 14:20 | Permalink

    Also, in the CSS, you may want to use the !important tag after the background-image and color properties, otherwise the AJAX client seems to like to override them 🙂 (on QV11 SR1 at least):

    /* Selected LED */
    .QvSelected_Led_363636 {
    background-image: url(“/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&slot=&public=only&color=%23A0BEFF”) !important;
    background-position: 3px center;
    background-repeat: no-repeat;
    color: #000000 !important;
    }

    Many thanks,

    Michael

    • 10
      October 23, 2012 - 14:32 | Permalink

      Hi Michael,

      Many thanks for these improvements, I will add them to the document extension.

      Kind regards,
      Barry

  • 11
    BAMaustin
    October 24, 2012 - 17:48 | Permalink

    Looks nice Barry.

    I’d like to try out your noGreen.qar extension but I suspect we’ve blocked dropbox. Could you eMail it to me?

    Thanks
    Brian

    • 12
      October 25, 2012 - 00:32 | Permalink

      Hi Brian,

      I’ve been hearing that lots of places block Dropbox nowadays, so I will be moving my content to another provider in the near future. For now, I will email you the file.

      Kind regards,
      Barry

  • 13
    Florian
    December 23, 2012 - 17:48 | Permalink

    Hi Barry,

    this is an amazing extension. I was just wondering why you can’t simply modify the CSS file(s) that come with the QV installation directly?

    best regards and happy holidays
    Florian

    • 14
      December 23, 2012 - 22:32 | Permalink

      Hi Florian,

      For a technically savvy person, there’s no reason to not directly modify the CSS (other than having to do a few extra checks around upgrades). This extension is aimed more at people who do not feel comfortable making direct changes to their QlikView environment.

      Happy holidays!

      Kind regards,
      Barry

  • 15
    Emil
    January 22, 2013 - 06:27 | Permalink

    Hi Barry,
    Nice extension. Works well!
    Unfortunately I have an issue with the green led on multi-boxes. It seems that the extension does not change this specific led. Any ideas?
    Thanks!
    Kind regards
    Emil

  • 16
    Hari
    May 22, 2013 - 15:35 | Permalink

    Hi Barry, I tried using your extension. It works well for blue. I wish to change to brown colour. I was trying to use 9B0000ff instead of blue color value. Finding issues with that, can you pls help me in understanding in changing the color of green to brown.

  • 17
    Oliver
    June 6, 2013 - 11:01 | Permalink

    Hi Barry,

    vielen Dank für diese Erweiterung! Ein Jammer, dass QlikTech das nicht hinter einem Edit-Button im Allgemein-Tab anbietet.

    Gruß Oliver

  • 18
    sidharth malhotra
    August 27, 2013 - 07:48 | Permalink

    Looks like this doesn’t work on chrome and Firefox.
    Do you have a fix for this.

    • 19
      August 28, 2013 - 09:37 | Permalink

      That’s strange, I developed it in Firefox and tested in Chrome and IE. Worked fine then. Did you correctly install it on the server?

  • 20
    Piyush Goel
    September 26, 2013 - 16:04 | Permalink

    THanks Barry, this is helpful post. Very well written!

  • 21
    Siddharth malhotra
    September 26, 2013 - 20:54 | Permalink

    Hey barry , sorry for the late reply.. So it was not working for checkboxes on chrome and firefox. Smhow the urls mentioned in css file use ‘local’ server in its link.. Therefore when our project was being moving to prod. Server changed .. We had to update the links to make the check box work.. Smhow the ‘local’ server urls for checkbos didnt work.. Its working for me now ..
    Can we figure out a way so that it works on servers and local machines without modifing the css file

  • 22
    Sean
    December 12, 2013 - 22:33 | Permalink

    Hi Barry,

    Is it possible to implement something like this for a specific object only?

    Thanks,
    Sean

  • 23
    Beatriz
    January 8, 2014 - 15:51 | Permalink

    Hello Barry,

    Is it possible for you to email it for me? It is also not working here. Thank’s a lot.

  • 24
    sneha
    January 15, 2014 - 08:28 | Permalink

    i not getting this extension object….
    Anybody having same problem….?

  • 25
    Jude
    January 30, 2014 - 15:48 | Permalink

    Does anyone else have the issue where the NoGreen extension appears in the client desktop but not on the server when published to the Access Point?

    I have Windows Server 2008 R2 and have placed the unpacked .qar file into

    •C:\ProgramData\QlikTech\QlikViewServer\Extensions\Objects
    •C:\ProgramData\QlikTech\QlikViewServer\Extensions\Document

    Extension not appearing when editing the document. I can Add-In using the Document Properties/Extensions way

    Thanks in advance

    • 26
      A. Aragão
      August 29, 2014 - 10:31 | Permalink

      Hi Jude,

      I have the same issue. NoGreen document extension works in the client desktop but not on the server when accessing via Access Point. In QMC I have enabled “allow extensions” option and have been able to use other object extensions in the past.

      Were you able to resolve this?

      Thanks in advance

  • 27
    Boone
    May 6, 2014 - 22:12 | Permalink

    Hey I was trying to download the file and it was not letting me. I was wondering if you could send me the file via Email

  • 28
    Telmo Duarte
    September 10, 2014 - 11:56 | Permalink

    Hi Barry et all,

    Is it just me or the LED colour override doesn’t work. There seems to be some sort of conflict because mine are coming out white.

    Any ideas?

    Thanks,
    Telmo

  • 29
    Ryan
    October 22, 2014 - 19:50 | Permalink

    I’m seeing the same issue as well with LEDs. It seems to stem from a requirement that there be a 16-digit key set for “xrfkey=” which the server seems to be settling for the other .Qv LED styles. I’m not sure how to set this within the extension such that the server will allow for this CSS adjustment.

    Not quite perfectly topical, but here’s more information: https://help.qlik.com/sense/en-us/developer/Subsystems/Qlik_Sense_Repository_Service_API/Content/QRS%20API/Repository_REST_API_Connecting_API_Using_xrfkey_Headers.htm

  • 30
    Wes Williams
    January 29, 2015 - 19:01 | Permalink

    Barry, thanks for this tip, it has been useful. For those stuck on the list boxes, the CSS code snippet below works in QlikView 11.2 SR10:


    /* Selected LED */
    .QvSelected_Led_363636 {
    background-image: url("/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&slot=&public=only&state=1&color=%230099ff") !important;
    }

    /* Selected LED checkbox */
    .QvSelected_LED_CHECK_363636 {
    background-image: url("/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&slot=&public=only&state=1&check=true&color=%230099ff") !important;
    }

  • 31
    Wes Williams
    January 29, 2015 - 20:26 | Permalink

    The LED color did not work for me either, but the following snippet of updated CSS will work with QlikView 11.2 SR10 just fine:

    /* Selected LED */
    .QvSelected_Led_363636 {
    background-image: url(“/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&slot=&public=only&state=1&color=%230099ff”) !important;
    }

    /* Selected LED checkbox */
    .QvSelected_LED_CHECK_363636 {
    background-image: url(“/QvAjaxZfc/QvsViewClient.aspx?datamode=binary&name=LED&slot=&public=only&state=1&check=true&color=%230099ff”) !important;
    }

  • 32
    Ryan
    January 30, 2015 - 18:27 | Permalink

    Wes,

    Thanks for this. I’ve already tested this on my local machine and it’s changing the style just how I want it to. The next step is to put it on the server, and I’ll let you know if it works there, too.

  • 33
    Ryan
    February 2, 2015 - 23:01 | Permalink

    Just tested it on our Server, and it works perfectly. THANK YOU!

  • 34
    Anat
    February 22, 2015 - 14:18 | Permalink

    Hi Barry
    I really like this extension!
    My only problem is with the Current Selections object which displays green selection icon while the page is refreshed.. this happens with every selection and when moving between sheets.
    Any suggestions?
    Thanks!

  • 35
    Guilherme Radiske
    March 26, 2015 - 20:11 | Permalink

    Any one knows if there’s a way to set the color based on the active sheet?

  • 36
    Bartek
    August 11, 2015 - 11:05 | Permalink

    Hi Barry,

    The download link doesn’t work? Can you send it to me via an e-mail like you did’it for DV and BAMaustin?

    Regards

    Bartek

  • 37
    Vaibhav
    April 22, 2016 - 14:18 | Permalink

    Really helpful, Thanks Barry!
    (y)

  • 38
    Punit
    August 2, 2016 - 11:05 | Permalink

    Hi,
    is this extension compatible with QlikView 12 (any service release) ?

    Thanks
    Punit

  • 39
    ACaillet
    February 20, 2017 - 16:23 | Permalink

    Hi Barry,

    It works perfectly, and it allowed me to fully brand my document, which is really nice !

    I use alternative values on a few occasions, so i’ve added :

    /* Alternative values */
    .QvAlternative {
    background-color: #b2e0ff !important;
    color: #666666 !important;
    }

    And it works fine too.

    Many thanks

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    Read previous post:
    So, you’re going to Miami?

    Today the Qlik Fix! goes travel blogging. From April 22 to 25, QlikTech's annual Global Partner Summit Qonnections will take...

    Close