Extensions

v1.1.1

The Extension API consists of methods and properties used to create custom visualization extensions.

qext

interface

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.

Properties

name
string

This is the name of the visualization extension and is displayed in the library as well as in the preview. It is recommended to use a unique name for the visualization to avoid interference with other visualizations that may have the same name.

type
'visualization'

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

description
string

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

icon
default='extension'
'bar-chart-vertical' | 'extension' | 'filterpane' | 'gauge-chart' | 'line-chart' | 'list' | 'map' | 'pie-chart' | 'scatter-chart' | 'table' | 'text-image' | 'treemap'

This defines the icon displayed in the library.

preview
string

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.

version
string

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

author
string

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

```json
{
  "name": "Hello World",
  "description": "Hello world example",
  "preview": "helloworld.png",
  "type": "visualization",
  "version": 1,
  "author": "Qlik International"
}
```

define(dependencies, cb)

function

The extension as an AMD module.

Parameters

dependencies
Array<string>

No description

cb

No description

new BackendAPI()

class

Helper functions for Engine calls and access to Engine data. Available for extensions as this.backendApi.

BackendAPIabortSearch()

function

Aborts the result of a search in a list object. Clears the existing search and returns the object to the state it was prior to the start of the search.

Returns

A promise of a Qlik engine response.

this.backendApi.abortSearch();

BackendAPIacceptSearch(toggleMode)

function

Accepts the result of a search in a list object and the search result is selected in the field.

Parameters

toggleMode
boolean

If true, toggle state for selected values.

Returns

A promise of a Qlik engine response.

this.backendApi.acceptSearch(false);

BackendAPIapplyPatches(qPatches, qSoftPatch)

function

Updates the properties for this object.

Parameters

qPatches
Array<QAE.NxPatch>

Array of patches to apply.

qSoftPatch
boolean

Set to true if properties should be soft, that is not persisted.

Returns

A promise of a Qlik engine reply.

this.backendApi.applyPatches([
  {
    "qPath": "/qListObjectDef/qDef/qSortCriterias/0/qSortByLoadOrder",
    "qOp": "replace",
    "qValue": "-1"
  },
  {
    "qPath": "/meta",
    "qOp": "add",
    "qValue": "{ \"data\": \"this is the data\"}"
  }
], true);

BackendAPIclearSelections()

function

Clears unconfirmed selections for this object.

Returns

A promise of a Qlik engine reply.

this.backendApi.clearSelections();

BackendAPIclearSoftPatches()

function

Clears all soft patches that have previously been applied to this object using the applyPatches method.

Returns

A promise of a Qlik engine reply.

this.backendApi.clearSoftPatches();

BackendAPIcollapseLeft(qRow, qCol, qAll?)

function

Collapses the left dimensions of a pivot table. Only works for HyperCubes with qMode = 'P' which are not always fully expanded.

Parameters

qRow
number

Row index.

qCol
number

Column index.

qAll
boolean

If set to true, qRow and qCol are ignored and all cells are collapsed.

Returns

A promise of a Qlik engine reply.

this.backendApi.collapseLeft(0, 0, true);

BackendAPIcollapseTop(qRow, qCol, qAll?)

function

Collapses the top dimensions of a pivot table. Only works for hypercubes with qMode = 'P' which are not always fully expanded.

Parameters

qRow
number

Row index.

qCol
number

Column index.

qAll
boolean

If set to true, qRow and qCol are ignored and all cells are collapsed.

Returns

A promise of a Qlik engine reply.

this.backendApi.collapseTop(0, 1);

BackendAPIeachDataRow(callback)

function

Loops through data rows for this object. Only rows that are available client side will be used.

Parameters

callback

Function to call for each row. Parameters are row number and row data as an array of QAE.NxCell objects. The loop is terminated if the function returns false.

this.backendApi.eachDataRow(function(rownum, row) {
  html += '<li class="state-' + row[0].qState + '" data-value="'
  + row[0].qElemNumber + '">' + row[0].qText;
    if(row[0].qFrequency) {
      html += '<span>' + row[0].qFrequency + '</span>';
    }
  html += '</li>';
});

BackendAPIexpandLeft(qRow, qCol, qAll?)

function

Expands the left dimensions of a pivot table. Only works for hypercubes with qMode = 'P' which are not always fully expanded.

Parameters

qRow
number

Row index.

qCol
number

Column index.

qAll
boolean

If set to true, ignore qRow and qCol and expands all cells.

Returns

A promise of a Qlik engine reply.

