Skip to main content

Selection models

You can choose between three options for selections in a visualization extension:

  • No selections
  • Standard Qlik Sense selection model with toolbar and wrapper around the object supported by methods in the Extension API.
  • Quick selection, where selections are sent straight to the Qlik associative engine and immediately are reflected in the object supported by methods in the Backend API.

The selection model is defined in the initialProperties section in the JavaScript file. You use selectionMode : "CONFIRM" for standard Qlik Sense selection model and you use selectionMode : "QUICK" for quick selection mode.

Example: Defining standard Qlik Sense selection model

	return {
		initialProperties : {
			version: 1.0,
			qListObjectDef : {
				qShowAlternatives : true,
				qFrequencyMode : "V",
				qInitialDataFetch : [{
					qWidth : 2,
					qHeight : 50
				}]
			},
			fixed : true,
			width : 25,
			percent : true,
			selectionMode : "CONFIRM"
		},

Example: Defining quick selection model

	return {
		initialProperties : {
			version: 1.0,
			qListObjectDef : {
				qShowAlternatives : true,
				qFrequencyMode : "V",
				qInitialDataFetch : [{
					qWidth : 2,
					qHeight : 50
				}]
			},
			fixed : true,
			width : 25,
			percent : true,
			selectionMode : "QUICK"
		},

 

You then enable the selection model in the JavaScript.

Example: Defining standard Qlik Sense selection model

	if(this.selectionsEnabled && layout.selectionMode !== "NO") {
		$element.find('li').on('click', function() {
			if(this.hasAttribute("data-value")) {
				var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
				if(layout.selectionMode === "CONFIRM") {
					self.selectValues(dim, [value], true);
					$(this).toggleClass("selected");
				} else {
					self.backendApi.selectValues(dim, [value], true);
				}
			}
		});
	}

Example: Defining quick selection model

	if(this.selectionsEnabled && layout.selectionMode !== "NO") {
		$element.find('li').on('click', function() {
			if(this.hasAttribute("data-value")) {
				var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
				if(layout.selectionMode === "QUICK") {
					self.backendApi.selectValues(dim, [value], true);				
					$(this).toggleClass("selected");
				} else {
					self.selectValues(dim, [value], true);				
				}
			}
		});
	}