Qlik Sense – Шаблоны расширений для визуализации (Visualization Extension Templates)

Basic Visualization Template – Шаблон базовой визуализации

Основной шаблон расширения визуализации – это простой шаблон с заполнителем для метода рисования. При создании расширения визуализации на основе этого шаблона Вам необходимо добавить свои собственные модули JavaScript, а также весь Ваш код рендеринга.

Шаблон базовой визуализации состоит из файлов:

• name.qext
• name.js

Chart Template – Шаблон диаграммы

Шаблон расширения визуализации диаграммы поможет вам приступить к созданию пользовательских графических визуализаций. Он поставляется с заполнителем для метода paint, а также заполнитель для свойства initialProperties, указав свойства, которые должно иметь расширение визуализации при первом создании.
Кроме того, шаблон диаграммы включает в себя заполнитель для панели свойств расширения визуализации, а также местозаполнитель для включения моментальных снимков, используемый для включения или отключения возможности делать снимки расширения визуализации для использования в Data Storytelling.

Шаблон диаграммы состоит из файлов:

• name.qext
• name.js
• name.css
• name.ng.html

ListBox Template – Шаблон списка

Шаблон расширения визуализации списка позволяет Вам создать собственный список. Он поставляется с заполнителем для метода paint, который использует Backend API для рендеринга данных. Он также содержит местозаполнитель свойства initialProperties, определяющий свойства, которые должна иметь ваша таблица при первом создании.
Шаблон списка также включает в себя заполнитель для панели свойств расширения визуализации, а также заполнитель для включения моментальных снимков, используемый для включения или отключения возможности делать снимки расширения визуализации для использования в Data Storytelling.
Кроме того, шаблон списка содержит CSS, который позволяет вам стилизовать внешний вид вашего пользовательского списка.

Шаблон списка состоит из файлов:

• name.qext
• name.js
• style.css

Angular Basic Visualization Template – Шаблон базовой визуализации на Angular JS

Шаблон базовой визуализации на Angular JS – это простой шаблон для создания расширения визуализации с помощью AngularJS.

Шаблон базовой визуализации на Angular JS состоит из файлов:

• name.qext
• name.js
• template.html

Angular Table Template – Шаблон таблицы на Angular JS

Шаблон таблицы на Angular JS является простым шаблоном для создания таблицы с помощью AngularJS.
Шаблон поставляется с CSS, который позволяет вам создавать внешний вид вашей пользовательской таблицы.

Шаблон таблицы на Angular JS состоит из файлов:

• name.qext
• name.js
• style.css
• template.html

Table Template – Шаблон таблицы

Шаблон расширения визуализации таблицы поможет Вам приступить к созданию пользовательской таблицы. Он поставляется с заполнителем для метода paint, который использует Backend API для рендеринга данных. Он также содержит местозаполнитель свойства initialProperties, определяющий свойства, которые должна иметь ваша таблица при первом создании.

Шаблон таблицы также включает в себя заполнитель для панели свойств расширения визуализации, а также заполнитель для включения моментальных снимков, используемый для включения или отключения возможности делать снимки расширения визуализации для использования в Data Storytelling.

Кроме того, шаблон таблицы поставляется с CSS, который позволяет вам создавать внешний вид вашей пользовательской таблицы.

Шаблон таблицы состоит из файлов:

• name.qext
• name.js
• style.css

Краткое описание элементов

The extension metadata file (QEXT) – name.qext

Файл метаданных расширения (QEXT) является файлом JSON и используется Qlik Sense для идентификации расширения визуализации. Он содержит метаданные, используемые для панели библиотеки или активов. При развертывании в Qlik Sense расширение визуализации отображается в разделе «Графики» панели активов или панели библиотеки.

Все визуализации должны содержать как минимум один файл QEXT и один файл JavaScript.

Расширение файла QEXT должно иметь строчные буквы.

Файл JavaScript и файл QEXT должны иметь одно и то же имя, включая соответствующий случай. Имя также должно быть уникальным в системе Qlik Sense, поэтому следует учитывать префикс имени. Например: com-qliktech-helloworld.

Структура QEXT файла

Следующие свойства могут быть определены в файле QEXT.

name – имя

Свойство name является обязательным.
Это имя расширения визуализации и отображается в библиотеке, а также в предварительном просмотре.
Рекомендуется использовать уникальное имя для визуализации, чтобы избежать конфликтов с другими визуализациями, которые могут иметь одно и то же имя.

type – тип

Свойство type является обязательным.
Это определяет тип расширения. Для расширения визуализации всегда указывайте visualization.

description – описание

Описание расширение, отображается в предварительном просмотре расширения визуализации.

icon – значок

По умолчанию используется extension.
Это определяет значок отображается в библиотеке. Может быть:

preview – предварительный просмотр

Если предварительный просмотр не определен, будет использоваться определение значка.
Это определяет, какое изображение предварительного просмотра должно использоваться. Изображение предварительного просмотра отображается во всплывающем окне, когда вы выбираете расширение визуализации в библиотеке.
Вы можете определить пользовательский файл изображения предварительного просмотра.

Пример QEXT файла

Создание расширения визуализации с нуля

В этом примере описывается процесс создания нового расширения визуализации с нуля с помощью Dev Hub и его доступности в Qlik Sense.

В общем, лучший способ узнать о том, как работают расширения визуализации, – открыть его и посмотреть внутренности кода.

Выполните следующие действия:

1. Запустите Dev Hub.

2. Создайте новое расширение визуализации.

• Нажмите «Создать новый», задайте визуализации имя, затем выберите требуемый шаблон.
• Затем нажмите «Создать и изменить».
• Расширение визуализации запускается в редакторе расширения.
• Если вы создаете расширение визуализации вне Dev Hub, вам нужно создать пустую папку и назвать ее соответствующим образом.

3. Отредактируйте содержание расширения визуализации.

• Отредактируйте содержимое файла QEXT.
• Отредактируйте содержимое файла JavaScript.
• Если вы создаете расширение визуализации за пределами Dev Hub, вы можете скопировать существующий файл QEXT и файл JavaScript из, например, папки примера HelloWorld и переименовать файл. Затем отредактируйте контент соответствующим образом. Убедитесь, что имя файла QEXT и имя файла JavaScript совпадают с именем папки.

4. Создайте панель свойств для расширения визуализации.

• Определение панели свойств может быть добавлено как отдельный файл JavaScript или может быть включен в основной файл JavaScript.
• Сделайте расширение визуализации доступным в Qlik Sense Desktop или разверните его в Qlik Sense.

Для Qlik Sense Desktop:

Расширение визуализации автоматически доступно из Qlik Sense Desktop, если оно было создано с помощью Dev Hub.
Если вы создали расширение визуализации с помощью другого инструмента, скопируйте его (то есть папку и файлы) в .. Users \<UserName> \ Documents \ Qlik \ Sense \ Extensions.

Для Qlik Sense:
Добавьте расширение визуализации в Qlik Sense через консоль управления Qlik.
Теперь вы создали расширение визуализации и сделали его доступным в Qlik Sense.