Сравнение страниц

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

в диалоге создания виджета вы присваиваете ему имя и добавляете JavaScript код виджета;
добавляете необходимые поля;
сохраняете виджет.

Ниже подробная инструкция как это сделать.

Добавление пользовательского виджета

Для добавления пользовательского виджета необходимо выполнить следующие шаги:

Откройте Visiology Designer и перейдите в необходимый дашборд (или создайте новый). В нашем примере мы воспользуемся дашбордом Статистика продаж:

Image Removed

На вкладке Виджет нажмите кнопку с тремя точками и кликните Создать виджет:

Image Removed

В открывшемся диалоге укажите название и код виджета (JavaScript), загрузите иконку виджета, чтобы его можно было легко найти среди прочих пользовательских виджетов, а также добавьте поля виджета.

Для загрузки иконки виджета выполните следующие шаги:

Нажмите на кнопку загрузки иконки:
Image Removed
В диалоге загрузки нажмите Выбрать файл и выберите требуемое изображение с помощью стандартного окна выбора файлов:
Image Removed
Загружаемая иконка должна быть квадратной.

Для добавления поля выполните следующие шаги:

Нажмите кнопку Добавить поле;

Укажите название поля и описание (описание будет отображаться в качестве подсказки при наведении мышки на название поля).

Image Removed

Поля служат для настройки визуализации. Они могут принимать числовые и строковые значения, и могут быть использованы, например, для визуализации значений осей X и Y. Система позволяет добавить до двух полей (одно или два), но вы также может не добавлять ни одного поля (в зависимости от того, какого рода виджет вы создаете).

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

Для сохранения введенных данных нажмите кнопку Готово. Виджет появится на вкладке Виджет среди прочих добавленных пользовательских виджетов:

Image Removed

Теперь вы можете работать с ним как с любым другим стандартным виджетом (см. раздел Работа с виджетами).

Image Removed

Пример кода виджета

Ниже представлен код диаграммы, который мы использовали в нашем примере:

Блок кода

var data = w.data.primaryData.items.map(function (item) {
  return item.keys.concat(item.values);
});

Highcharts.chart(w.general.renderTo, {
    series: [{
        keys: ['from', 'to', 'weight'],
        data: data,
        type: 'sankey',
        name: 'Цены'
    }]
});

Для получения структуры данных, которую вы можете использовать в качестве примера при создании кода виджета, сделайте следующее:

Нажмите клавишу F12, чтобы отобразить консоль браузера.
Создайте виджет как описано выше и дайте ему имя.
В поле ввода кода виджета введите команду console.log(w);
Добавьте поля, например, X и Y.
Нажмите Готово, чтобы сохранить виджет:
Image Removed
Добавьте виджет на дашборд и перетащите данные в поля виджета.
В консоли браузера разверните ветку data: DataFrame, чтобы просмотреть структуру данных:
Image Removed

Пример формата данных виджета с одним полем

Ниже представлен пример формата данных, которые приходят в переменную w.data при добавлении столбца в пользовательский виджет с одним полем:

{ "dataFrame": { "primaryData": {

Блок кода

Примечание

После обновления платформы до версии 3.11 все добавленные пользовательские виджеты станут общими и будут недоступны для редактирования обычными пользователями. Чтобы получить возможность редактировать виджет, потребуется скопировать его на панель виджетов рабочей области (см. ниже).

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

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

О создании пользовательских виджетов

Вы можете расширить стандартный набор доступных виджетов, добавив пользовательские виджеты с необходимой вам функциональностью. Такие виджеты могут быть добавлены как глобальным администратором, так и обычными пользователями платформы (за исключением пользователей с ролью “Зритель”).

Информация

Виджеты, добавленные глобальным администратором, становятся общими и доступны всем пользователям платформы. Такие виджеты могут удаляться и редактироваться только глобальным администратором.
Виджеты, добавленные пользователями, будут доступны только в рамках текущей рабочей области, и другие пользователи, не имеющие доступа к этой рабочей области, не смогут увидеть их (кроме глобального администратора). Редактировать и удалять эти виджеты могут все пользователи, кто имеет доступ к этой рабочей области, кроме пользователей с ролью “Зритель”.

Image Added

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

Информация

Виджеты, которые доступны в определенной рабочей области, не будут видны в других рабочих областях. При необходимости получить доступ к виджету из другой рабочей области:
- попросите глобального администратора добавить нужный виджет – в этом случае он станет общим;
- скачайте виджет и импортируйте его в требуемую рабочую область.
Если вы хотите отредактировать общий виджет под свои задачи, но вы не являетесь глобальным администратором, вы можете дублировать виджет на панель виджетов своей рабочей области и внести в него необходимые правки (см. ниже).

Процедура добавления пользовательского виджета одинакова для всех пользователей (включая глобального администратора) и выглядит следующим образом:

В диалоге создания виджета вы присваиваете ему имя и добавляете JavaScript код виджета.
Добавляете необходимые поля.
Сохраняете виджет.

Ниже приведена подробная инструкция по выполнению всех этих шагов.

Добавление пользовательского виджета

В нашем примере мы рассмотрим добавление виджета от лица глобального администратора.

Для добавления пользовательского виджета необходимо выполнить следующие шаги:

Откройте Visiology Designer и перейдите в необходимый дашборд (или создайте новый). В нашем примере мы воспользуемся дашбордом Статистика продаж:
Image Added
На вкладке Виджет нажмите кнопку с тремя точками и выберите Создать виджет:
Image Added
В открывшемся диалоге укажите название и код виджета (JavaScript), загрузите иконку виджета, чтобы его можно было легко найти среди прочих пользовательских виджетов, а также добавьте поля виджета.
- Для загрузки иконки виджета выполните следующие шаги:
  - Нажмите на кнопку загрузки иконки:
    Image Added
  - В диалоге загрузки нажмите Выбрать файл и выберите требуемое изображение с помощью стандартного окна выбора файлов:
    Image Added
    Загружаемая иконка должна быть квадратной.
- Для добавления поля выполните следующие шаги:
  - Нажмите кнопку Добавить поле;
  - Укажите название поля и описание (описание будет отображаться в качестве подсказки при наведении мышки на название поля).
    Image Added
    
    Поля служат для настройки визуализации. Они могут принимать числовые и строковые значения, и могут быть использованы, например, для визуализации значений осей X и Y. Система позволяет добавить до двух полей (одно или два), но вы также может не добавлять ни одного поля (в зависимости от того, какого рода виджет вы создаете).
    Для удаления поля нажмите напротив него кнопку с изображением корзины.
Для сохранения введенных данных нажмите кнопку Готово. Виджет появится на вкладке Виджет в секции Общие:
Image Added
Теперь пользователи платформы смогут работать с ним как с любым другим стандартным виджетом (см. раздел Работа с виджетами).
Image Added

Пример кода виджета

Ниже представлен код диаграммы, который мы использовали в нашем примере:

Блок кода

var data = w.data.primaryData.items.map(function (item) {
  return item.keys.concat(item.values);
});

Highcharts.chart(w.general.renderTo, {
    series: [{
          "keys": ['from', 'to', 'weight'],
        data: data,
    "root"    type: 'sankey',
       ], name: 'Цены'
          "values": [],
            "items": [
                {
                    "keys": [],
           }]
});

Для получения структуры данных, которую вы можете использовать в качестве примера при создании кода виджета, сделайте следующее:

Нажмите клавишу F12, чтобы отобразить консоль браузера.
Создайте виджет как описано выше и дайте ему имя.
В поле ввода кода виджета введите команду console.log(w);
Добавьте поля, например, X и Y.
Нажмите Готово, чтобы сохранить виджет:
Image Added
Добавьте виджет на дашборд и перетащите данные в поля виджета.
В консоли браузера разверните ветку data: DataFrame, чтобы просмотреть структуру данных:
Image Added

Пример формата данных виджета с одним полем

Ниже представлен пример формата данных, которые приходят в переменную w.data при добавлении столбца в пользовательский виджет с одним полем:

Блок кода

{
    "dataFrame": {
        "valuesprimaryData": {
            "keys": [
                "root"
           "A. Datum"],
            "values": [],
          13978.43  "items": [
                {
],                     "itemskeys": [],
                    "metadatavalues": [
                         {"A. Datum",
                        13978.43
   "columnName": "brandname",                ],
            "displayName": "brandname",       "items": [],
                    "dataTypemetadata": "String"[
                        },
                        {
                            "columnName": "unitcostbrandname",
                            "displayName": "unitcostbrandname",
                            "dataType": "DecimalString"
                        },
                    ],     {
               "cols": [            "columnName": "unitcost",
           "brandname",                         "displayName": "unitcost",
                    ]        "dataType": "Decimal"
       },                 {}
                    "keys": [],
                    "valuescols": [
                        "Adventure Worksbrandname",
                        40201.01"unitcost"
                    ],
                },
            "items": [],    {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameAdventure Works",
                        "unitcost"40201.01
                    ],
                },           "items": [],
     {                     "keys"metadata": [],
                    "valuescols": [
                        "Contosobrandname",
                        85927.66"unitcost"
                    ],
                },
            "items": [],    {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameContoso",
                        "unitcost"85927.66
                    ],
                },                 {"items": [],
                    "keysmetadata": [],
                    "valuescols": [
                        "Fabrikambrandname",
                        66288.43"unitcost"
                    ],
                },
              "items": [],  {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameFabrikam",
                        "unitcost"66288.43
                    ],
                },    "items": [],
           {                     "keys""metadata": [],
                    "valuescols": [
                        "Litwarebrandname",
                        53622.39"unitcost"
                    ],
                },
               "items": [], {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameLitware",
                        "unitcost"53622.39
                    ],
                },    "items": [],
           {         "metadata": [],
          "keys": [],          "cols": [
           "values": [            "brandname",
            "Northwind Traders",           "unitcost"
             16605.8       ]
             ],   },
                 "items": [],{
                     "metadatakeys": [],
                    "colsvalues": [
                        "brandnameNorthwind Traders",
                        "unitcost"16605.8
                    ],
                },    "items": [],
           {         "metadata": [],
          "keys": [],         "cols": [
          "values": [             "brandname",
           "Proseware",             "unitcost"
           31646.86         ]
           ],     },
               "items": [], {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameProseware",
                        "unitcost"31646.86
                    ],
                },    "items": [],
           {         "metadata": [],
          "keys": [],          "cols": [
           "values": [            "brandname",
            "Southridge Video",           "unitcost"
             13429.62       ]
             ],   },
                 "items": [],{
                     "metadatakeys": [],
                    "colsvalues": [
                        "brandnameSouthridge Video",
                        "unitcost"13429.62
                    ],
                },    "items": [],
           {         "metadata": [],
          "keys": [],         "cols": [
          "values": [             "brandname",
           "Tailspin Toys",            "unitcost"
            3122.45        ]
            ],    },
                "items": [],{
                     "metadatakeys": [],
                    "colsvalues": [
                        "brandnameTailspin Toys",
                        "unitcost"3122.45
                    ],
                },    "items": [],
           {         "metadata": [],
          "keys": [],         "cols": [
          "values": [             "brandname",
           "The Phone Company",           "unitcost"
             18788.61       ]
             ],   },
                {
"items": [],                     "metadatakeys": [],
                    "colsvalues": [
                        "brandnameThe Phone Company",
                        "unitcost"18788.61
                    ],
                },    "items": [],
           {
                    "keysmetadata": [],
                    "valuescols": [
                        "Wide World Importersbrandname",
                        28037.79"unitcost"
                    ],
                },
               "items": [], {
                    "metadatakeys": [],
                    "colsvalues": [
                        "brandnameWide World Importers",
                        "unitcost"28037.79
                    ],
                }    "items": [],
       ],             "metadata": [],
                    "cols": []
                        }"brandname",
        "secondaryData": null                "unitcost"
                  }
}

Данный формат используется, начиная с версии 3.6. В новом формате значения из keys перенесены в values, а metadata заполняется в первом item:

Image Removed

Пример кода таблицы в пользовательском виджете

Ниже представлен пример кода таблицы в пользовательском виджете, у которого одно поле для добавления данных:

Блок кода

// Создаем таблицу
var table = $('<table style="border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed;">');

// Создаем заголовок
var thead = $('<thead>');
var headerRow = $('<tr>');
w.data.primaryData.items[0].metadata.forEach(function (m) {
    headerRow.append($('<th>').text(m.displayName));
});
thead.append(headerRow);

// Добавляем заголовок к таблице
table.append(thead);

// Создаем тело таблицы
var tbody = $('<tbody>');

// Добавляем строки и ячейки
w.data.primaryData.items.forEach(function (item) {
    var row = $('<tr>');
    item.values.forEach(function (value) {
        row.append($('<td>').text(value));
    });
    tbody.append(row);
});

// Добавляем тело к таблице
table.append(tbody);

// Добавляем таблицу к body документа
var container = $('<div style="overflow: auto; width: 100%; height: 100%;"></div>')
container.append(table);
$('#' + w.general.renderTo).append(container);

Редактирование пользовательского виджета

Для того, чтобы изменить параметры пользовательского виджета, необходимо выполнить следующие шаги:

На вкладке Виджет кликните правой кнопкой мыши на виджете, который хотите отредактировать, и выберите Редактировать в выпадающем меню:
Image Removed
В открывшемся окне произведите необходимые изменения и нажмите кнопку Готово:
Image Removed

Примечание

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

Вы можете сделать код добавленного виджета редактируемым (по умолчанию изменять код виджета запрещено). Для этого необходимо сделать следующее:

Сохраните дашборд с добавленным пользовательским виджетом, нажав Файл > Сохранить в левом верхнем углу:
Image Removed
Перейдите на вкладку Оформление:
Image Removed
Разверните общие настройки и активируйте опцию Разрешить редактирование кода (в диалоге подтверждения нажмите Да):
Image Removed
Сохраните изменения, нажав Файл > Сохранить в левом верхнем углу:
Image Removed
Нажмите кнопку с двойными стрелками в нижней части экрана, чтобы открыть редактор кода:
Image Removed
Внесите необходимые изменения в коде и нажмите Выполнить код:
Image Removed
Нажмите Файл > Сохранить в левом верхнем углу экрана, чтобы сохранить изменения.

Удаление пользовательского виджета

  ]
                }
            ],
            "metadata": [],
            "cols": []
        },
        "secondaryData": null
    }
}

Данный формат используется, начиная с версии 3.6. В новом формате значения из keys перенесены в values, а metadata заполняется в первом item:

Image Added

Пример кода таблицы в пользовательском виджете

Ниже представлен пример кода таблицы в пользовательском виджете, у которого одно поле для добавления данных:

Блок кода

// Создаем таблицу
var table = $('<table style="border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed;">');

// Создаем заголовок
var thead = $('<thead>');
var headerRow = $('<tr>');
w.data.primaryData.items[0].metadata.forEach(function (m) {
    headerRow.append($('<th>').text(m.displayName));
});
thead.append(headerRow);

// Добавляем заголовок к таблице
table.append(thead);

// Создаем тело таблицы
var tbody = $('<tbody>');

// Добавляем строки и ячейки
w.data.primaryData.items.forEach(function (item) {
    var row = $('<tr>');
    item.values.forEach(function (value) {
        row.append($('<td>').text(value));
    });
    tbody.append(row);
});

// Добавляем тело к таблице
table.append(tbody);

// Добавляем таблицу к body документа
var container = $('<div style="overflow: auto; width: 100%; height: 100%;"></div>')
container.append(table);
$('#' + w.general.renderTo).append(container);

Редактирование пользовательского виджета

Примечание
Общие виджеты могут быть изменены только глобальным администратором. Виджеты рабочей области могут быть изменены пользователями с любой ролью, за исключением роли «Зритель».

В нашем примере мы будем редактировать виджет от лица глобального администратора.

Для того, чтобы изменить параметры пользовательского виджета, необходимо выполнить следующие шаги:

На вкладке Виджет кликните правой кнопкой мыши на виджете, который хотите отредактировать, и выберите Редактировать в выпадающем меню:
Image Added
В открывшемся окне произведите необходимые изменения и нажмите кнопку Готово:
Image Added

Примечание

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

Вы можете сделать код добавленного виджета редактируемым (по умолчанию изменять код виджета запрещено). Для этого необходимо сделать следующее:

Сохраните дашборд с добавленным пользовательским виджетом, нажав Файл > Сохранить в левом верхнем углу:
Image Added
Перейдите на вкладку Оформление:
Image Added
Разверните общие настройки и активируйте опцию Разрешить редактирование кода (в диалоге подтверждения нажмите Да):
Image Added
Сохраните изменения, нажав Файл > Сохранить в левом верхнем углу:
Image Added
Нажмите кнопку с двойными стрелками в нижней части экрана, чтобы открыть редактор кода:
Image Added
Внесите необходимые изменения в коде и нажмите Выполнить код. В нашем примере мы изменили набор цветов:
Image Added
Нажмите Файл > Сохранить в левом верхнем углу экрана, чтобы сохранить изменения.

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

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

Щелкните правой мышью виджет, который вы хотите продублировать, и выберите в выпадающем меню Дублировать:
Image Added
В открывшемся окне нажмите Готово.
Вы можете внести изменения на этом шаге, либо сделать это позже.
Image Added
Скопированный виджет появится в секции “В этой рабочей области”:
Image Added

Удаление пользовательского виджета

Примечание
Общие виджеты могут быть удалены только глобальным администратором. Виджеты рабочей области могут быть удалены пользователями с любой ролью, за исключением роли «Зритель».

Для удаления пользовательского виджета выполните следующие шаги:

На вкладке Виджет кликните щелкните правой клавишей мыши на виджете, который хотите удалить, и выберите Удалить в выпадающем меню:
Image RemovedImage Added
В диалоге подтверждения нажмите кнопку Удалить:
Image RemovedImage Added
Виджет исчезнет из набора виджетов.

На этой странице

Оглавление

🕑 Время чтения: 3 мин.

Видео

custom-widget.mp4

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.

Версия	Старая версия 1	Новая версия Текущий
Изменения, внесенные	Эдуард Столяр	Эдуард Столяр
Сохранено	нояб. 25, 2024	февр. 01, 2025

Сравнение версий

Ключ

Добавление пользовательского виджета

Пример кода виджета

Пример формата данных виджета с одним полем

О создании пользовательских виджетов

Добавление пользовательского виджета

Пример кода виджета

Пример формата данных виджета с одним полем

Пример кода таблицы в пользовательском виджете

Редактирование пользовательского виджета

Пример кода таблицы в пользовательском виджете

Редактирование пользовательского виджета

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

Удаление пользовательского виджета