Добавление свойств пользовательского виджета
Описание
При создании пользовательского виджета вы можете добавить дополнительные настройки, которые будут располагаться в разделе Пользовательские свойства настроек виджета. Это избавит от необходимости править код виджета при необходимости изменить какие-либо параметры.
Примеры возможных настроек:
Пользовательский виджет | Свойства |
---|---|
Speedometer | На панели справа выделены свойства, которые были добавлены разработчиком в раздел Пользовательские свойства при создании виджета. |
Sankey | На панели справа выделены свойства, которые были добавлены разработчиком в раздел Пользовательские свойства при создании виджета. |
Настройка
Пользовательские свойства
Чтобы добавить какие-либо свойства в раздел Пользовательские свойства настроек виджета, необходимо выполнить следующие шаги для каждого добавляемого свойства:
В окне редактирования свойства нажмите кнопку Добавить новое свойство:
В появившихся полях укажите название свойства, которое будет отображаться в интерфейсе, имя свойства, которое будет использоваться в коде виджета, тип данных и значение по умолчанию:
Доступны следующие типы данных:
Строка – любой текст (в консоли браузера значение выводится в формате строки).
Число – числовое значение (в консоли браузера значение выводится в формате числа).
Чекбокс – логический тип данных (в консоли браузера выводится
true
илиfalse
).Цвет – позволяет выбрать цвет по умолчанию с помощью стандартной палитры (в консоли браузера значение выводится в формате строки).
Шрифт – позволяет выбрать шрифт по умолчанию из стандартного набора шрифтов (в консоли браузера значение выводится в формате строки).
Выравнивание – позволяет задать выравнивание текста по умолчанию (в консоли браузера значение выводится в формате строки).
Для нашего виджета мы добавили следующие свойства:
Теперь необходимо “привязать” указанные свойства к коду виджета. Для этого вам нужно прописать имена свойств в соответствующих местах кода. В нашем примере это выглядит так:
Для того, чтобы виджет работал корректно, необходимо заменить в первой строке кода Highcharts.chart('container'
на Highcharts.chart(w.general.renderTo
После того, как выполнены все настройки, нажмите Готово:
Все указанные свойства будут отображаться в Пользовательских свойствах виджета.
Расширенные свойства
В дополнение к вышеописанным свойствам, вы также можете указать расширенные свойства JSON. Для этого необходимо сделать следующее:
Укажите какое-либо свойство в поле Расширенные свойства JSON. В нашем примере мы укажем тип диаграммы:
В коде виджета необходимо теперь “привязаться“ к этому свойству:
Тип виджета теперь будет определяться корректно.
Ограничения
Изменения состава свойств пользовательских виджетов не применяется к уже добавленным ранее виджетам. Если вы поменяли свойства в уже добавленном на дашборд виджете и хотите, чтобы пользовательские настройки стали доступны, то необходимо добавить виджет заново.
Смотрите также
На этой странице
Время чтения: 2 мин.
Нужна дополнительная помощь?