[comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # Конфигурация На этой странице описаны классы, которые можно использовать для создания представления конфигурации виджета с настраиваемыми полями конфигурации. Представление конфигурации виджета - это часть виджета, которая позволяет пользователю настраивать параметры виджета для [презентации](/presentation). [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### Виджет Основной класс виджетов, расширяет базовый класс всех виджетов информационной панели - *CWidget*. Требуется для переопределения поведения виджета по умолчанию. Класс *Widget* должен находиться в корневом каталоге виджета (например, *zabbix/ui/modules/my_custom_widget*). **Пример Widget.php** ```php [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm Класс *WidgetForm* расширяет класс по умолчанию *CWidgetForm* и содержит набор полей [*CWidgetField*](#cwidgetfield), которые необходимы для определения структуры хранения конфигурации виджета в базе данных и обработки ввода. Класс *WidgetForm* должен находиться в каталоге *includes*. Если класс имеет другое имя, это имя должно быть указано в параметре [*widget/form_class*](/devel/modules/file_structure/manifest#widget) в файле *manifest.json*. **пример includes/WidgetForm.php** ```php addField( (new CWidgetFieldMultiSelectItem('itemid', _('Item'))) ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK) ->setMultiple(false) ->setFilterParameter('numeric', true) ) ->addField( new CWidgetFieldTextBox('description', _('Description')) ) ->addField( (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000') ); } } ``` [comment]: # ({/e5aad37e-1ff26877}) [comment]: # ({3ca7a0e4-61f06fc3}) ### CWidgetFormView Класс *CWidgetFormView* необходим для определения логики представления полей, определенных в классе *WidgetForm*, а также для задания их внешнего вида и поведения при отображении в представлении конфигурации. Класс *CWidgetFormView* поддерживает следующие методы: - *addField()* — получает в качестве параметра экземпляр класса *CWidgetFieldView*; каждый класс [*CWidgetField*](#cwidgetfield) имеет соответствующий класс *CWidgetFieldView* для использования в представлении конфигурации виджета. - *includeJsFile()* — позволяет добавить файл JavaScript в представление конфигурации виджета. - *addJavaScript()* — позволяет добавить встроенный JavaScript, который будет выполнен сразу после загрузки представления конфигурации виджета. Класс *CWidgetFormView* должен находиться в каталоге *views*. **пример views/widget.edit.php** ```php addField( new CWidgetFieldMultiSelectItemView($data['fields']['itemid'], $data['captions']['items']['itemid']) ) ->addField( new CWidgetFieldTextBoxView($data['fields']['description']), 'js-advanced-configuration' ) ->addField( new CWidgetFieldColorView($data['fields']['chart_color']), 'js-advanced-configuration' ) ->includeJsFile('widget.edit.js.php') ->addJavaScript('my_widget_form.init('.json_encode([ 'color_palette' => CWidgetFieldGraphDataSet::DEFAULT_COLOR_PALETTE ], JSON_THROW_ON_ERROR).');') ->show(); ``` [comment]: # ({/3ca7a0e4-61f06fc3}) [comment]: # ({d7c94075-d1c62429}) ### JavaScript Класс JavaScript можно использовать для добавления динамического поведения и интерактивности в представление конфигурации виджета. Например, вы можете инициализировать палитру цветов, определенную в классе [*CWidgetFormView*](#cwidgetformview). Класс JavaScript должен быть загружен вместе с формой, поэтому на него следует ссылаться в классе [*CWidgetFormView*](#cwidgetformview) с помощью методов *includeJsFile()* и *addJavaScript()*. В приведенном ниже примере экземпляр одноэлементного класса сразу создается и сохраняется под именем *window.my_custom_widget_form*. Таким образом, открытие формы во второй раз приведет к воссозданию экземпляра. Класс JavaScript должен находиться в каталоге *views*. **пример views/widget.edit.js.php** ```php window.widget_lesson_gauge_chart_form = new class { init({color_palette}) { this._advanced_configuration = document.getElementById('adv_conf'); this._advanced_configuration.addEventListener('change', () => this.updateForm()); colorPalette.setThemeColors(color_palette); for (const colorpicker of jQuery('. input')) { jQuery(colorpicker).colorpicker(); } const overlay = overlays_stack.getById('widget_properties'); for (const event of ['overlay.reload', 'overlay.close']) { overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); }); } this.updateForm(); } updateForm() { const show_advanced_configuration = this._advanced_configuration.checked; for (const element of this._form.querySelectorAll('.js-advanced-configuration')) { element.style.display = show_advanced_configuration ? '' : 'none'; } } }; ``` [comment]: # ({/d7c94075-d1c62429}) [comment]: # ({e70cf9fd-708ecb6b}) ### CWidgetField Класс *CWidgetField* — это базовый класс, от которого наследуются все классы полей формы (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList* и т. д.). Классы, расширяющие *CWidgetField*, отвечают за получение, сохранение и проверку значений конфигурации виджета. Доступны следующие классы *CWidgetField*. |Класс *CWidgetField*|Тип поля базы данных|Описание| |----|----|----------| |*CWidgetFieldCheckBox*|int32|Одиночный флажок.| |*CWidgetFieldCheckBoxList*|array of int32|Несколько флажков в одном поле конфигурации.| |*CWidgetFieldColor*|string|Поле выбора цвета.| |*CWidgetFieldDatePicker*|string|Поле выбора даты.| |*CWidgetFieldIntegerBox*|int32|Поле для ввода целого числа. Может использоваться для настройки минимального и максимального значений.| |*CWidgetFieldLatLng*|string|Текстовое поле, позволяющее вводить через запятую широту, долготу и уровень масштабирования карты.| |*CWidgetFieldMultiSelect*|-|Базовый класс для полей множественного выбора, расширяемый всеми классами *CWidgetFieldMultiSelect\**.| |*CWidgetFieldMultiSelectAction*|ID|Поле множественного выбора для выбора действий из списка действий, определенных в *Alerts → Actions*.| |*CWidgetFieldMultiSelectGraph*|ID|Поле множественного выбора для выбора пользовательских графиков.| |*CWidgetFieldMultiSelectGraphPrototype*|ID|Поле множественного выбора для выбора прототипов пользовательских графиков.| |*CWidgetFieldMultiSelectGroup*|ID|Поле множественного выбора для выбора групп узлов сети.| |*CWidgetFieldMultiSelectHost*|ID|Поле множественного выбора для выбора узлов сети.| |*CWidgetFieldMultiSelectHostInventory*|array of int32|Поле множественного выбора для выбора полей инвентаря узла сети.| |*CWidgetFieldMultiSelectItem*|ID|Поле множественного выбора для выбора элементов данных.| |*CWidgetFieldMultiSelectItemPrototype*|ID|Поле множественного выбора для выбора прототипов элементов данных.| |*CWidgetFieldMultiSelectMap*|ID|Поле множественного выбора для выбора карт.| |*CWidgetFieldMultiSelectMediaType*|ID|Поле множественного выбора для выбора типов оповещений.| |*CWidgetFieldMultiSelectOverrideHost*|ID|Поле множественного выбора для выбора источника данных для узлов сети с панели или другого виджета.| |*CWidgetFieldMultiSelectService*|ID|Поле множественного выбора для выбора сервисов.| |*CWidgetFieldMultiSelectSla*|ID|Поле множественного выбора для выбора SLA.| |*CWidgetFieldMultiSelectUser*|ID|Поле множественного выбора для выбора пользователей.| |*CWidgetFieldNavTree*|array of (multiple mixed)|Сохраняет структуру дерева навигации по картам для использования в виджете *Map navigation tree*.| |*CWidgetFieldNumericBox*|string|Поле для ввода числа с плавающей точкой.| |*CWidgetFieldPatternSelect*|-|Базовый класс для полей выбора по шаблону, расширяемый всеми классами *CWidgetPatternSelect\**.| |*CWidgetFieldPatternSelectHost*|string|Поле множественного выбора для выбора узлов сети. Поддерживает шаблоны имен узлов сети.| |*CWidgetFieldPatternSelectItem*|string|Поле множественного выбора для выбора элементов данных. Поддерживает шаблоны имен элементов данных.| |*CWidgetFieldRadioButtonList*|int32|Группа переключателей, состоящая из одного или нескольких переключателей.| |*CWidgetFieldRangeControl*|int32|Ползунок для выбора значения целого типа.| |*CWidgetFieldReference*|string|Сохраняет уникальный идентификатор этого виджета на панели; используется для взаимодействия между виджетами.| |*CWidgetFieldSelect*|int32|Выпадающий список.| |*CWidgetFieldSeverities*|array of int32|*CWidgetFieldCheckBoxList* с предустановленными уровнями важности триггеров.| |*CWidgetFieldSparkline*|array of (multiple mixed)|Позволяет настраивать график sparkline.| |*CWidgetFieldTags*|array of (string, int32, string)|Позволяет настраивать одну или несколько строк фильтра тегов.| |*CWidgetFieldTextArea*|string|Многострочное текстовое поле.| |*CWidgetFieldTextBox*|string|Текстовое поле для ввода одной строки.| |*CWidgetFieldThresholds*|array of (string, string)|Позволяет настраивать пары цвет и число.| |*CWidgetFieldTimePeriod*|array of string|Поле выбора временного периода.| |*CWidgetFieldTimeZone*|string|Выпадающий список с часовыми поясами.| |*CWidgetFieldUrl*|string|Текстовое поле, позволяющее вводить URL.| ::: noteclassic Максимальная длина для полей `int32` составляет 10 символов, для полей `ID` — 20 символов, а для полей `string` — 2048 символов. Для составных типов (например, `array of (string, int32, string)`) ограничение применяется к каждому элементу отдельно. Ограничения длины для отдельных полей можно задать с помощью методов, таких как `setMaxLength()`. ::: [comment]: # ({/e70cf9fd-708ecb6b})