extension - Qlik Sense - Обучение, учебник, онлайн курс

Доступ к системным данным и переменным в Extension Qlik Sense

qliksense-expert — Mon, 21 Feb 2022 06:57:50 +0000

Введение

Иногда при создании расширения Qlik Sense вам необходимо получить доступ к системным данным. Это особенно актуально, если вы пытаетесь создать что-то более общее. Возможно, вам нужен список полей, измерений или показателей. Или вам нужно работать с переменными. Если вы новичок в разработке Qlik Sense, вы можете посмотреть в документации по API способы получения необходимых данных. Не делай этого !!! Модель расширения Qlik Sense основана на идее использования одного универсального объекта, описанного в расширениях initialProperties и измененного пользователем на панели свойств и, возможно, программно (но это действительно продвинуто). Таким образом, хотя использование методов API для получения дополнительных данных является одним из описанных подходов в Qlik Help, которые используются в гибридных приложениях или веб-приложения и обращаются к данным Qlik, вам следует избегать их использования в mashups.

Почему не нужно использовать вызовы API

Если вы используете эти вызовы API в своем расширении, у вас возникнут проблемы:

вы можете легко получить утечку памяти или «утечку общих объектов», когда вы создаете множество общих объектов.
вы можете легко потерять контроль над всеми работающими функциями обратного вызова при повторной проверке общих объектов.
если пользователь делает снимок, вызовы API будут обращаться к последней версии данных, а не к той, что в снимке, и, возможно, дадут неправильные данные.
если пользователь попытается экспортировать ваше расширение в PDF или Excel, оно может сломаться, поскольку служба, отвечающая за этот экспорт, не имеет доступа к оперативным данным, а только к моментальному снимку.

Если вам абсолютно необходимо использовать эти вызовы, вы должны по крайней мере включить экспорт в PDF и Excel и не разрешать моментальные снимки вашего расширения.

Что нужно делать вместо этого

К счастью, есть альтернативы. Все эти вызовы API создают общие объекты, но, поскольку общий объект является очень гибкой структурой, вы можете фактически настроить общий объект за своим расширением для предоставления необходимых вам данных. Вот небольшая таблица того, что вы можете использовать:

Что нужно	Не использовать вызов API	Вместо этого добавьте в initialProperties
List of fields	app.getList(“FieldList”)	qFieldListDef
List of measures	app.getList(“MeasureList”)	qMeasureListDef
List of dimensions	app.getList(“DimensionList”)	qDimensionListDef
List of variables	app.getList(“VariableList”)	qVariableListDef
Variable value	app.variable.getContent(..)	qStringExpression or qValueExpression

Вы найдете рабочий пример этого в репозитории расширении системного списка, просто не используйте его, он предназначен как пример того, как получить данные и на самом деле не делает ничего полезного. Но возьмите ту часть initialProperties, которая вам нужна для расширения. Это выглядит так:

initialProperties: {
                moneyFormat: {
                    qStringExpression: '=MoneyFormat'
                },
                qMeasureListDef: {
                    qType: "measure",
                    qData: {
                        qMeasure: "/qMeasure"
                    }
                },
                qDimensionListDef: {
                    qType: "dimension",
                    qData: {
                        qDim: "/qDim",
                        qDimInfos: "/qDimInfos"
                    }
                },
                qVariableListDef: {
                    qType: "variable",
                    qShowReserved: true,
                    qShowConfig: true
                },
                qFieldListDef: {
                    qShowSystem: true,
                    qShowHidden: true,
                    qShowSemantic: true,
                    qShowSrcTables: true,
                    qShowDerivedFields: true,
                    qShowImplicit: true
                }
            }

Когда следует использовать эти вызовы API

Ну нет правил без исключений. Хотя вам следует избегать использования этих вызовов в API для части рендеринга вашего расширения, вы должны использовать их на своей панели свойств, если вам, например, нужно предоставить список полей пользователю. А в мэшапе они определенно очень полезны. И у API есть другие вызовы, которые вы, возможно, захотите использовать, но в основном это когда пользователь что-то делает, например, нажимает кнопку и т.д.

