Методы Qlik Sense Extension API - Qlik Sense - Обучение, учебник, онлайн курс

Qlik Web Developer – Backend API для разработки Extensions

qliksense-expert — Sat, 16 Jan 2021 12:42:03 +0000

Введение в Qlik Sense Backend API

Backend API состоит из ряда методов и используется для взаимодействия с ассоциативным механизмом Qlik. Он предоставляет вспомогательные функции для вызовов ассоциативного механизма Qlik и доступ к данным ассоциативного механизма Qlik.

Backend API – это оболочка для выбранных методов Qlik Engine JSON API, но с той разницей, что Backend API знает контекст, то есть текущее соединение WebSocket и приложение Qlik Sense.

Backend API доступен для разработчиков расширений как this.backendApi:

this.backendApi.eachDataRow(function(rownum, row) {
    .....
});

Примеры использования

Selections

Следующие методы Backend API доступны, когда вы работаете с выборками в универсальном объекте, стоящем за вашим расширением.

selectValues
selectRange
clearSelections
hasSelections

Используйте метод selectValues для выбора значений в этом объекте. Вызов вызывает перерисовку объекта.

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

Метод selectRange выбирает значения в этом объекте, используя диапазоны.

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

Метод hasSelections можно использовать, чтобы узнать, есть ли неподтвержденные выборы для этого объекта.

this.backendApi.hasSelections();

Если для этого объекта есть неподтвержденные выборки, вы можете использовать метод clearSelections, чтобы очистить их.

this.backendApi.clearSelections();

Search

При работе с поиском в объектах списка вы можете использовать следующие методы Backend API.

search
acceptSearch
abortSearch

Используйте метод search для поиска термина в list object. Это приводит к обновленному layout, который содержит только совпадающие записи.

this.backendApi.search("A");

Метод acceptSearch принимает результат поиска и делает его выбранным в поле.

this.backendApi.acceptSearch(false);

Используйте метод abortSearch, если поиск должен быть прерван. Это очищает существующий поиск и возвращает объект в состояние, в котором он находился до поиска.

this.backendApi.abortSearch();

Сообщение Qlik Web Developer – Backend API для разработки Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Обзор Extension API и описание методов расширений

qliksense-expert — Sat, 09 Jan 2021 20:42:37 +0000

Введение в Extension API

Extension API состоит из методов и свойств, используемых для создания custom расширений визуализации (или custom visualization extensions).

Обзор Visualization extension templates

Для начала рассмотрим шаблоны Visualization extension templates. В dev-hub при создании Extension вам предлагают выбрать шаблон.

Basic Visualization template

Назовем наш Extension “1_BVT”. При инициализации создадутся два файла:

1_BVT.qext

{
    "name": "1_BVT",
    "description": "Basic empty visualization template",
    "type": "visualization",
    "version": "1.0.0",
    "icon": "extension",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

1_BVT.js

define( [ "qlik"
],
function ( qlik) {

    return {
        support : {
            snapshot: true,
            export: true,
            exportData : false
        },
        paint: function ($element) {
            //add your rendering code here
            $element.html( "1_BVT" );
            //needed for export
            return qlik.Promise.resolve();
        }
    };

} );

Chart Template

Назовем наш Extension “2_CT”. При инициализации создадутся 4 файла:

2_CT.qext

{
    "name": "2_CT",
    "description": "Chart visualization template",
    "icon": "bar-chart-horizontal",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

2_CT.js

define( ["qlik", "text!./2_CT.ng.html", "css!./2_CT.css"],
    function ( qlik, template ) {
        "use strict";
        return {
            template: template,
            initialProperties: {
                qHyperCubeDef: {
                    qDimensions: [],
                    qMeasures: [],
                    qInitialDataFetch: [{
                        qWidth: 2,
                        qHeight: 50
                    }]
                }
            },
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    dimensions: {
                        uses: "dimensions",
                        min: 1,
                        max: 1
                    },
                    measures: {
                        uses: "measures",
                        min: 1,
                        max: 1
                    },
                    sorting: {
                        uses: "sorting"
                    }
                }
            },
            support: {
                snapshot: true,
                export: true,
                exportData: true
            },
            paint: function () {
                //needed for export
                this.$scope.selections = [];
                return qlik.Promise.resolve();
            },
            controller: ["$scope", "$element", function ( $scope ) {
                $scope.getPercent = function ( val ) {
                    return Math.round( (val * 100 / $scope.layout.qHyperCube.qMeasureInfo[0].qMax) * 100 ) / 100;
                };

                $scope.selections = [];

                $scope.sel = function ( $event ) {
                    if ( $event.currentTarget.hasAttribute( "data-row" ) ) {
                        var row = parseInt( $event.currentTarget.getAttribute( "data-row" ), 10 ), dim = 0,
                            cell = $scope.$parent.layout.qHyperCube.qDataPages[0].qMatrix[row][0];
                        if ( cell.qIsNull !== true ) {
                            cell.qState = (cell.qState === "S" ? "O" : "S");
                            if ( $scope.selections.indexOf( cell.qElemNumber ) === -1 ) {
                                $scope.selections.push( cell.qElemNumber );
                            } else {
                                $scope.selections.splice( $scope.selections.indexOf( cell.qElemNumber ), 1 );
                            }
                            $scope.selectValues( dim, [cell.qElemNumber], true );
                        }
                    }
                };
            }]
        };

    } );

2_CT.css

.qv-object-2_CT .css_bars_row {
    transition: all 0.3s ease;
    float: left;
    width: 98%;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    margin-bottom: 2px;
    border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.qv-object-2_CT .css_bars_bar {
    float: left;
    clear: left;
    height: 30px;
    background-color: #5f5f5f;
}

.qv-object-2_CT .css_bars_bar span {
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
}

.qv-object-2_CT .css_bars_per {
    position: relative;
}

.qv-object-2_CT .css_bars_per span {
    font-weight: bold;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
}

.qv-object-2_CT .css_bars_per span.over {
    position: absolute;
    right: 15px;
    color: #f0f0f0;
}

.qv-object-2_CT .css_bars_row:hover, .qv-object-2_CT .css_bars_row.selected {
    border: 1px solid #000;
}

2_CT.ng.html


    
        {{item[0].qText}}
        
            {{getPercent(item[1].qNum)}} %

Listbox template

Назовем наш Extension “3_LBT”. При инициализации создадутся 3 файла:

3_LBT.js

define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
    'use strict';
    $( "