this.backendApi.expandLeft(0, 0, true);

BackendAPIexpandTop(qRow, qCol, qAll?)

function

Expands the top dimensions of a pivot table. Only works for hypercubes with qMode = 'P' which are not always fully expanded.

Parameters

qRow
number

Row index.

qCol
number

Column index.

qAll
boolean

If set to true, qRow and qCol are ignored and all cells are expanded.

Returns

A promise of a Qlik engine reply.

this.backendApi.expandTop(0, 1);

BackendAPIgetData(qPages)

function

Gets data from Qlik engine for this object.

Parameters

qPages
Array<QAE.NxPage>

An array of QAE.NxPage objects.

Returns

Promise<Array<QAE.NxDataPage>>

A promise of Array<QAE.NxDataPage>.

var self = this;
var requestPage = [{
  qTop: i + this.currpos,
  qLeft: 0,
  qWidth: 10,
  qHeight: this.displayrows
}];

this.backendApi.getData(requestPage).then(function(dataPages) {
  self.paint($element);
});

BackendAPIgetDataRow(rownum)

function

Gets a data row for this object.

Parameters

rownum
number

The row number.

Returns

Array<QAE.NxCell>

An array of QAE.NxCell or null if the row is not available client side and need to be fetched with getData.

var cells = this.backendApi.getDataRow(row);
if(cells) {
  cells.each(function(cell) {
    console.log('cell text: ', cell.qText);
  });
}

BackendAPIgetDimensionInfos()

function

Gets qDimensionInfo for this object.

Returns

Array<QAE.NxDimensionInfo>

An array of QAE.NxDimensionInfo objects.

this.backendApi.getDimensionInfos().forEach(function(dimInfo){
  console.log('title: ', dimInfo.qFallbackTitle);
});

BackendAPIgetMeasureInfos()

function

Get qMeasureInfo for this object.

Returns

Array<QAE.NxMeasureInfo>

Array of QAE.NxMeasureInfo objects.

this.backendApi.getMeasureInfos().forEach(function(measureInfo){
  console.log('title: ', measureInfo.qFallbackTitle);
});

BackendAPIgetPivotData(qPages)

function

Gets pivot data from the Qlik engine for this object. Only works for hypercubes with qMode = 'P'.

Parameters

qPages
Array<QAE.NxPage>

An array of request page objects.

Returns

Promise<Array<QAE.NxPivotPage>>

A promise of pivot data pages.

var requestPage = {
  qTop : 0,
  qLeft : 0,
  qWidth : 10,
  qHeight : count
};

this.backendApi.getPivotData([requestPage]).then(function(dataPages) {
  ...
});

BackendAPIgetProperties()

function

Get Properties for this object.

Returns

Promise<QAE.GenericObjectProperties>

A promise of object properties.

var me = this;
this.backendApi.getProperties().then(function(reply){
  reply.title = 'New title';
  me.backendApi.setProperties(reply);
});

BackendAPIgetReducedData(qPages, qZoomFactor, qReductionMode)

function

Get reduced data from Qlik engine for this object. This method is intended for preserving the shape of the data, not for viewing the actual data points.

Parameters

qPages
Array<QAE.NxPage>

An array of QAE.NxPage objects.

qZoomFactor
number

If set to -1, the Qlik engine decides the zoom factor. If qReductionMode is 'D1' or 'S', the zoom factor is 2ⁿ. If the zoom factor is 5, the data is reduced by a factor 32. If qReductionMode is 'C', the zoom factor defines the number of centroids.

qReductionMode
string

Reduction mode. One of:

  • 'N' for no data reduction.
  • 'D1' to reduce a bar chart or line chart. The profile of the chart is reduced whatever the number of dimensions in the chart.
  • 'S' to reduce the resolution of a scatter plot.
  • 'C' to reduce the data of a scatter plot chart.
  • 'ST' to reduce the data of a stacked pivot table.

Returns

Promise<Array<QAE.NxDataPage>>

A promise of reduced data pages.

var requestPage = [{
  qTop : 0,
  qLeft : 0,
  qWidth : 10,
  qHeight : count
}];

this.backendApi.getReducedData(requestPage, -1, "D1").then(function(dataPages) {
  ...
});

BackendAPIgetRowCount()

function

Gets the total number of data rows for this object.

Returns

number

The total number of data rows.

if (this.backendApi.getRowCount() > lastrow + 1) {
  morebutton = true;
}

BackendAPIgetStackData(qPages, qMaxNbrCells?)

function

Gets stacked data from the Qlik engine for this object. Only works for hypercubes with qMode = 'S'.

