Skip to main content Skip to complementary content

Creating extensions on the fly to use in mashups

The registerExtension method allows you to register a visualization extension in a mashup without installing it on the Qlik Sense server. After it has been registered, it is free to use within the mashup just as if it was installed on the server. This means that you can distribute mashups, including the extensions being used, as one package.

General workflow

This is the general workflow for creating extensions on the fly in mashups.

  1. Configure requireJS.
  2. Include the Qlik Sense CSS files.
  3. Create a new extension or copy an existing extension into your mashup folder.

    You can also create a new extension inline.

  4. Load the extension and register it using the registerExtension function.

    If the extension is created in separate folder, it must be loaded with reguireJS.

Example:  

// The path to the location of the mashup 
var path = window.location.href.substr( 0, location.href.lastIndexOf( "/" ) );
require( [path + "/myextension/myextension.js"], function ( myextension ) {
	qlik.registerExtension( 'myextension', myextension );
} );

Examples

Hello world on the fly

This example creates and registers a basic hello world extension in the mashup.

//define the helloworld extension
var helloworld = {

		paint: function ($element) {
			$element.html( "Hello world!!" );
		}
		
}
//register the extension
qlik.registerExtension( 'helloworld', helloworld );
 
var app = qlik.openApp( 'Helpdesk Management.qvf', config );
//create and show an object using the extension
app.visualization.create( 'helloworld', ["Case Owner Group"] ).then( function ( helloworld ) {
    helloworld.show( "QV00" );
} );

Toolbar extension on the fly

This example registers an existing toolbar extension, that is unused in the Helpdesk Management app, in the mashup. It also defines one dimension and one measure.

The extension is loaded with requireJS and the path to the extension is defined.

var app = qlik.openApp( 'Helpdesk Management.qvf', config );
// The path to the location of the mashup
var path = window.location.href.substr( 0, location.href.lastIndexOf( "/" ) );
	require( [path + "/toolbar/com-qliktech-toolbar.js"], function ( toolbar ) {
	qlik.registerExtension( 'toolbar', toolbar );
	app.visualization.create( 'toolbar', 
		[
			"Case Owner Group", 
			"=Avg([Case Duration Time])"
		],
		{
			"title": "On the fly toolbar", 
			"buttons":{
				"clear":true,
				"back":true,
				"forward":true
			}
		} 
	).then( function ( toolbarobj ) {
		toolbarobj.show( 'QV05' );
	} );
} );

Example code output:

Example toolbar extension with action buttons and header

Button row extension on the fly

This example creates a new extension inline and registers it in the mashup. It creates a button row based on the Case Owner Group dimension in the Helpdesk Management demo app.

//define the buttonrow extension
var buttonrow = {
	//define a ListObject
	initialProperties: {
		qListObjectDef: {
			qShowAlternatives: true,
			qFrequencyMode: "V",
			qSortCriterias: {
				qSortByState: 1
			},
			qInitialDataFetch: [{
				qWidth: 2,
				qHeight: 50
			}]
		}
	},
	//render
	paint: function ( $element, layout ) {
		var str = "",
			me = this;
		if ( !me.fld ) {
			me.fld = app.field( layout.qListObject.qDimensionInfo.qGroupFieldDefs[0] );
		}
		layout.qListObject.qDataPages[0].qMatrix.forEach( function ( row ) {
			str += format( '<button type="button" class="btn btn-{0}" data-value="{1}">{2}</button>',
				getClassForState( row[0].qState ), row[0].qElemNumber, row[0].qText );
		} );
		$element.html( str ).find( '.btn' ).on( 'click', function () {
			me.fld.select( [$( this ).data( 'value' )], true, true );
		} );
	}
}
//register the extension
qlik.registerExtension( 'buttonrow', buttonrow );
 
var app = qlik.openApp( 'Helpdesk Management.qvf', config );
//create and show an object using the extension
app.visualization.create( 'buttonrow', ["Case Owner Group"] ).then( function ( topbuttonrow ) {
	topbuttonrow.show( "QV00" );
} );

Example code output:

Example button row extension

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!