Сегодня у нас пост от Андрея Белобородова по разработке интерфейсов Qlik Sense с использованием расширений – его личный топ-5 наиболее полезных экстеншенов и особенности настройки расширения Sense-FieldUI.

Extensions в интерфейсе Qlik Sense: вместо вступления

Как-то попросили у меня рассказать про мои любимые расширения и как они помогают облегчить разработку и улучшить интерфейс приложений. Вот что из этого вышло.

Сам я лично за то, чтобы создавать интерфейс приложения исходя из потребностей заказчика, вместо того, чтобы подгонять его «хотелки» под созданный кем-то шаблон или конструктор.

К счастью, всеми возможностями для этого Qlik Sense обладает, существующий в нем API позволяет интегрировать его хоть с пылесосом.

Но разработка приложения, назовем это «под ключ», требует значительно больше трудозатрат/времени/денег (нужное подчеркнуть) и заказчик не всегда готов идти на такие жертвы.

В связи с этим, на помощь всегда могут прийти расширения, написанные сторонними разработчиками. Они позволяют заполнить практически все пробелы функциональности системы «из коробки», и при правильном подборе могут сильно облегчить жизнь пользователям и разработчикам (хотя иногда бывает и наоборот…).

Мой топ расширений для Qlik Sense

Понятное дело, что расширений на сайте branch.qlik.com уйма. Есть хорошие, есть откровенно плохие.

Свой список я составил исходя из личного опыта, практической пользы, удобства использования и отсутствия багов:

  1. Sense-FieldUI — прикольная штука, позволяет делать красивые кнопочки, выпадающие списки, содержит в себе шрифт font-awesome(кто не знает, это огромная библиотека классных картинок, которые заходят под любой интерфейс);
  2. Show/Hide Container — контейнер, который позволяет по условию показывать/скрывать объекты, заменять их на другие. В общем вместе с ним можно навернуть прикольную логику взаимодействия пользователя с приложением;
  3. Climber Custom Report — аналог гибкого отчета, который все так любят. Лично я в нем смысла особого не вижу, ведь Qlik Sense по-сути и есть большой гибкий отчет. Но зачастую простые пользователи не хотят трогать режим редактирования своими руками, им на все одну кнопочку подавай;
  4. Sheet Navigation + Actions for Qlik Sense— отличное расширение для тех, кому не хватает кнопок в своем приложении. На них можно повесить кучу различных триггеров (как в старом добром QlikView) и радоваться жизни.
  5. SenseDateRangePicker — красивый календарик в стиле bootstrap. Позволит без особых усилий полностью избавиться от вопросов: «а как тут выбрать дату?».

Личный опыт, или рубрика«How to?»: Sense-FieldUI

А теперь, для самых ленивых любознательных, я расскажу как правильно пользоваться первым из перечисленных расширений – Sense-FieldUI.

Как-то раз от меня захотели, чтобы я разместил на листе кучу фильтров, а еще чтобы это выглядело «стильно, модно, молодежно».

Недолго думая, я пошел искать нужное расширение на сайт с расширениями (каламбурчик). После 5-10 минут поиска, я наткнулся на это чудо и сразу принялся изучать его.

В результате получилось вот что:

Каждой картинке соответствует свой набор фильтров. Если смысл картинки вдруг непонятен, то на помощь приходят всплывающие окна:

При нажатии по иконке, как видно на картинке выше, происходит переключение между наборами фильтров.

На самом деле, тут задействовано еще одно расширение «Show-Hide Container», о нем я расскажу чуть ниже.

А теперь пошагово о том, как сделать такой переключатель:

  1. Создаем островок данных:

/* Filter Settings */

_Filters:

Load * Inline [

_Filter, _FilterSortWeight

Customer, 1

SKU, 2

Employee, 3

Calendar, 4

Territory, 5

];

2. Добавляем расширение «Sense-FieldUI» на лист

3. В настройках расширения на вкладке «Dimensions» указываем наше поле «_Filter»:

4. На вкладке «Вид» в разделе «Settings» указываем настройки как на картинке (для достижения персонального эффекта, можно с этими настройками поиграться):

Важно подметить, что на то, какие картинки будут отображаться влияет текст, введенный в поле «Font-Awesome Icons».

У меня там введено: «calendar,shopping-cart,user,barcode,location-arrow»

Нужные названия, а так же сами картинки вы можете найти на сайте: https://fontawesome.com/

О работе с другими расширениями из списка – в следующий раз! До связи!

Автор: Андрей Белобородов