Creating an HTML visualization extension for Qlik Sense®

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:

  • .JS file: This file contains the JavaScript required to implement the extension and is built around the RequireJS framework
  • .QEXT file: This is an extension metadata file, which contains the JSON description to be used within the desktop client

In addition to the preceding mandatory files, one can also make use of additional files, such as:

  • Script files from external libraries such as D3 or Raphael
  • CSS files: To add styles to the extensions
  • Images, Fonts, Icons, and so on

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.

Note

A little slice of history: Using the "Hello, World" example dates back as far 1974. The first known version in computer literature was taken from a 1974 Bell Laboratories internal memorandum on programming in C.

Getting ready

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:

  1. Create a folder called as QlikSense Cookbook – Hello World to store the .JS and .QEXT files.
  2. The folder should be created under C:Users[UserName]DocumentsQlikSenseExtensions.

How to do it…

  1. In the 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"
}
  2. Click on Save As in the notepad document and change the Save as type to All Files (*.*).
  3. Call the file name QlikSense-Cookbook-C7-R1-HelloWorld.qext.
  4. Create another blank notepad file in the same location and add the following code:
    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);
            }
        };
    } );
  5. Click on Save As in the notepad document and change the Save as type to All Files (*.*). Call the file named QlikSense-Cookbook-C7-R1-HelloWorld.js.
  6. Create a new application in Qlik Sense Desktop and name it QlikSenseCookBook_Extensions.
  7. Open the data load editor and load the following code:
    LOAD 1 as Dummy AUTOGENERATE(1);
  8. Once the script is successfully run, open the App overview from the Navigation dropdown at the top. Create a new sheet and go to the Edit mode.
  9. In the visualization area, we will be able to see the extension alongside the normal default visualizations with the name QlikSense Cookbook-Hello world.
  10. Drag across the object onto the sheet.
  11. Add the Title as Qlik Sense Extension.
  12. The resultant object on the screen should look similar to the following:
    How to do it…

How it works…

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:

  • Define: This is used to define the dependencies in the JavaScript file. It follows the concept specified in the RequireJS framework. In our recipe we have not loaded any external dependency. However, if the need arises, this can be loaded prior to the execution of the main script.
  • Paint: This is the main part of the script which basically renders the visualization. It is formed of two parts $element and layout:
    • $element contains the HTML content
    • layout contains the data and properties of the extension

The 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:

How it works…

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:

  • version: Specifies the version of the extension
  • author: Specifies the author of the extension

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.

There's more…

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:

  1. Open the QlikSense-Cookbook-C7-R1-HelloWorld.js file.
  2. Inside 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"
                }
            }
        }
    }
},
  3. In order to render what we enter in the text box defined in step 1, we need to enter the console.log(layout); statement at the start of the paint block.
  4. Finally, to make the result dynamic, modify the output statement to:
    '$helloWorld  .html(layout. QSDynamicExtension);'
  5. The final code in the 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);
            }
        };
    } 
);
  6. Refresh your Qlik Sense document by pressing F5 before implementing the new dynamic extension.
  7. The Properties panel of the resultant extension object will look like the following image:
    There's more…
  8. Put any desired text in the QlikSense extension Text box and check results.

See also

Creating a Qlik Sense® visualization using Qlik Dev Hub in Chapter 7, Extensions in Qlik Sense®.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset