Эта статья продолжает тему работы с интерфейсами Qlik Sense и мэшапами. Из нее вы узнаете, как сделать и настроить всплывающие окна-уведомления. Для этого вам нужно будет добавить несколько библиотек с кодом HTML и Javascript, но не будем забегать вперед – пойдем по порядку.
Всплывающее окно: целевой результат
Если вы, вдруг еще не знакомы с мэшапами, рекомендую вам:
- Воспользоваться справкой
- Поискать инфу на эту тему здесь на Data-Daily (есть полезные статьи).
И да, предполагается, что у вас стоит Qlik Sense со всеми библиотеками для работы с объектами Qlik в приложении.
А теперь перейдем к коду, который вам поможет создать всплывающее окно со встроенным объектом Qlik Sense, которое раскрывается по кнопке:
Для разработки такой красоты нам пригодятся HTML, CSS и Javascript.
Кусок кода HTML
Прежде всего, нам нужно создать кнопку, при нажатии на которую, будет открываться всплывающие окно:
|
1 2 3 |
<button id="ShowMap" type="button" style="position:fixed; bottom:10px; right:20px; z-index:120;" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">Show Map</button> |
Следующий шаг – код для самого всплывающего окна. Код ниже прописывает всплывающее окно, как в примере через <div> с ID (#CustomerGeography), которое отсылает к объекту Qlik Sense.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!-- Map Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Map Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Customer Geography</h4> </div> <div class="modal-body"> <p>Where did we sell our products?.</p> <div id="CustomerGeography" style="height:500px;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
НА ЗАМЕТКУ! Для более глубокого понимания кода выше рекомендую посетить раздел сайта Bootstrap по работе с JS.
Шаг третий – необязательный, но очень желательный! Посмотрите на код, представленный выше. Все мы помним, что важной характеристикой хорошего кода является его читабельность. То, что получилось у нас выше, — вполне рабочий вариант, но читается не очень. Поэтому заходим на сайт http://unminify.com/ и вставляем наш код. После нажатия контрольной кнопки на сайте код выстроится в нужной форме и будет выделен цветом так, как мы привыкли:
Кусок кода CSS
В этом примере и далее при разработке я использую Bootstrap, поэтому вам нужно указать, что вы используете данные библиотеки. Поэтому добавьте такую строку на вашу HTML-страницу между тегами <head></head>.
|
1 2 3 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> |
Кусок кода Javascript
Первое, что нам нужно, – включить в коде работу с библиотекой Javascript. Делается это аналогично CSS (пример выше) при помощи такого кода:
|
1 |
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
Далее – скрипт, который будет использован для запуска всплывающего окна:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Function to toggle hidden objects in a bootstrap popup modal $.fn.extend({ toggleResize: function() { return this.toggle(400, function() { qlik.resize(); }); } }); |
Затем используем функцию qlik.resize(), поскольку процессы Qlik Sense должны быть перезапушены, чтобы показать содержание всплывающего окна. И добавляем код, чтобы масштабировать связанный объект, когда пользователь нажимает на кнопку.
|
1 2 3 4 5 6 7 |
// IDs for showing up on toggleResize function (see above) $('#ShowMap').on('click', function(event) { $('#CustomerGeography').hide().toggleResize(); }); |
Конечно, есть множество способов реализовать эту задачу, поэтому, коллеги, предлагаю вам поделиться своими соображениями в комментариях ниже.
До встречи в новых статьях!
Пишите свой отзыв на статью ниже. Буду рад вашим предложениям и комментариям.
Василий Петренко
B3
Максим
Stepan
Павел Карасев
Свежие комментарии