Источник

https://extendingqlik.upper88.com/accessing-system-data-and-variables-in-a-qlik-sense-extension/

Этот шорткод LP Profile должен использоваться только на странице Учетная запись

Сообщение Доступ к системным данным и переменным в Extension Qlik Sense появились сначала на 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 - Обучение, учебник, онлайн курс.

Отладка visualization extension с помощью web developer tools

qliksense-expert — Fri, 15 Jan 2021 21:37:39 +0000

Отладка с помощью инструментов веб-разработчика

Исторически сложилось так, что разработчики JavaScript часто использовали alert() для целей отладки, но это может восприниматься как раздражающее, поэтому вместо этого рекомендуется использовать console.log() для отправки данных в консоль браузера.

Инструменты веб-разработчика

Большинство веб-браузеров предлагают какой-то инструмент разработчика, но в этом разделе вы познакомитесь с некоторыми основными концепциями, основанными на Google Chrome.

Инструменты разработчика в вашем браузере

Если вы разрабатываете расширения визуализации с помощью Qlik Sense Desktop, вы можете использовать свой любимый браузер для целей отладки. Просто откройте Qlik Sense Desktop и оставьте его открытым. Затем откройте свой браузер и перейдите по адресу http://localhost:4848. Отобразится Hub, и оттуда вы сможете открыть инструменты разработчика браузера.

Инструменты разработчика из Qlik Sense Desktop

Поскольку Qlik Sense Desktop использует Chromium в качестве встроенного браузера, вы можете получить доступ к Chrome DevTools из Qlik Sense Desktop. Нажмите Ctrl + Shift и одновременно щелкните правой кнопкой мыши по листу, а затем выберите «Показать DevTools» в диалоговом окне.

Откроется окно devtools

Отладка с помощью Chrome DevTools

В этом разделе выделены три области, которые имеют большое значение при разработке расширений визуализации:

Использование console
Inspect elements
Debugging

Использование консоли

Как упоминалось выше, удобнее использовать console в веб DevTools вместо запуска предупреждений. Для этого используйте console.info или console.log, чтобы передать что-нибудь в консоль.

Пример:

paint: function ( $element, layout ) {

    var err = {
        message: 'Something went wrong',
        errCode: 'bla'
    };

    console.info( 'We are re-painting the extension' );
    console.error( 'Oops, we haven an error', err );
    console.log( 'We are here' );
    console.log( 'layout', layout );

}

Рекомендуется потратить некоторое время на изучение более сложных концепций console, например:

console.assert();
console.group();
console.groupCollapsed();
console.groupEnd();
console.table();

Некоторые соображения

Функции console.xyz() поддерживаются не всеми веб-браузерами, поэтому рекомендуется убедиться, что в коде не осталось console.xyz(), когда он попадет в рабочую среду. Для этого есть несколько стратегий:

Вручную удалите все console.xyz() из кода перед развертыванием в производственной среде.
Оберните все ваши вызовы в консоль, чтобы они выполнялись только в том случае, если текущий веб-браузер поддерживает консольные вызовы.
Используйте инструменты, например Grunt или Gulp, для создания процесса развертывания, в котором все операторы консоли удаляются автоматически.

Inspect elements (Осмотрите элементы)

Манипуляции с объектной моделью документа (DOM) можно просмотреть с помощью инспектора элементов, который встречается в большинстве инструментов веб-разработчика. В Chrome DevTools вы получаете доступ к функции проверки элементов, щелкнув увеличительное стекло на панели инструментов.

Отладка

Вы можете использовать developer tools для отладки в реальном времени, например:

Chrome DevTools
Firebug
Инструменты разработчика F12 для Internet Explorer

Для того, чтобы запустить режим debugging в расширении, необходимо написать команду debugger;.

Пример:

paint: function($element, layout) {
    
    console.log(layout);
    
    var hypercube = layout.qHyperCube;
    
    console.log(hypercube);
    
    debugger;
}

Сообщение Отладка visualization extension с помощью web developer tools появились сначала на 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';
    $( "