Parameters

qPages
Array<QAE.NxPage>

An array of request page objects.

qMaxNbrCells
default=1000
number

Maximum number of cells at outer level.

Returns

Promise<Array<QAE.NxStackPage>>

A promise of stacked data pages.

var requestPage = {
  qTop : 0,
  qLeft : 0,
  qWidth : 10,
  qHeight : count
};

this.backendApi.getStackData([requestPage], 1000).then(function(dataPages) {
  ...
});

BackendAPIhasSelections()

function

Returns true if there are unconfirmed selections for this object.

Returns

boolean

true if there are unconfirmed selections.

this.backendApi.hasSelections();

BackendAPIsave()

function
deprecated

Save this object.

Returns

A promise of a Qlik engine reply.

BackendAPIsearch(term)

function

Search for a term in a list object. Results in an updated layout, containing only matching records.

Parameters

term
string

Term to search for.

Returns

A promise of a Qlik engine response. Note that the response will show if the search operation was successful or not. It will not contain the matching results.

this.backendApi.search("A");

BackendAPIselectRange(qRanges, qOrMode)

function

Select values in this object using ranges. Only applicable to hypercubes.

Parameters

qRanges
Array<QAE.NxRangeSelectionInfo>

Array of ranges to select.

qOrMode
boolean

If true, only one of the measures needs to be in range.

Returns

A promise of a Qlik engine response with the status of the operation, i.e. if it was successful or not, and details on which objects were updated following the selections.

