Skip to main content

Creating a visualization extension from scratch

This example describes the process of creating a new visualization extension from scratch using Dev Hub and making it available in Qlik Sense. For more background on building a visualization extension, refer to Getting started building visualization extensions.

Tip: In general, the best way to learn about how visualization extensions work is to open one up and look around at the code inside.

Do the following:

  1. Launch Dev Hub.

    See Launching Dev Hub.

  2. Create a new visualization extension.

    Click Create new, give your visualization a name, then select the template you require.

    Then click Create & edit.

    The visualization extension is launched in the Extension editor.

    Tip: If you are creating a visualization extension outside of Dev Hub, you need to create an empty folder and name it accordingly.
  3. Edit the content of the visualization extension accordingly.

    • Edit the content of the QEXT file.

    • Edit the content of the JavaScript file.

    Tip: If you are creating a visualization extension outside of Dev Hub, you can copy an existing QEXT file and JavaScript file from for example the HelloWorld example folder and rename the file. Then, edit the content accordingly. Make sure the QEXT file name and the JavaScript file name is exactly the same as the folder name.
  4. Create the property panel for the visualization extension.

    The property panel definition can either be added as a separate JavaScript file or included in the main JavaScript file. Refer to Building a properties panel for details.

  5. If you created your extension in Dev Hub, it is automatically available to add to a sheet in your app.

    If you created the visualization extension with another tool, do one of the following:

    • For Qlik Sense Desktop, copy the extension (that is, the folder and the files) to ..Users\<UserName>\Documents\Qlik\Sense\Extensions.
    • For Qlik Sense Enterprise, compress the extension (folder and the files) and import it using the QMC. See Importing extensions for details.