Ова страница описује класе које се могу користити за креирање приказа конфигурације виџета са прилагођеним конфигурационим пољима. Приказ конфигурације виџета је део виџета који омогућава кориснику да конфигурише параметре виџета за presentation.
Примарна класа виџета, проширује основну класу свих виџета контролне табле - CWidget. Обавезно за замену подразумеваног понашања виџета.
Класа Виџет треба да се налази у основном директоријуму виџета (на пример, zabbix/ui/modules/my_custom_widget).
Пример Widget.php
<?php
namespace Modules\MyCustomWidget;
use Zabbix\Core\CWidget;
class Widget extends CWidget {
public const MY_CONSTANT = 0;
public function getTranslationStrings(): array {
return [
'class.widget.js' => [
'No data' => _('No data')
]
];
}
}
Класа WidgetForm проширује подразумевану класу CWidgetForm и садржи скуп поља CWidgetField који су потребни за дефинисање структуре складиштења конфигурације виџета у бази података и руковање валидацијом уноса.
Класа WidgetForm би требало да се налази у директоријуму includes. Ако класа има другачије име, име треба навести у параметру widget/form_class у датотеци manifest.json.
Пример includes/WidgetForm.php
<?php
namespace Modules\MyCustomWidget\Includes;
use Modules\MyCustomWidget\Widget;
use Zabbix\Widgets\{
CWidgetField,
CWidgetForm
};
use Zabbix\Widgets\Fields\{
CWidgetFieldMultiSelectItem,
CWidgetFieldTextBox,
CWidgetFieldColor
};
class WidgetForm extends CWidgetForm {
public const DEFAULT_COLOR_PALETTE = [
'FF465C', 'B0AF07', '0EC9AC', '524BBC', 'ED1248', 'D1E754', '2AB5FF', '385CC7', 'EC1594',
'BAE37D',
'6AC8FF', 'EE2B29', '3CA20D', '6F4BBC', '00A1FF', 'F3601B', '1CAE59', '45CFDB', '894BBC',
'6D6D6D'
];
public function addFields(): self {
return $this
->addField(
(new CWidgetFieldMultiSelectItem('itemid', _('Item')))
->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
->setMultiple(false)
)
->addField(
new CWidgetFieldTextBox('description', _('Description'))
)
->addField(
(new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000')
);
}
}
Класа CWidgetFormView је потребна за одређивање логике презентације поља дефинисаних у класи WidgetForm, одређивање њиховог изгледа и понашања када се приказују у конфигурационом приказу.
Класа CWidgetFormView подржава следеће методе:
Класа CWidgetFormView би требало да се налази у директоријуму * views*.
пример views/widget.edit.php
<?php
/**
* My custom widget form view.
*
* @var CView $this
* @var array $data
*/
use Modules\MyCustomWidget\Includes\WidgetForm;
(new CWidgetFormView($data))
->addField(
(new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))->setPopupParameter('numeric',
true)
)
->addFieldset(
(new CWidgetFormFieldsetCollapsibleView(_('Advanced configuration')))
->addField(
new CWidgetFieldTextBoxView($data['fields']['description'])
)
->addField(
new CWidgetFieldColorView($data['fields']['chart_color'])
)
)
->includeJsFile('widget.edit.js.php')
->addJavaScript('my_custom_widget_form.init('.json_encode([
'color_palette' => WidgetForm::DEFAULT_COLOR_PALETTE
]).');')
->show();
JavaScript класа се може користити за додавање динамичког понашања и интерактивности у приказ конфигурације виџета. На пример, можете иницијализовати бирач боја, дефинисан у класи CWidgetFormView.
JavaScript класу треба учитати са формом, стога је потребно да буде референцирана у класи CWidgetFormView коришћењем метода includeJsFile() и addJavaScript().
У примеру испод, инстанца синглтон класе се одмах креира и чува под именом window.my_custom_widget_form. Дакле, отварање обрасца по други пут ће поново креирати инстанцу.
JavaScript класа би требало да се налази у директоријуму views.
пример views/widget.edit.js.php
<?php
use Modules\MyCustomWidget\Widget;
?>
window.my_custom_widget_form = new class {
init({color_palette})
{colorPalette.setThemeColors(color_palette);
for (const colorpicker of jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> 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'); });
}
}
};
Класа CWidgetField је основна класа из које се наслеђују све класе поља обрасца (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList, итд.). Класе које проширују CWidgetField су одговорне за пријем, чување и проверу вредности конфигурације виџета.
Доступне су следеће класе CWidgetField.
CWidgetField class | Database field type | Description |
---|---|---|
CWidgetFieldCheckBox | int32 | Једно поље за потврду. |
CWidgetFieldCheckBoxList | array of int32 | Више поља за потврду под једним конфигурационим пољем. |
CWidgetFieldColor | string | Поље за избор боје. |
CWidgetFieldDatePicker | string | Поље за избор датума. |
CWidgetFieldHostPatternSelect | string | Поље за вишеструки избор које омогућава одабир једног или више домаћина. Подржава дефинисање шаблона имена домаћина (сви одговарајући домаћини ће бити изабрани). |
CWidgetFieldIntegerBox | int32 | Поље за унос целог броја. Може се користити за конфигурисање минималних и максималних вредности. |
CWidgetFieldLatLng | string | Текстуално поље које омогућава да унесете географску ширину, дужину и ниво зумирања мапе раздвојене зарезима. |
CWidgetFieldMultiSelectAction | ID | Поље за вишеструки избор за избор радњи (са листе радњи дефинисаних у Упозорења → Акције). |
CWidgetFieldMultiSelectGraph | ID | Поље за више избора за избор прилагођених графикона. |
CWidgetFieldMultiSelectGraphPrototype | ID | Поље за вишеструки избор за избор прилагођених прототипова графикона. |
CWidgetFieldMultiSelectGroup | ID | Поље за вишеструки избор за одабир група домаћина. |
CWidgetFieldMultiSelectHost | ID | Поље за вишеструки избор за домаћина. |
CWidgetFieldMultiSelectItem | ID | Поље за вишеструки избор ставки. |
CWidgetFieldMultiSelectItemPattern | ID | Поље за вишеструки избор образаца ставки. |
CWidgetFieldMultiSelectItemPrototype | ID | Поље за вишеструки избор прототипова ставки. |
CWidgetFieldMultiSelectMap | ID | Поље за вишеструки избор мапа. |
CWidgetFieldMultiSelectMediaType | ID | Поље за вишеструки избор типова медија. |
CWidgetFieldMultiSelectOverrideHost | ID | Поље за вишеструки избор података (контролна табла или други виџет) који садржи домаћина за који виџет може да прикаже податке. |
CWidgetFieldMultiSelectService | ID | Поље за вишеструки избор услуга. |
CWidgetFieldMultiSelectSla | ID | Поље за вишеструки избор SLA. |
WidgetFieldMultiSelectUser | ID | Поље за вишеструки одабир корисника. |
CWidgetFieldNumericBox | string | Поље за унос децималног броја. |
CWidgetFieldRadioButtonList | int32 | Група радио дугмади која се састоји од једног или више радио дугмета. |
CWidgetFieldRangeControl | int32 | Slider за избор вредности целобројног типа. |
CWidgetFieldReference | string | Креира јединствени идентификатор за овај виџет на контролној табли. Користи се за референцирање овог виџета из других виџета. |
CWidgetFieldSelect | int32 | Поље са падајућом листом за одабир. |
CWidgetFieldSeverities | array of int32 | CWidgetFieldCheckBoxList унапред подешен са озбиљношћу окидача. |
CWidgetFieldTags | array of (string, int32, string) | Омогућава конфигурисање једног или више редова за филтрирање по ознакама. |
CWidgetFieldTextArea | string | Текстуално поље за унос текста у више редова. |
CWidgetFieldTextBox | string | Текстуално поље за унос текста у једном реду. |
CWidgetFieldTimePeriod | низ string-a | Поље за избор временског периода. |
CWidgetFieldTimeZone | string | Падајући мени са временским зонама. |
CWidgetFieldThresholdsCWidgetFieldTimeZone | array of (string, string) | Омогућава конфигурисање парова боја и бројева. |
CWidgetFieldUrl | string | Текстуално поље које дозвољава унос URL адреса. |
Следеће класе CWidgetField су креиране за одређене виџете. Ове класе имају врло специфичне случајеве употребе, али се такође могу поново користити ако је потребно.
CWidgetField class | Database field type | Description |
---|---|---|
CWidgetFieldColumnsList | array of (multiple mixed) | За виџет Најважнији домаћини. Направите табелу са прилагођеним колонама дозвољених типова. |
CWidgetFieldNavTree | string | За виџет Стабло навигације мапе. Замењује приказ виџета у режиму уређивања са стаблом избора мапе. |