Итак, сегодня буду рассказывать, как опубликовать ваши визуализации 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.