Эта статья продолжает тему работы с интерфейсами Qlik Sense и мэшапами. Из нее вы узнаете, как сделать и настроить всплывающие окна-уведомления. Для этого вам нужно будет добавить несколько библиотек с кодом HTML и Javascript, но не будем забегать вперед – пойдем по порядку.

Всплывающее окно: целевой результат

Если вы, вдруг еще не знакомы с мэшапами, рекомендую вам:

И да, предполагается, что у вас стоит Qlik Sense со всеми библиотеками для работы с объектами Qlik в приложении.

А теперь перейдем к коду, который вам поможет создать всплывающее окно со встроенным объектом Qlik Sense, которое раскрывается по кнопке:

Всплывающие окна в мэшапах Qlik Sense

Для разработки такой красоты нам пригодятся HTML, CSS и Javascript.

Кусок кода HTML

Прежде всего, нам нужно создать кнопку, при нажатии на которую, будет открываться всплывающие окно:

Следующий шаг – код для самого всплывающего окна. Код ниже прописывает всплывающее окно, как в примере через <div> с ID (#CustomerGeography), которое отсылает к объекту Qlik Sense.

НА ЗАМЕТКУ! Для более глубокого понимания кода выше рекомендую посетить раздел сайта Bootstrap по работе с JS.

Шаг третий – необязательный, но очень желательный! Посмотрите на код, представленный выше. Все мы помним, что важной характеристикой хорошего кода является его читабельность. То, что получилось у нас выше, — вполне рабочий вариант, но читается не очень. Поэтому заходим на сайт http://unminify.com/  и вставляем наш код. После нажатия контрольной кнопки на сайте код выстроится в нужной форме и будет выделен цветом так, как мы привыкли:

Всплывающие окна в мэшапах Qlik Sense

Кусок кода CSS

В этом примере и далее при разработке я использую Bootstrap, поэтому вам нужно указать, что вы используете данные библиотеки. Поэтому добавьте такую строку на вашу HTML-страницу между тегами <head></head>.

Кусок кода Javascript

Первое, что нам нужно, – включить в коде работу с библиотекой Javascript. Делается это аналогично CSS (пример выше) при помощи такого кода:

Далее – скрипт, который будет использован для запуска всплывающего окна:

Затем используем функцию qlik.resize(), поскольку процессы Qlik Sense должны быть перезапушены, чтобы показать содержание всплывающего окна. И добавляем код, чтобы масштабировать связанный объект, когда пользователь нажимает на кнопку.

Конечно, есть множество способов реализовать эту задачу, поэтому, коллеги, предлагаю вам поделиться своими соображениями в комментариях ниже.

До встречи в новых статьях!

Пишите свой отзыв на статью ниже. Буду рад вашим предложениям и комментариям.