Сегодня расскажу о способе создания пользовательского списка для Qlik Sense на основе Angular и RxQ. Статья основана на материалах Джастина Скаггса (Justin Skaggs), который работает в западной консалтинговой компании и специализируется на Qlik-разработке. Итак, создавать listbox будем через Engine API.

 

НА ЗАМЕТКУ! Engine API позволяет управлять элементами интерфейса приложения не через пользовательский интерфейс, а через доступ по API. Среди возможных действий через API:

  • Создание листов приложения.
  • Создание объектов листа.
  • Создание закладок.
  • Изменение скрипта загрузки.
  • Перезагрузка приложения.
  • Применение и очистка выборок и многое другое.

Итак, приступим к созданию простого элемента управления в виде списка с использованием Angular(ng2) в части работы с интерфейсом, а RxQ для работы с Engine API.

Listbox: инструкция создания

Мы не будем создавать полностью проект с нуля, а воспользуемся уже готовыми наработками, а именно angular-seed, который будет отличным помощником в нашем деле. Фактически, angular-seed – это шаблон готового приложения AngularJS. Если хотите параллель с Qlik, то он схож с шаблоном приложения QVF. Такой шаблон позволяет стартовать новое приложение в разы быстрее, на основе уже написанных строк кода, необходимых для старта работы.

НА ЗАМЕТКУ! Прежде чем начать разработку, установите NodeJS.

1. Копирование файлов и создание проекта. Команда ниже откопирует репозитарий с angular-seed, даст новое название папке и изменит его на новую для нашего проекта:

 

https://cdn-images-1.medium.com/max/1000/1*cVe4IKhOtx6a9c25AmDbxA.png

2. Установите зависимости (это может занять несколько минут…)

 

3. Перечислите скрипты проекта

 

https://cdn-images-1.medium.com/max/1000/1*TTEaRTkZUe3o1Cmqt5_FeQ.png

Для запуска скрипта используйте такую команду:

 

4. Начните развертывание сервера:

 

Так, в браузере должна открыться вкладка по адресу http://localhost:5555 :

https://cdn-images-1.medium.com/max/1000/1*jK-0eVs-1V6EoLX1_ePBmw.png

Структура проекта

Прежде чем перейти к созданию Listbox, давайте посмотрим, какая у нас структура проекта:

https://cdn-images-1.medium.com/max/1000/1*uJTpnOe7EN33xFdxxKkmuw.png

Создание модуля Listbox

Создадим новый модуль с помощью  angular-cli, он запоминает правильный импорт или копирует те части проекта, которые работоспособны.

https://cdn-images-1.medium.com/max/1000/1*YGUJIyU9Ac_iZ4qEGTPOnA.png

Вот, что должно быть импортировано для нашего списка:

 

НА ЗАМЕТКУ! Для каждого модуля работает своя ссылка:

Домашний экран — http://localhost:5555/

О приложении — http://localhost:5555/about

Список — http://localhost:5555/listboxes

 

listboxes.component.html — шаблон HTML-кода для списка. Здесь хранится основная информация о div-блоке со списком.

listboxes.component.css… – а так выглядит таблица стилей для списка

 

Затем импортируем модуль Listboxes в модуль определения нашего приложения.

 

Теперь запускаем сервер. Ссылка на список — http://localhost:5555/listboxes.

https://cdn-images-1.medium.com/max/1000/1*622pb8PE7t_MPNIbXNVh1g.png

Подключение к Qlik Sense

Прежде чем добавить список на экран, нам нужно подключиться к серверу Qlik Sense. В примере мы используем библиотеку RxQ. То же самое можно сделать, используя enigma или qsocks.

Чтобы добавить библиотеку на страницу, нужно вставить в index.html src/client/index.html строку скрипта:

 

Теперь создайте новую папку в src/client/app/shared,  “qlik”.

https://cdn-images-1.medium.com/max/1000/1*HXaeP0aHYsscphNSBBi-Cg.png

index.ts…

export * from ‘./qlik.service’;

qlik.service.ts — соединение с Qlik Sense Engine и открытие приложения (в нашем случае “AirBnB Data”).

Для подключения к серверу Qlik Playground, войдите в приложения в Qlik Playground и скопируйте ваш apiKey в файл qlik.service.ts.

https://cdn-images-1.medium.com/max/1000/1*wp8VfXbCk7yAx9cOtJd0UQ.png

 

Для доступа к службам загрузим модуль совместимости:

shared.module.ts…

 

Теперь идем дальше и создаем список, который будет:

1. Показывать имя поля

2. Показывать значения полей

3. Выбранные значения полей

Если вы раньше не работали с компонентами, то можете представить, что это своего рода расширение синтаксиса HTML. Так, нам будет не нужно каждый раз прописывать div для каждого списка.

 

Определяем название поля и отображаемое имя ($Title)…

 

Далее в src/client/app/shared создаем папку “listbox” для нового компонента.

https://cdn-images-1.medium.com/max/1000/1*lN8hy5xgJjsMvqHw4NAF1A.png

listbox.component.ts — здесь создадим ListObject.

 

listbox.component.html — здесь используется модификатор async pipe, который автоматически распределяет поток данных из source$ observable.

 

shared.module.ts — добавляем еще один компонент списка.

 

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

listboxes.component.html…

 

После обновления страницы у вас появится property_type со списком элементов.

https://cdn-images-1.medium.com/max/1000/1*pfEIgjmgogSapidtLKYLhQ.png

НА ЗАМЕТКУ! Названия поля можно заменить на другое, более удобное пользователю, при помощи простого тега:

 

https://cdn-images-1.medium.com/max/1000/1*9iDsrhz659avn9m5MZzyCw.png

Этот компонент можно использовать для нескольких списков:

 

https://cdn-images-1.medium.com/max/1000/1*jnYrHrQb7IavEvz2lEPODg.png

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

https://cdn-images-1.medium.com/max/1000/1*Z7ThbXXCPf_1uPPyxQCjWg.png

Итоги

Это была вводная статья по работе с элементами управления с помощью Angular (ng2) и RxQ.

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

На этом все на сегодня. Удачных вам разработок с Qlik!

СКАЧАТЬ Пользовательский Listbox в Qlik Sense