4.0. Что такое виджет с точки зрения разработчика

Под виджетом понимается специальный angular-компонент, предназначенный для отображения параметров SemNext. Платформа берет на себя предоставление виджету данных по параметрам, разработчику необходимо лишь представление для отображения параметров. Ниже представлен пример размещения трех виджетов на дашборде.


4.1. Установка проекта для разработки виджета

Для установки проекта необходимо выполнить следующие шаги:
1. Скопировать среду разработки https://github.com/inspark/web-widget-container

2. Установить зависимости npm install

4.2. Разработка виджета

1. Для создания нового виджета widget-example необходимо в каталоге web-widget-container\src\app\widgets создать папку widget-example.

2. В созданную папку необходимо добавить следующие файлы: widget.example.ts - код виджета; widget.example.html - шаблон виджета; widget.example.scss - стили виджета.

3. Для того, чтобы виджет отображался в среде разработки необходимо добавить импорт виджета в файле src/app/widget.include.ts

import WidgetExample from './widgets/widget-example/widget.example';
export const widgetLibrary = new WidgetLibrary([
  {name: 'WidgetExample', package: WidgetExample},

4. Написать содержание виджета в соответствии с требованиями и рекомендациями по написанию виджета.

5. Выполнить команду npm run start. Загрузить в браузере http://localhost:4210/?widget=WidgetExample, где вы можете проверить отображение виджета, исправить возможные ошибки. В среде разработки необходимо <настроить внешний вид> отображения нужных параметров.

4.3. Сборка и загрузка в магазин

Разработанный виджет необходимо собрать и разместить в магазин виджетов. Для этого необходимо выполнить следующие шаги.

1. Сборка выполняется командой sh build.sh example. После ее успешного выполнения в папке dist будет размещен код виджета, а в папке build zip архив, готовый для загрузки в магазин.

2. Перейдите на страницу магазина и создайте виджет, для чего на странице списка виджетов нажмите кнопку Add widget. В диалоге добавления виджета заполните поля названия и описания виджета, так чтобы было понятно его назначение и содержание, и нажмите кнопку Add widget в диалоговом окне.

Если обновляется версия уже существующего виджета, то шаг 2 следует пропустить.

3. Добавьте новый релиз виджета. Для этого нужно обновить страницу списка виджетов, найти добавленный виджет и нажать кнопку Releases. На открывшейся странице со списком версий (релизов) виджета нажать кнопку New release.

В открывшемся диалоговом окне укажите файл, полученный на первом шаге инструкции данного раздела и нажмите кнопку Upload.

После загрузки архива вы перейдете на страницу с примером работы виджета. В этот момент релиз еще не является опубликованным и недоступен у других пользователей. Для публикации виджета необходимо указать какие изменения сделаны и нажать на кнопку Public.

Теперь виджет доступен для установки в приложении.

4.4. Проверка работы виджета в приложении

Для проверки работы виджета в приложении нужно выполнить следующие действия.

1. Войдите на сайт приложения INSPARK.SEMNEXT и перейдите в раздел WIDGET STORE/ All widgets. В списке виджетов найдите размещенный в п. 4.3 виджет и нажмите кнопку Get widget (Update to N, если было обновление ранее опубликованного виджета). После этого виджет можно размещать на панель виджетов (дашборд).

2. Перейдите в раздел Dashboard. На странице отобразится список доступных дашбордов. Для проверки работы виджета его необходимо разместить на новом или существующем дашборде. Чтобы создать дашборд, необходимо в правом верхнем углу страницы нажать кнопку + Dashboard. На странице создания дашборда введите название дашборда и рубрику каталога, к которому он будет привязан, после чего нажмите кнопку Add dashboard.

3. Выберите созданный или уже имеющийся дашборд и на открывшейся странице нажмите кнопку + Widget. На выбора виджета отыщите нужный и на панели справа увидите его изображение.

Нажмите кнопку Next и на следующей странице настройте параметры отображения виджета на дашборде: укажите заголовок виджета; флажок «FLOATING HEADER» указывает, что заголовок будет скрыт, если на него не будет наведен указатель; а также отображаемые в виджете параметры.

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

После выполнения перечисленных действий проверьте работу созданного виджета в приложении INSPARK.SEMNEXT.