var range = {
  qMeasureIx: 1,
  qRange: {
  qMin: 10,
  qMax: 100,
  qMinInclEq: true,
  qMaxInclEq: true
};
this.backendApi.selectRange([range], false);

BackendAPIselectValues(qDimNo, qValues, qToggleMode)

function

Selects values in this object with a Qlik engine call that triggers a repaint of the object.

Parameters

qDimNo
number

Dimension number. 0 is the first dimension.

qValues
Array<number>

Array of values (qElemNumber in the matrix from engine) to select or deselect.

qToggleMode
boolean

If true, values in the field are selected in addition to any previously selected items. If false, values in the field are selected while previously selected items are deselected.

$element.find('li').on('qv-activate', function() {
  if(this.hasAttribute("data-value")) {
    var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
    self.backendApi.selectValues(dim, [value], true);
  }
});

BackendAPIsetCacheOptions(opts)

function

Sets caching of page requests.

When enabled, calls to getData are throttled and new requests are created based on internal cache settings. If you want full control of requests to getData, set enabled = false.

Parameters

opts

No description

this.backendApi.setCacheOptions({
  enabled: false // disable cache
})

BackendAPIsetProperties(props)

function

Set properties for this object.

Parameters

props
QAE.GenericObjectProperties

The properties to set.

Returns

A promise of a Qlik engine reply.

var me = this;
this.backendApi.getProperties().then(function(reply){
  reply.title = 'New title';
  me.backendApi.setProperties(reply);
});

BackendAPIeachRow(rowIdx, row)

interface

Parameters

rowIdx
number

No description

row
Array<QAE.NxCell>

No description

BackendAPIempty

object

BackendAPIsuccessful

object

Properties

qSuccess
boolean

No description

Extension

interface

Interface for a Qlik Sense Extension

Properties

initialProperties
QAE.GenericObjectProperties

No description

definition

No description

support

No description

Extensionmounted($element)

any

Parameters

$element
jqLiteElement

No description

Extensionpaint($element, layout)

any

Parameters

$element
jqLiteElement

No description

layout
QAE.GenericObjectLayout

No description

Returns

Promise<void>

No description

ExtensionupdateData(layout)

any

Parameters

layout
QAE.GenericObjectLayout

No description

Returns

Promise<void>

No description

Extensionresize($element, layout)

any

Parameters

$element
jqLiteElement

No description

layout
QAE.GenericObjectLayout

No description

Returns

Promise<void>

No description

ExtensionbeforeDestroy()

any

ExtensionsupportFn(data)

interface

Parameters

data
QAE.GenericObjectLayout

No description

Returns

boolean

No description

ExtensionContext

interface

Properties

backendApi

No description

ExtensionContextselectValues(qDimNo, qValues, qToggleMode)

function

Selects or deselects a value. If not in selection mode, it is initialized and the selection toolbar is displayed.

Parameters

qDimNo
number

Dimension number 0 = first dimension.

qValues
Array<number>

Array of values (qElemNumber in the matrix from engine) to select or deselect.

qToggleMode
boolean

Toggle mode.

$element.find('.selectable').on('qv-activate', function() {
	if(this.hasAttribute("data-value")) {
		var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
			self.selectValues(dim, [value], true);
			$(this).toggleClass("selected");
		}
	});

ExtensionContextpaint($element, layout)

function

Parameters

$element
jqLiteElement

No description

layout
QAE.GenericObjectLayout

No description

Returns

Promise<void>

No description

ExtensionContextupdateData(layout)

function

Parameters

layout
QAE.GenericObjectLayout

No description

Returns

Promise<void>

No description

ExtensionFn(libs)

interface

Parameters

libs
Array<any>

No description

Returns

No description

PPAccordion

interface

The accordion definition property template can be used to add a custom accordion.

Properties

type
'items'

No description

component
'accordion'

No description

items

No description

label
default=''
string

Defines the label that is displayed in the property panel.

PPButton

interface

The button definition property template can be used to add a custom property of button type.

Properties

label
default=''
string

The label that is displayed on the button.

component
'button'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

ref
string

Name or ID used to reference a property.

type
'string' | 'integer' | 'number' | 'array' | 'boolean'

Used for all custom property type definitions. Can be 'string', 'integer', 'number', 'array' or 'boolean'.

Buttonaction(data)

actionFn

Defines the action when clicking the button.

Parameters

data
QAE.GenericObjectProperties

No description

ButtonactionFn(data)

interface

Parameters

data
QAE.GenericObjectProperties

No description

PPButtongroup

interface

The button group definition property template can be used to add a custom property of radio button type.

Properties

type
'string'

No description

component
'buttongroup'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

ref
string

Name or ID used to reference a property.

options
Array<option> | optionFn

No description

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

Buttongroupoption

interface

Properties

value
any

No description

label
default=''
string

No description

tooltip
string

No description

ButtongroupoptionFn

interface

Returns

Promise<Array<option>>

No description

PPCheckbox

interface

The check box definition property template can be used to add a custom property of check box type.

Properties

type
'boolean'

No description

component
'checkbox'

No description

ref
string

Name or ID used to reference a property.

defaultValue
default=true
boolean

Used for defining the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

PPColorPicker

interface
experimental

The color-picker definition property template can be used to add a custom color-picker property.

Properties

type
experimental
'integer'

No description

component
experimental
'color-picker'

No description

ref
experimental
string

Name or ID used to reference a property.

defaultValue
experimental
default=3
integer

Used for defining the default value of your custom property.

label
experimental
default=''
string

Defines the label that is displayed in the property panel.

PPDefaultAddons

interface

Properties

uses
'addons'

No description

```js
{
  uses: 'addons',
}

PPDefaultDimensions

interface

Properties

uses
'dimensions'

No description

min
default=1
number

Defines the minimum number of dimensions.

max
number

Defines the maximum number of dimensions.

```js
{
  uses: 'dimensions',
  min: 1,
  max: 2
}

PPDefaultMeasures

interface

Properties

uses
'measures'

No description

min
default=1
number

Defines the minimum number of measures.

max
number

Defines the maximum number of measures.

```js
{
  uses: 'measures',
  min: 1,
  max: 2
}

PPDefaultSettings

interface

Properties

uses
'settings'

No description

```js
{
  uses: 'settings',
}

PPDefaultSorting

interface

Properties

uses
'sorting'

No description

```js
{
  uses: 'sorting',
}

PPDropdown

interface

The drop down list definition property template can be used to add a custom property of drop down list type.

Properties

type
'string'

No description

component
'dropwdown'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

ref
string

Name or ID used to reference a property.

defaultValue
any

Defines the default value of your custom property.

options
Array<option> | optionFn

No description

label
default=''
string

Defines the label that is displayed in the property panel.

Dropdownoption

interface

Properties

value
any

No description

label
string

No description

DropdownoptionFn

interface

Returns

Array<option> |

No description

PPInteger

interface

The integer definition property template can be used to add a custom property of integer type.

Properties

type
'integer'

No description

component
'integer'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

min
number

Used for defining the minimum value of the property.

max
number

Used for defining the maximum value of the property.

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

```js
{
  type: 'integer',
  label: 'Minimum',
  ref: 'myProperties.min',
  defaultValue: '15',
  min: '10',
  max: '20'
}
```

PPItems

interface

Properties

component
default='items'
'items'

No description

items

No description

PPList

interface
experimental

The list definition property template can be used to add a custom property of list type.

Properties

type
experimental
'array'

No description

component
experimental
'list'

No description

ref
experimental
string

Name or ID used to reference a property.

items
experimental

No description

itemTitleRef
experimental
string

Defines the title of the section items.

addTranslation
experimental
string

Defines a label of the button used to add new items.

allowAdd
experimental
boolean

true adds a button for adding new items.

allowMove
experimental
boolean

true enables the ability to move the item in the properties panel.

label
experimental
default=''
string

Defines the label that is displayed in the property panel.

PPMedia

interface
experimental

The media definition property template can be used to add a custom property of media type.

Properties

component
experimental
'media'

No description

type
experimental
'string'

No description

label
experimental
default=''
string

Defines the label that is displayed in the property panel.

layoutRef
experimental
string

Name or Id used to reference the layout.

```js
{
  label:"My media",
  component: "media",
  ref: "myMedia",
  layoutRef: "myMedia",
  type: "string"
}
```

PPNumber

interface

The number definition property template can be used to add a custom property of number type.

Properties

type
'number'

No description

component
'number'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

min
number

Used for defining the minimum value of the property.

max
number

Used for defining the maximum value of the property.

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

PPRadiobuttons

interface

The radio button definition property template can be used to add a custom property of radio button type.

Properties

type
'string'

No description

component
'radiobuttons'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

ref
string

Name or ID used to reference a property.

options
Array<option> | optionFn

No description

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

Radiobuttonsoption

interface

Properties

value
string

No description

label
string

No description

RadiobuttonsoptionFn

interface

Returns

Array<option> |

No description

PPRangeSlider

interface

The range-slider definition property template can be used to add a custom property of range-slider type.

Properties

type
'array'

No description

component
'slider'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

defaultValue
Array<number, number>

Defines the default value of your custom property.

min
number

Defines the minimum value of the property.

max
number

Defines the maximum value of the property.

step
number

Defines the step value of the property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

PPSlider

interface

The slider definition property template can be used to add a custom property of range-slider type.

Properties

type
'number'

This field is mandatory and should always be "number" for a slider property type definition.

The slider effect is achieved by defining the component field to 'slider'.

component
'slider'

Defines how the property is visualized in the property panel. Used to override the default component that comes with the type setting.

min
number

Defines the minimum value of the property.

max
number

Defines the maximum value of the property.

step
number

Defines the step value of the property.

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

PPString

interface

The string definition property template can be used to add a custom property of string type.

Properties

type
'string'

No description

component
'string'

No description

expression
default=''
'' | 'always' | 'optional'

Defines if values starting with = will be treated as expressions that are evaluated by the Qlik Sense Engine.

  • "always": the property will always be evaluated as an expression meaning that the property will be the value of for example "Avg(Sales)".
  • "optional": the property will only be evaluated as an expression if a = sign is leading the expression. For example "Avg(Sales)" will be presented as the string "Avg(Sales)" while "=Avg(Sales)" will be evaluated as an expression and presented as either 5 or "5" depending on if it is used in a Number/Integer component or in a String component.
  • "": If the setting is left empty or not defined at all, the property will not be evaluated as an expression meaning that the property will be the string "Avg(Sales)".
show
default=true
boolean | showFn

No description

maxLength
number

The maximum number of characters the string can consist of.

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

StringshowFn

interface

Returns

boolean

No description

PPSwitch

interface

The switch definition property template can be used to add a custom property of switch type.

Properties

type
'boolean'

No description

component
'switch'

No description

defaultValue
default=true
boolean

Used for defining the default value of your custom property.

options
Array<option, option>

No description

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

Switchoption

interface

Properties

value
boolean

No description

label
string

No description

PPText

interface

The text definition property template can be used to add a custom property of text type.

Properties

type
'string' | 'integer' | 'number' | 'array' | 'boolean'

Used for all custom property type definitions. Can be 'string', 'integer', 'number', 'array' or 'boolean'.

component
'text'

No description

label
default=''
string

Defines the label that is displayed in the property panel.

PPTextarea

interface

The text area definition property template can be used to add a custom property of text area type.

Properties

type
'textarea'

No description

component
'textarea'

No description

rows
default=3
number

The amount of rows in the text area component.

maxLength
default=512
number

Defines the maximum number of characters in the text.

show
default=true
boolean | showFn

No description

defaultValue
any

Defines the default value of your custom property.

label
default=''
string

Defines the label that is displayed in the property panel.

ref
string

Name or ID used to reference a property.

TextareashowFn

interface

Returns

boolean

No description

Was this page helpful?