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

Описание

При создании пользовательского виджета вы можете добавить дополнительные настройки, которые будут располагаться в разделе Пользовательские свойства настроек виджета. Это избавит от необходимости править код виджета при необходимости изменить какие-либо параметры.

Примеры возможных настроек:

Пользовательский виджет

Свойства

Пользовательский виджет

Свойства

Speedometer

На панели справа выделены свойства, которые были добавлены разработчиком в раздел Пользовательские свойства при создании виджета.

speedometer.png

Sankey

На панели справа выделены свойства, которые были добавлены разработчиком в раздел Пользовательские свойства при создании виджета.

sankey-modified(1).png

Настройка

Пользовательские свойства

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

  1. В окне редактирования свойства нажмите кнопку Добавить новое свойство:

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

    Доступны следующие типы данных:

    • Строка – любой текст (в консоли браузера значение выводится в формате строки).

    • Число – числовое значение (в консоли браузера значение выводится в формате числа).

    • Чекбокс – логический тип данных (в консоли браузера выводится true или false).

    • Цвет – позволяет выбрать цвет по умолчанию с помощью стандартной палитры (в консоли браузера значение выводится в формате строки).

    • Шрифт – позволяет выбрать шрифт по умолчанию из стандартного набора шрифтов (в консоли браузера значение выводится в формате строки).

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

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

Для того, чтобы виджет работал корректно, необходимо заменить в первой строке кода Highcharts.chart('container' на Highcharts.chart(w.general.renderTo

  1. После того, как выполнены все настройки, нажмите Готово:

    Все указанные свойства будут отображаться в Пользовательских свойствах виджета.

Расширенные свойства

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

  1. Укажите какое-либо свойство в поле Расширенные свойства JSON. В нашем примере мы укажем тип диаграммы:

     

  2. В коде виджета необходимо теперь “привязаться“ к этому свойству:

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

Ограничения

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


Смотрите также

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