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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
Нажмите Готово, чтобы сохранить виджет:
Добавьте виджет на дашборд и перетащите данные в поля виджета.
В консоли браузера разверните ветку data: DataFrame, чтобы просмотреть структуру данных:

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

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

{
    "dataFrame": {
        "primaryData": {
            "keys": [
                "root"
            ],
            "values": [],
            "items": [
                {
                    "keys": [],
                    "values": [
                        "A. Datum",
                        13978.43
                    ],
                    "items": [],
                    "metadata": [
                        {
                            "columnName": "brandname",
                            "displayName": "brandname",
                            "dataType": "String"
                        },
                        {
                            "columnName": "unitcost",
                            "displayName": "unitcost",
                            "dataType": "Decimal"
                        }
                    ],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Adventure Works",
                        40201.01
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Contoso",
                        85927.66
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Fabrikam",
                        66288.43
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Litware",
                        53622.39
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Northwind Traders",
                        16605.8
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Proseware",
                        31646.86
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Southridge Video",
                        13429.62
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Tailspin Toys",
                        3122.45
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "The Phone Company",
                        18788.61
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                },
                {
                    "keys": [],
                    "values": [
                        "Wide World Importers",
                        28037.79
                    ],
                    "items": [],
                    "metadata": [],
                    "cols": [
                        "brandname",
                        "unitcost"
                    ]
                }
            ],
            "metadata": [],
            "cols": []
        },
        "secondaryData": null
    }
}

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

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

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

// Создаем таблицу
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);

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

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

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

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

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

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

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

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

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

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

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

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

Виджет исчезнет из набора виджетов.

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

1 О создании пользовательских виджетов
2 Добавление пользовательского виджета
3 Редактирование пользовательского виджета
4 Дублирование пользовательского виджета
5 Удаление пользовательского виджета

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

Видео

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

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

Visiology Platform 3.11