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. 

I just released the V1.3 update to Qlik Sense Document Analyzer.  Two significant features in this release:

• The ability to analyze applications on the Enterprise Server.  You still install and execute QS Document analyzer on the Desktop,  but you don’t need to move the application to the Desktop.
• The option to specify a Bookmark that should be applied before calculating objects.  This is particularly useful when an object has a calculation condition.

Another interesting update is that we are now validating all expressions and will flag any expression that has a syntax error.

You can download the latest version from the tools section of this site.

Thanks to Axis Group for their input on this release.  I’m looking forward to an ongoing collaboration.

You can report any issues with QS Document Analyzer in the issue tracker here.

One of the benefits of attending the Masters Summit for Qlik is networking and the things you can learn from discussions with peers.

At the Boston Summit, I was fortunate to meet Erik Wetterberg, formerly of Qlik R&D and known to me as the author of the qsVariable and DevTool extensions.  I’ve been a fan of the DevTool extension for some time and had a nice chat with Erik about potential enhancements to DevTool.   Since the summit Erik has made some updates and accepted new function I’ve added to the tool.

DevTool provides some functions that are useful during Qlik Sense app development and debugging.  Download the DevTool zip from the dist folder here https://github.com/erikwett/DevTool and install as you would any other extension.

Add  the extension to any sheet and it will create an Action Button (AB) to the lower right corner of the sheet.

You don’t have to leave the extension in the app, the AB will remain until you close the app.  I usually don’t leave it in the app, I just add it and then remove by double clicking DevTool in the assets panel and follow that with a Ctrl-z undo.

You can leave it in the app if you wish.  There are some considerations discussed below for leaving it in a published app.

Clicking the AB will toggle a tooltip above each sheet object that initially displays the objectid.  The objectid is useful when building mashups or reviewing diagnostic data.   As selections are made and the objects are recalculated, the tooltip will add a line showing the time in milliseconds for the current calculation as well as the max calculation time for this object.

Click the “properties” button on the tooltip and this object’s json formatted properties will display in a popup.  Use the copy-to-clipboard button to copy all or selected property lines to the clipboard.

Right-Click the AB to open a context menu that provides for:

• Exporting script to a text file.
• Importing (replacing) script from a text file.
• Exporting variables in script or json format.

The extension works equally well in desktop or server.  Some things to think about before including it in a published app.

• Users normally can’t see the load script and variables in a published app, but they can with this extension.
• Although the script import works without error in a published app, the change to script is not saved so effectively nothing has been updated.

For myself, I’ve been thinking of this as a tool to use during development only and have not been including it in published apps.  I’d be curious to hear if someone has made a different decision.

The extension buttons use a google font. I note that many servers are blocked from the internet. If this is your case, you will see red dots for the buttons instead of proper symbols.  The buttons are still fully functional.

Maybe I’ll see you at the Masters Summit in Prague  where you might find your own interesting collaboration.

-Rob