Theming the Qlik Sense Script Editor

Summary: In this post I show how to modify the style of the QS Script Editor window.

An astute reader — Johan Roelofsen — of my blog on bookmarklets noticed I had a bookmarklet named “QS Blackboard” and asked if this was used to change the window background color.  Excellent guess, spot on, but there’s more to it.

Changing only the background color can yield a poor result because the text begins to blend into the background.  I’ll want to change the text colors and possibly size as well to yield something like this:

Fortunately QS uses the CodeMirror (CM) editor which provides a theming capability.  Theming the CodeMirror window is done by loading a style sheet and then making an API call to use that style.

The instructions that follow will show how to implement your own custom theme in QS Desktop (I assume it will work in Enterprise as well, just haven’t tried it).

Note that we will not be modifying any of the installed Qlik software files!

  1. In the folder :
    C:\Users\userid\AppData\Local\Programs\Qlik\Sense\Client

    Create a new subfolder (below Client) named “cmtheme”.  This is the folder that will contain your CM style sheets.

  2. Download or build a theme-name.css file in the cmtheme directory.  You can try out various existing themes on this demo page here and download the corresponding css file from the CM repo here.

“Projector1” available here is a theme I’ve built for projecting. If you read the doc or look at the examples, you’ll see the pattern whereby you must define .cm-s-themename selectors in your CSS.

If you start with one of the CM themes, you’ll want to add selectors for QS script specific elements like function, table and field.

.cm-s-projector1   .cm-function {color: #c678dd;}
.cm-s-projector1   .cm-table {color: #d19a66;}
.cm-s-projector1   .cm-field {color: #d19a66;}

All that’s remaining is to  invoke your theme while in the editor.  I use this bookmarklet that first loads the css file and then calls SetOption on the CodeMirror editor instance:

javascript: (function () { 
 var theme = "Projector1";
 $('head').append('<link rel="stylesheet"  href="../resources/cmtheme/' + theme + '.css" type="text/css"/>');
 $('.CodeMirror')[0].CodeMirror.setOption("theme", theme);
 }());

It’s the same bookmarklet code for any theme, I just change the hard-coded theme variable.

To “unapply” your theme and return to QS native, just press F5 to refresh the browser.

Have fun.  And remember when you tinker with something like this the best approach is to not update the vendor (Qlik) software files and instead seek a non-intrusive approach.

-Rob

Hey Rob, I’m a Qlik Dev. This CSS + Javascript stuff looks like a foreign language to me.  How I can upskill to be able to leverage the Qlik Sense APIs including creating Mashups and Extensions?

Easy answer.  Take the  “Web Dev for Qlik Devs” course from Websy.  You can self-study online through the Websy Academy,  take an on-line instructor led course or have one of the Websy team — including Rob — deliver a course at your site to your entire team. 

 

 

Share

10 thoughts on “Theming the Qlik Sense Script Editor”

  1. Thanks Rob!
    This works perfectly! I especially like that you managed to do it without altering files.

    Johan

  2. Amazing! Been looking for something to ease the eyes while coding for hours on that white script editor screen. Thanks

  3. Hi Rob, this is brilliant, thanks so much.

    Can you clarify what you mean the following part?

    “If you start with one of the CM themes, you’ll want to add selectors for QS script specific elements like function, table and field.”

    Also, what theme are you using in the screenshot? It looks lovey!

    1. Hi Carl,
      The theme I’m using in the screenshot is the “Projector1” theme I built and provided a download link for in the post.

      Words in the script get identified as to element type — comment, keyword, variable, etc. The assignment is made as a CSS class. Different colors are assigned to each CSS class, hence the colorizing. Text elements / classes that are Qlik specific such as fieldnames or tablenames will not be part of the CM themes, hence you’ll want to add them as shown in the code snippet. “Selectors” are the syntax for referencing a class with a CSS stylesheet.

      For more on CSS classes I recommend https://www.w3schools.com/css/default.asp or our websy class.

  4. Hi Rob!

    Is it possible to add a few more screenshots how to make this work (or do you have any video recorded)?

    I have downloaded your css file and put it in the new folder. Whats the next step? I got little confused at the end.

  5. Hi Rob. I got this working at first, but now, all my bookmarklet does is to remove all colored/highlighted text in the editor. Have you experienced anything similar? (Using Enterprise, June 2018 edition).

  6. Hi Ulrik,
    Open your browser Dev Tool (F12) and check the console for errors. Also check the Network tab to be sure your css file is loading.

    1. Thanks for the reply and helpful tips, Rob. All was good in the console, and I could not really figure out what was going on, but I created a new bookmarklet and pasted your script example and suddenly got things working again. Problem in chair – not in computer.

Leave a Reply

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