Getting started building visualization extensions

Tip: The easiest way to get started building your visualization extension is to use Qlik Sense Desktop. This section assumes that Qlik Sense Desktop is being used.

Note: Extensions are not supported for apps published to Qlik Cloud Services. Visualizations using extensions cannot be opened in Qlik Cloud Services. The app consumer will receive a message indicating that the visualization was not found.

Creating the container

Create a folder that will contain your assets. The folder should be created in the following location: C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\.

Example:

C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\SimpleHelloWorld

Creating the QEXT file

The next step is to create a QEXT file in the folder we just created and name it exttut-01-helloworld.qext.

Creating the main script file

Then it is time to create the main script file. This is also placed in the same folder as the QEXT file and we name it exttut-01-helloworld.js. Paste the following code into the script file and then save it:

Testing the visualization extension

Go to Edit mode. The visualization extension should be visible in the library.

Drag and drop the visualization extension onto the sheet and exit Edit mode.

You should see something like the following:

Fine tuning the visualization extension

If you resize the visualization extension or the browser window you will realize that some thing is wrong since the output gets multiplied.

This happens because the paint method is called every time the visualization extension is rendered and therefore resizing the visualization extension triggers the paint method. This means that a new $helloWorld object is appended to $element on every resize.

There are several ways of solving this and we will introduce two of these below.

Remove existing content

You can remove all child nodes of $element at the beginning of the paint method, using the jQuery empty() method. Add the following line at the beginning of paint.

$element.empty();

Detect if your new node already exist

Use the layout object to get the unique id of the current object to prevent conflicts if you are using the same object several times on a sheet. You can detect if your new node already exists by adding the following code: