Встраивание виджетов в HTML



  • Автоматическое встраивание панелей визуализаций и виджетов в Web-страницы сторонних сайтов осуществляется загрузочным скриптом(JavaScript бутстрапом), который необходимо встроить в тело HTML страницы тегом <script>),

    <script type="text/javascript" src="https://cubisio.online/datacube/api/WidgetController.jsb">
    </script>
    

    Скрипт выполняет встраивание виджета внутрь <div> контейнера, если задан атрибут jsb="DataCube.Api.Widget".

    <div id="myWidgetContainer" 
       jsb="DataCube.Api.Widget"
       wsid="b7b26ecd6f48692c61475f5e14b8c89c" 
       wid="357e8cb6a0c388786b7ab40e8539c011"
       auto="true"
       oncreatewidget="function(widget){ console.log(widget); }"
       onmessage="function(msg, data){ ... }">
    </div>
    

    Параметры встраиваемого виджета:

    • jsb - название бина jsBeans, управляющего встроенным виджетом;
    • wsid - идентификатор рабочей области пользователя;
    • wid - идентификатор виджета;
    • auto - флаг автоматического запуска отрисовки виджета после инициализации;
    • oncreatewidget - функция обработчик события создания виджета;
    • onmessage - функция обработчик событий виджета.

    Методы для управления встраиваемым виджетом:

    1. Получение контейнера (объекта с API) управления виджетами - widgetContainer = JSB.getInstance(containerBeanName) , где:

      • containerBeanName - имя бина контейнера виджетов;
      • widgetContainer - возвращаемое значение, объект контейнера виджетов.
    2. Асинхронное получение объекта виджета (c API управления) - widgetContainer.lookupWidget(widgetId, widgetCallback), где:

      • widgetContainer - объект контейнера виджетов;
      • widgetId - уникальный идентификатор виджета;
      • widgetCallback - callback-функция, первым аргументом которой передается объект виджета (объет с API управления виджетом) - function(widget){...};
      • widget - объект виджета.
         JSB.getInstance('DataCube.Api.WidgetController')
         	.lookupWidget('357e8cb6a0c388786b7ab40e8539c011', function(widget){
         	...
         	});
    
    1. Обновление и перерисовка виджета - widget.refresh(), где:

      • widget - объект виджета.
    2. Обновление и перерисовка всех виджетов на странице с учетом изменённого глобального фильтра - widget.refreshAll(), где:

      • widget - объект виджета.
    3. Установка сортировки данных, используемых виджетом - widget.setSort(sort) , где:

      • sort - параметры сортировки в форме JSON объекта {fieldName: sortType, ...};
      • fieldName - имя поля;
      • sortType - тип сортировки (1 - по возрастанию; -1 - по убыванию).
    4. Добавление условия фильтрации - filterId = widget.addFilter(filterDesc), где:

      • widget - объект виджета;
      • filterDesc - объект описания условия фильтрации по полю в формате { "type": filterType, "op": comparationOperator, "field": fieldName, "value": filterValue, };
      • filterType - логический оператор фильтрации (одно из значений: $or, $and);
      • comparationOperator - оператор сравнения поля среза (одно из значений: $eq, $ne, $lt, $lte, $gt, $gte, $like, `$ilike``);
      • fieldName - имя поля для фильтрации;
      • filterValue - значение для фильтрации;
      • filterId - возвращаемое значение, идентификатор фильтра.
         var myFilterId = widget.addFilter({
         	type: '$and',   // логический оператор фильтра
         	op: '$lte',	// оператор сравнения поля среза
         	field: 'count',	// название поля среза
         	value: 1        // значение
         });
    
    1. Удаление фильтра - widget.removeFilter(filterId), где:

      • widget - объект виджета;
      • filterId - идентификатор фильтра.
    2. Проверка на существование подобного фильтра - filterExists = widget.hasFilter(filterDesc), где:

      • widget - объект виджета;
      • filterDesc - объект описания условия фильтрации (формат см. метод addFilter);
      • filterExists - возвращаемое булево значение (истина, если фильтр задан).
    3. Удаление всех фильтров - widget.clearFilters(), где:

      • widget - объект виджета.
    4. Асинхронное получение объекта панели визуализации, на которой размещен виджет (c API управления панелью) - dashboard = widget.getDashboard(), где:

      • widget - объект виджета;
      • dashboard - возвращаемое значение, объект панели визуализации.
    5. Перечисление всех виджетов, размещенных на панели визуализации - dashboard.enumWidgets(widgetsCallback), где:

      • dashboard - объект панели визуализации;
      • widgetsCallback - callback-функция, которой первым аргументом передается объект с виджетами - function(idWidgetMap){...},
      • idWidgetMap - объект с виджетами, сопоставление идентификаторов и объектов виджетов {widgetId: widget, ...};
      • widgetId - уникальный идентификатор виджета;
      • widget - объект виджета.
          dashboard.enumWidgets(function(wMap){
              for(var wId in wMap){
                  console.log(wId + ':' + wMap[wId].getName());
              }
          });
    

Log in to reply