Дорогие друзья, сегодня хочу написать о работе с темами Qlik Sense. Темы будут очень полезны, если в вашей компании есть брендбук, которого стоит придерживаться при оформлении любых внутренних и особенно внешних приложений. Поскольку темы Qlik Sense пока не особо документированы, Кристоф Шварц (Christof Schwarz), технический архитектор Qlik, предлагает их изменять под себя. О там как их настроить темы в Qlik Sense 3.0 и работать с ними, сегодня и поговорим.

Готовая кастомная тема: HighVis

Тема Qlik Sense состоит из двух файлов:

  • .css
  • и .json.

В качестве примера используем тему HighVis, которая подходит под стиль планшетов:

Screenshot 2015-11-07 10.09.07.png

Скачайте файл highvis2.zip и сохраните распакованный архив в соответствующую папку (об этом ниже).

Тема «highvis» походит для Qlik Sense версий 2.2 – 3.х, так что если нужно, обновитесь.

НА ЗАМЕТКУ! Сохраняйте неизменной структуру папки. Название подпапки совпадает с именем темы, в дальнейшем мы будем обращаться к ней через URL.

Тема для Qlik Sense: Путь

Чтобы темы для Qlik Sense корректно работали, надо размещать файлы в специальной директории:

  • Темы для Qlik Sense сервера хранятся тут:

C:\Program Files\Qlik\Sense\Client\themes

  • Темы для Qlik Sense десктопа (версии >= 3.0) тут:

C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes

Screenshot 2016-08-19 15.44.40.png

Как вызвать новую тему

Перейдите в хаб и нажмите кнопку добавить “/theme/highvis2” к url. После этого любое приложение будет открываться с новой темой, которую мы только что указали.

Например:

http://localhost:4848/hub/theme/highvis2

http://localhost:4848/sense/app/Helpdesk%20Management.qvf/sheet/1ff88551-9c4d-41e0-b790-37f4c11d3df8/state/analysis/them…

НА ЗАМЕТКУ! Темы кэшируются и клиентом (браузером), и самим Sense сервером, поэтому если сразу вы не увидели изменений, перезапустите дескоп или сервер.

Как изменить тему, установленную по умолчанию

Стандартная тема находится в тех же папках, что мы указывали выше, но в подпапке “sense”. Рекомендую с дефолтной папкой быть осторожными, т.к. невзначай можно изменить стандартные цвета, шрифты, ширину графиков или еще что-то похуже =)

Для того чтобы протестировать изменение темы, измените название темы в подпапке каждый раз после внесения изменения, например “highvis2” “highvis3” “highvis4” …и вносите изменения в приложении в ссылке URL ( …. /theme/highvis3 …)

НА ЗАМЕТКУ! У вас всегда будет оставаться тема, установленная по умолчанию, если вы не внесете изменения в ссылку “/theme/abracadabra”. После таких изменений начинает работать новая тема.

Право выбор остается за вами – управлять темой приложения через ссылку, которой вы делитесь с пользователями приложения или создавать отдельное расширение для целей управления дизайном приложения.

Анатомия CSS-файла темы Qlik Sense

Давайте теперь посмотрим, что у нас записано в CSS-файле:

Вы можете менять этот файл по своему усмотрению.

Анатомия JSON-файла темы Qlik Sense

Файл JSON полностью определяет оформление – шрифты, цвета, размеры заголовков, отступы, сетку, положение и оформление легенды, настройки визуализации объектов листа и иное:

Надеюсь, что данный материал даст вам вдохновение на создание собственных оформлений приложений, хотя, конечно, стандартная тема продумана весьма хорошо по правилам композиции, сочетания цветом и прочему, но пробовать что-то новое – всегда интересно!