To begin with, let us discuss a recipe to create a simple HTML extension in Qlik Sense. The two files that are mandatory to create any Qlik Sense extension are:
In addition to the preceding mandatory files, one can also make use of additional files, such as:
The default directory for Qlik Sense Desktop extensions is C:Users[UserName]DocumentsQlikSenseExtensions
.
In this example we will print the words "Hello World" on the screen using our first Qlik Sense extension. This is a common first task used when we learn various programming languages. The idea is to keep the code as simple as possible while providing information on the structure of the code and anatomy of the extension environment.
This recipe is built entirely from the How to do it... section and does not require data to be loaded first. We use notepad to write the code in the following examples. A suggested alternative is Notepad++, which the user can download separately. Notepad++ is a free tool that improves the readability of the code by highlighting methods, functions, and so on.
Taking into consideration the two mandatory files, let's start creating a simple extension using HTML:
QlikSense Cookbook – Hello World
to store the .JS
and .QEXT
files.C:Users[UserName]DocumentsQlikSenseExtensions
.QlikSense Cookbook – Hello World
folder, create a new notepad document and add the following code:{ "name" : " QlikSense Cookbook - Hello World", "description" : "QlikSense Cookbook - Chapter 7, Recipe 1: Hello World.", "icon" : "extension", "type" : "visualization", "version": "1", "preview" : "bar", "author": "Your Name" }
QlikSense-Cookbook-C7-R1-HelloWorld.qext
.define( [ 'jquery' ], function ( $ ) { 'use strict'; return { paint:function ( $element, layout ) { $element.empty(); var $helloWorld = $( document.createElement( 'div' ) ); $helloWorld.html('Hello World from the extension "QlikSense Cookbook - HelloWorld"<br/>'); $element.append( $helloWorld); } }; } );
QlikSense-Cookbook-C7-R1-HelloWorld.js
.QlikSenseCookBook_Extensions
.LOAD 1 as Dummy AUTOGENERATE(1);
Qlik Sense Extension
.The QlikSense-Cookbook-C7-R1-HelloWorld.js
contains the JavaScript to build what the extension will actually do. It is formed of two main parts Define and Paint:
$element
and layout
:$element
contains the HTML contentlayout
contains the data and properties of the extensionThe QlikSense-Cookbook-C7-R1-HelloWorld.qext
file contains the metadata about the extension, such as the name, description, icon, type, version, and author. Out of these, the name
and type
properties are mandatory.
The basic structure of a .qext
file is shown in the following code:
{ "name" : "QlikSense Cookbook - Hello World", "description" : " QlikSense Cookbook, Simple Hello World.", "preview" : "bar", "icon" : "extension", "type" : "visualization", "version": "1", "author": "Your Name" }
The first four lines control what is displayed in the following image:
The type should always be "visualization". The default value for an icon is "extension" but it can be changed to a predefined list of icon names, such as the "Line chart", "Bar chart", and so on. This specifies the icon displayed in the Assets panel besides the extension object:
One can also define a preview image for the extension object under the preview
property in the .qext
file. For example "Preview": QSExtension.png
. The .PNG
file must be stored in the same folder as the extension.
If we don't define the preview image, then the Icon definition will supersede.
The extension discussed in the preceding recipe displays static text Hello World from the extension of "QlikSense Cookbook - HelloWorld". However, we can make it dynamic by making some simple additions to the code, as discussed in the following steps:
QlikSense-Cookbook-C7-R1-HelloWorld.js
file.Define
add another object called definition
which describes the basic design of the property panel for the extension object:definition: { type: "items", component: "accordion", items: { appearancePanel: { uses: "settings", items: { QSPropertyPanel: { ref: "QSDynamicExtension", type: "string", label: "QlikSense extension Text" } } } } },
console.log(layout);
statement at the start of the paint block.'$helloWorld .html(layout. QSDynamicExtension);'
QlikSense-Cookbook-C7-R1-HelloWorld.js
file should look like the following code:define( [ 'jquery' ], function ( $ ) { 'use strict'; return { definition: { type: "items", component: "accordion", items: { appearancePanel: { uses: "settings", items: { QSPropertyPanel: { ref: "QSDynamicExtension", type: "string", label: "QlikSense extension Text" } } } } }, paint: function ( $element, layout ) { console.log(layout); $element.empty(); var $helloWorld = $(document.createElement('div')); $helloWorld.html(layout.QSDynamicExtension); $element.append($helloWorld); } }; } );
Creating a Qlik Sense® visualization using Qlik Dev Hub in Chapter 7, Extensions in Qlik Sense®.