File formats

When you are creating a visualization extension using Extension editor, the following file types are saved to the project folder:

• JavaScript
• QEXT
• WBL

JavaScript files

All visualization extensions must contain at least one JavaScript file and one QEXT file.

The core of all visualization extensions are made up by the corresponding JavaScript file. The JavaScript file is loaded in the browser when your visualization extension is used. RequireJS is used as a module loader.

For a minimal implementation, refer to the Hello world code example.

Example: com-qliktech-helloworld.js

define( [
],
function ( ) {

	return {
		paint: function ($element) {
			$element.html( "Hello world!!" );
		}
	};

} );

QEXT files

The extension metadata file (QEXT) is a JSON file, and is used by Qlik Sense to identify the visualization extension. It contains the metadata used for the library or assets panel. When deployed to Qlik Sense, the visualization extension is displayed in the Charts section of the assets panel or library panel.

JSON validator: JSONLint

Example: Basic QEXT file

{
	"name" : "Hello World",
	"description" : "Hello World example",
	"icon" : "extension",
	"preview": "helloworld.png",
	"type" : "visualization"
}

Legend:

• A: name definition.
• B: preview definition.
• C: description definition.
• D: icon definition.

Structure

The following properties can be defined in the QEXT file.

name

The name property is mandatory.

This is the name of the visualization extension and is displayed in the library as well as in the preview.

type

The type property is mandatory.

This defines the type of extension. It should always be visualization for visualization extensions.

description

This defines the description visible in the preview of the visualization extension.

icon

Default is extension.

This defines the icon displayed in the library. It can be:

Library icons

Syntax	Icon
"bar-chart-vertical"
"extension"
"filterpane"
"gauge-chart"
"line-chart"
"list"
"map"
"pie-chart"
"scatter-chart"
"table"
"text-image"
"treemap"

preview

This defines which preview image is to be used. The preview image is displayed in a pop-up when you select the visualization extension in the library.

You can define a custom preview image file. For an example of how this is defined, see the HelloWorld code example.

Syntax:  

"icon": "<CustomImage>.png"

version

This defines your individual version handling of the visualization extension. This setting is manually defined. Semantic versioning is recommended.

author

This defines the author of the visualization extension. This setting is manually defined.

WBL files

The Workbench load file (WBL) is used by the Extension editor and lists the name of all files included in the visualization extension project. When you save a visualization extension from the Extension editor, a WBL file is automatically included in the project.

Example: WBL file content