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

Выгрузка визуализаций Qlik Sense на сайт: инструкция

  1. Откройте Qlik Sense Desktop. По умолчанию локальный сервер работает по порту 4848, с которого мы получим доступ для выгрузки приложения. Называем наше расширение “Helpdesk” и из шаблонов выбираем “Basic Mashup template with absolute positioning” и жмем создать.

расширение "Helpdesk"

  1. Теперь нам нужно запустить приложение, поэтому щелкаем на только созданный “Helpdesk” и жмем кнопку «Править».
  2. У нас есть 4 панели. Крайняя левая – это область нашего приложения и тех объектов, которые мы будем использовать для встраивания на сайт. Правее вы увидите вкладку «Макет» (Layout). Сюда мы будем перетаскивать объекты. Также автоматически созданы две страницы, “Helpdesk.html” и “Helpdesk.js”. Автоматически сгенерировался основной код для получения объектов из Qlik Sense Desktop и html, который будет показывать объекты.
  1. Слева выбираем наши объекты. Нажимаем “Выбрать приложение” (Please choose an app) и выбираем “Helpdesk Management.qvf”. Здесь отобразятся все объекты приложения, доступные для выбора. Давайте выберем бар чарт, который будет отображаться на нашей веб-странице. Нажимаем на название диаграммы “Avg Case Resolution Time (Days)” и перетаскиваем ее на макет справа:

Avg Case Resolution Time (Days)

  1. Если вы нажмете на вкладку “Helpdesk.html”, вы увидите встроенные библиотеки. Нам нужен css для корректной визуализации диаграммы в сети и также требуется .js для того, чтобы подключиться к Qlik Sense Desktop и заполучить наше приложение.

и настройки расположения объекта

  1. Теперь переходим к созданному файлу JavaScript. Он состоит из двух частей. Первая- конфигурация.

  1. Далее идет код, с помощью которого мы получаем приложение и отдельные объекты.

  1. На этом все! Мы создали наш первый машап!!

Не забываем сохранить все и жмем кнопку Просмотра.

mash up

  1. Файлы должны располагаться по следующему пути:
    C:\Users\<username>\Documents\Qlik\Sense\Extensions\Helpdesk

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

НА ЗАМЕТКУ! Если приложение опубликовано через ваш консоль управления Qlik QMC, измените хост сервера в файле JavaScript (№6), а также id приложения (№7) на следующий формат:
var app = qlik.openApp(‘bb4a797c-b483-462b-84d4-53238ce1eeb1’, config);

Комментируйте, делитесь своими наработками. В следующей раз расскажу, как оптимизировать работу с CSS в Qlik Sense при помощи всеми любимого фреймворка фронт-енд разработчиков, Bootstrap.