Getting started building visualization extensions with Dev Hub

This topic describes how to create your first visualization extension, based on the Hello world example which is included in your Qlik Sense installation.

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.

Do the following:

  1. Open Dev Hub.

    Launching Dev Hub

  2. Click Create new and fill in the details.

    Name the visualization extension HelloWorld and use the Basic Visualization template and then click Create & edit.

    The new visualization extension is created and opened automatically, it is also visible in the items list.

  3. Click on the newly created HelloWorld visualization extension and select Edit.

    It is launched in the Extension editor.

  4. Import the preview image file.

    Note: The preview image should be saved in PNG format.

    Click Menu > Import file and browse to ..Users\<UserName>\Documents\Qlik\Examples\Extensions\HelloWorld and select the helloworld.png file. Then click Open.

    The image file is included in the project and visible on the right hand side panel.

  5. Update the QEXT file.

    	"name": "Hello World",
    	"description": "Hello World example",
      	"preview": "helloworld.png",
    	"type": "visualization",
    	"version": 1.0.0,
    	"author": ""
    Note: The preview file previously imported is defined in the "preview" field.
  6. Add your rendering code to the JavaScript file.

    define( [
    function ( ) {
    	return {
    		paint: function ($element) {
    			//add your rendering code here
    			$element.html( "Hello world!!" );
    } );
  7. Click Save.

    The visualization extension has now been saved and is available from Qlik Sense.

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?