Описание

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

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

Пользовательский виджет "Картосхема"

Пользовательский виджет	Комментарии	Свойства
Speedometer	На панели справа выделены свойства, которые были настроены разработчиком так добавлены разработчиком в раздел Пользовательские свойства при создании виджета. Image RemovedПользовательский виджет "Sunkey"Image Added
Sankey	На панели справа выделены свойства, которые были настроены разработчиком так добавлены разработчиком в раздел Пользовательские свойства при создании виджета. Image RemovedImage Added

Настройка

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

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

1. Все необходимые для настроек свойства представить в виде переменных и добавить в "Расширенные свойства (JSON)"

   Image Removed

2. Добавить необходимые для настройки свойства.
   Для этого по каждому свойству:

   1. Кликнуть "Добавить свойство"

   2. Заменить "Название" - именно это название будет отображаться Пользователю в интерфейсе

   3. Заменить "myProperty" - это наименование переменной из "Расширенные свойства (JSON)"

   4. Выбрать тип свойства - в зависимости от выбранного типа будут открываться стандартные элементы настроек (перечень типов см. ниже в "Типы свойств")

   5. Удалить свойство из "Расширенные свойства (JSON)"

      Image Removed

3. Когда добавлены все необходимые свойства в "Пользовательские свойства" и удалены их аналоги их "Расширенные свойства (JSON)", нажмите "Сохранить"

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

   Image Removed

Типы свойств

Тип свойства

Описание

Как выглядит в интерфейсе

Строка

Ввод текста

Image Removed

Число

Счетчик для настройки числового значения

Image Removed

Логический

Чекбокс для выбора true/false

Image Removed

Выравнивание

Стандартные кнопки выравнивания Платформы

Image Removed

Цвет

Стандартный колорпикер Платформы с палитрой цветов

Image Removed

Шрифт

Стандартный набор шрифтов Платформы

Image Removed

Ограничения

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

   Image Added

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

   Image Added

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

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

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

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

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

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

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

     Image Added

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

   Image Added

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

   Image Added

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

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

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

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

   Image Added

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

   Image Added

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

Ограничения

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

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

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

📄 ссылка
📄 ссылка
📄 ссылка