Qlik Sense Extensions Tutorial. Обучение по разработке расширений

Qlik Sense Extensions Tutorial (Обучение)

Введение в Qlik Sense Extensions

Что такое расширение с концептуальной точки зрения?

Qlik Sense поставляется со стандартным набором объектов диаграмм, которые позволяют пользователям исследовать свои данные визуально. Гистограмма, линейная диаграмма и таблица являются примерами готовых объектов, к которым пользователи имеют доступ с помощью Qlik Sense. Эти объекты могут быть размещены на приборной панели, изменять свой размер в зависимости от экрана и могут быть интегрированы в Qlik Sense Stories. Тем не менее, эти диаграммы не могут отвечать на все вопросы, которые возникают у пользователя, особенно когда встречаются уникальные практические кейсы.

В рамках открытой экосистемы Qlik Qlik представила мощную концепцию Extension Objects, которая позволяет нам расширять возможности программы Qlik Sense пользовательскими объектами.

Объекты расширения (Extension Objects)

Объекты расширения (Extension Objects) – это настраиваемые объекты, интегрированные в Qlik Sense
Расширения (Extensions) – это настраиваемые объекты, созданные вне основного продукта Qlik. Они обычно используются для создания кастомных (нестандартных) визуализаций и форм диаграммы, которые недоступны в базовой графической библиотеке.

Однако эти пользовательские объекты не ограничиваются визуализацией данных и могут служить и другим целям. Например, мы могли бы построить расширение, которое реализует собственный механизм навигации для перехода от листа к листу в приборной панели Qlik Sense.

Они ведут себя как обычные объекты

Объекты расширения внедряются непосредственно в клиент Qlik Sense и, следовательно, чувствуют себя как компоненты “из коробки”. Пользователи добавляют их в панели мониторинга с тем же механизмом перетаскивания, что и любая другая функция Qlik Sense. Объекты реагируют на разрешение экрана и могут подключаться к динамическим данным Qlik (к модели данных Qlik, реагируя на выборки Selections). Это позволяет расширениям реагировать на изменение данных. Расширения полностью “приживаются” в модели аналитики Qlik Sense на принципах самообслуживания (self-service), что облегчает бизнес-пользователям использование дополнительных функций, которые они добавляют в инструмент Qlik.

Что такое расширения, технически?

Объекты расширения, с технической точки зрения, состоят из кода, который запускается в браузере. В частности, они используют:
HTML5 для рендеринга на страницу через divs, svgs и т.д.
JavaScript для добавления интерактивности к объекту, например, для фильтрации данных или динамического рисования диаграммы на основе входных данных.
JSON для определения метаданных, которые задают структуру для организации расширения, а также для возможности настройки конечным пользователем Extension.
CSS для стилизации объекта

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

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

Подробнее