Extensions
The Extension API consists of methods and properties used to create custom visualization extensions.
qext
interfaceThe 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 |
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)
functionThe extension as an AMD module.
Parameters
dependencies Array<string> | No description |
cb | No description |
new BackendAPI()
classHelper functions for Engine calls and access to Engine data. Available for extensions as
this.backendApi
.
BackendAPIabortSearch()
functionAborts 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)
functionAccepts the result of a search in a list object and the search result is selected in the field.
Parameters
toggleMode boolean | If |
Returns
A promise of a Qlik engine response. |
this.backendApi.acceptSearch(false);
BackendAPIapplyPatches(qPatches, qSoftPatch)
functionUpdates the properties for this object.
Parameters
qPatches Array<QAE.NxPatch> | Array of patches to apply. |
qSoftPatch boolean | Set to |
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()
functionClears unconfirmed selections for this object.
Returns
A promise of a Qlik engine reply. |
this.backendApi.clearSelections();
BackendAPIclearSoftPatches()
functionClears 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?)
functionCollapses 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 |
Returns
A promise of a Qlik engine reply. |
this.backendApi.collapseLeft(0, 0, true);
BackendAPIcollapseTop(qRow, qCol, qAll?)
functionCollapses 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, |
Returns
A promise of a Qlik engine reply. |
this.backendApi.collapseTop(0, 1);
BackendAPIeachDataRow(callback)
functionLoops 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 |
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?)
functionExpands 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 |
Returns
A promise of a Qlik engine reply. |
this.backendApi.expandLeft(0, 0, true);
BackendAPIexpandTop(qRow, qCol, qAll?)
functionExpands 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 |
Returns
A promise of a Qlik engine reply. |
this.backendApi.expandTop(0, 1);
BackendAPIgetData(qPages)
functionGets data from Qlik engine for this object.
Parameters
qPages Array<QAE.NxPage> | An array of |
Returns
Promise<Array<QAE.NxDataPage>> | A promise of |
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)
functionGets a data row for this object.
Parameters
rownum number | The row number. |
Returns
Array<QAE.NxCell> | An array of |
var cells = this.backendApi.getDataRow(row);
if(cells) {
cells.each(function(cell) {
console.log('cell text: ', cell.qText);
});
}
BackendAPIgetDimensionInfos()
functionGets qDimensionInfo
for this object.
Returns
Array<QAE.NxDimensionInfo> | An array of |
this.backendApi.getDimensionInfos().forEach(function(dimInfo){
console.log('title: ', dimInfo.qFallbackTitle);
});
BackendAPIgetMeasureInfos()
functionGet qMeasureInfo
for this object.
Returns
Array<QAE.NxMeasureInfo> | Array of |
this.backendApi.getMeasureInfos().forEach(function(measureInfo){
console.log('title: ', measureInfo.qFallbackTitle);
});
BackendAPIgetPivotData(qPages)
functionGets 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()
functionGet 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)
functionGet 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 |
qZoomFactor number | If set to -1, the Qlik engine decides the zoom factor.
If |
qReductionMode string | Reduction mode. One of:
|
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()
functionGets 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?)
functionGets 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()
functionReturns true
if there are unconfirmed selections for this object.
Returns
boolean |
|
this.backendApi.hasSelections();
BackendAPIsave()
functionSave this object.
Returns
A promise of a Qlik engine reply. |
BackendAPIsearch(term)
functionSearch 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)
functionSelect 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)
functionSelects values in this object with a Qlik engine call that triggers a repaint of the object.
Parameters
qDimNo number | Dimension number. |
qValues Array<number> | Array of values ( |
qToggleMode boolean | If |
$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)
functionSets 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)
functionSet 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)
interfaceParameters
rowIdx number | No description |
row Array<QAE.NxCell> | No description |
BackendAPIempty
objectBackendAPIsuccessful
objectProperties
qSuccess boolean | No description |
Extension
interfaceInterface for a Qlik Sense Extension
Properties
initialProperties QAE.GenericObjectProperties | No description |
definition Items
| Accordion
| Button
| Buttongroup
| Checkbox
| ColorPicker
| Dropdown
| Integer
| Link
| List
| Media
| Number
| Radiobuttons
| RangeSlider
| Slider
| String
| Switch
| Text
| Textarea
| DefaultDimensions
| DefaultMeasures
| DefaultSettings
| DefaultSorting
| DefaultAddons | No description |
support | No description |
Extensionmounted($element)
anyParameters
$element jqLiteElement | No description |
Extensionpaint($element, layout)
anyParameters
$element jqLiteElement | No description |
layout QAE.GenericObjectLayout | No description |
Returns
Promise<void> | No description |
ExtensionupdateData(layout)
anyParameters
layout QAE.GenericObjectLayout | No description |
Returns
Promise<void> | No description |
Extensionresize($element, layout)
anyParameters
$element jqLiteElement | No description |
layout QAE.GenericObjectLayout | No description |
Returns
Promise<void> | No description |
ExtensionbeforeDestroy()
anyExtensionsupportFn(data)
interfaceParameters
data QAE.GenericObjectLayout | No description |
Returns
boolean | No description |
ExtensionContext
interfaceProperties
backendApi | No description |
ExtensionContextselectValues(qDimNo, qValues, qToggleMode)
functionSelects 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)
functionParameters
$element jqLiteElement | No description |
layout QAE.GenericObjectLayout | No description |
Returns
Promise<void> | No description |
ExtensionContextupdateData(layout)
functionParameters
layout QAE.GenericObjectLayout | No description |
Returns
Promise<void> | No description |
ExtensionFn(libs)
interfaceParameters
libs Array<any> | No description |
Returns
No description |
PP
namespaceProperty panel definitions
Properties
Component Items
| Accordion
| Button
| Buttongroup
| Checkbox
| ColorPicker
| Dropdown
| Integer
| Link
| List
| Media
| Number
| Radiobuttons
| RangeSlider
| Slider
| String
| Switch
| Text
| Textarea
| DefaultDimensions
| DefaultMeasures
| DefaultSettings
| DefaultSorting
| DefaultAddons | No description |
PPAccordion
interfaceThe 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
interfaceThe 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 |
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 |
Buttonaction(data)
actionFnDefines the action when clicking the button.
Parameters
data QAE.GenericObjectProperties | No description |
ButtonactionFn(data)
interfaceParameters
data QAE.GenericObjectProperties | No description |
PPButtongroup
interfaceThe 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 |
ref string | Name or ID used to reference a property. |
options | 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
interfaceProperties
value any | No description |
label default='' string | No description |
tooltip string | No description |
ButtongroupoptionFn
interfaceReturns
Promise<Array<option>> | No description |
PPCheckbox
interfaceThe 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
interfaceThe 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
interfaceProperties
uses 'addons' | No description |
```js
{
uses: 'addons',
}
PPDefaultDimensions
interfaceProperties
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
interfaceProperties
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
interfaceProperties
uses 'settings' | No description |
```js
{
uses: 'settings',
}
PPDefaultSorting
interfaceProperties
uses 'sorting' | No description |
```js
{
uses: 'sorting',
}
PPDropdown
interfaceThe 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 |
ref string | Name or ID used to reference a property. |
defaultValue any | Defines the default value of your custom property. |
options | No description |
label default='' string | Defines the label that is displayed in the property panel. |
Dropdownoption
interfaceProperties
value any | No description |
label string | No description |
DropdownoptionFn
interfaceReturns
Array<option>
| | No description |
PPInteger
interfaceThe 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 |
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
interfaceProperties
component default='items' 'items' | No description |
items | No description |
PPLink
interfaceThe link definition property template can be used to add a custom property of link type.
Properties
component 'link' | No description |
label default='' string | Defines the label that is displayed in the property panel. |
url string | Defines the web address used in the link. |
type 'string'
| 'integer'
| 'number'
| 'array'
| 'boolean' | Used for all custom property type definitions. Can be |
PPList
interfaceThe 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 |
|
allowMove experimental boolean |
|
label experimental default='' string | Defines the label that is displayed in the property panel. |
PPMedia
interfaceThe 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
interfaceThe 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 |
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. |
PPRangeSlider
interfaceThe 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 |
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
interfaceThe 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
|
component 'slider' | Defines how the property is visualized in the property panel. Used to override the default component that comes with the |
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
interfaceThe 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
|
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
interfaceReturns
boolean | No description |
PPSwitch
interfaceThe 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 | 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
interfaceProperties
value boolean | No description |
label string | No description |
PPText
interfaceThe 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 |
component 'text' | No description |
label default='' string | Defines the label that is displayed in the property panel. |
PPTextarea
interfaceThe 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
interfaceReturns
boolean | No description |