[comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # Konfiguration Auf dieser Seite werden Klassen beschrieben, die zum Erstellen einer Widget-Konfigurationsansicht mit benutzerdefinierten Konfigurationsfeldern verwendet werden können. Die Widget-Konfigurationsansicht ist der Teil des Widgets, der es dem Benutzer ermöglicht, Widget-Parameter für [Präsentation](/Präsentation) zu konfigurieren. [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### Widget Primäre Widget-Klasse, erweitert die Basisklasse aller Dashboard-Widgets - *CWidget*. Erforderlich, um das Standardverhalten des Widgets zu überschreiben. Die Klasse *Widget* sollte sich im Stammverzeichnis des Widgets befinden (zum Beispiel, *zabbix/ui/modules/my_custom_widget*). **Widget.php Beispiel** ```php [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm Die Klasse *WidgetForm* erweitert die Standardklasse *CWidgetForm* und enthält einen Satz von [*CWidgetField*](#cwidgetfield) Feldern welche für die Definition der Speicherstruktur der Widget-Konfiguration in der Datenbank und für die Eingabevalidierung erforderlich sind. Die Klasse *WidgetForm* sollte sich im Verzeichnis *includes* befinden. Wenn die Klasse einen anderen Namen hat, sollte der Name im Parameter [*widget/form_class*](/devel/modules/file_structure/manifest#widget) in der Datei *manifest.json* angegeben werden. **includes/WidgetForm.php Beispiel** ```php 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') ); } } ``` [comment]: # ({/e5aad37e-1ff26877}) [comment]: # ({3ca7a0e4-61f06fc3}) ### CWidgetFormView Die Klasse *CWidgetFormView* wird benötigt, um die Darstellungslogik für die in der Klasse *WidgetForm* definierten Felder festzulegen, welche das Aussehen und Verhalten bei der Darstellung in der Konfigurationsansicht definieren. Die Klasse *CWidgetFormView* unterstützt die folgenden Methoden: - *addField()* - erhält eine Instanz der Klasse *CWidgetFieldView* als Parameter; jede [*CWidgetField*](#cwidgetfield) Klasse hat eine entsprechende *CWidgetFieldView* Klasse zur Verwendung in der Widget-Konfigurationsansicht. - *addFieldset()* - empfängt eine Instanz der Klasse *CWidgetFieldsGroupView*, die Felder in einem zusammenklappbaren Container kombiniert. - *addFieldsGroup()* - erhält eine Instanz von *CWidgetFormFieldsetCollapsibleView*, die Felder visuell (mit einem Rahmen) zu einer Gruppe zusammenfasst. - *includeJsFile()* - ermöglicht das Hinzufügen einer JavaScript-Datei zur Widget-Konfigurationsansicht. - *addJavaScript()* - ermöglicht das Hinzufügen von Inline-JavaScript, das ausgeführt wird, sobald die Konfigurationsansicht des Widgets geladen wird. Die Klasse *CWidgetFormView* sollte sich im Verzeichnis *views* befinden. **views/widget.edit.php Beispiel** ```php 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(); ``` [comment]: # ({/3ca7a0e4-61f06fc3}) [comment]: # ({d7c94075-d1c62429}) ### JavaScript Eine JavaScript-Klasse kann verwendet werden, um der Widget-Konfigurationsansicht dynamisches Verhalten und Interaktivität hinzuzufügen. Sie können zum Beispiel einen Farbwähler initialisieren, der in der Klasse [*CWidgetFormView*](#cwidgetformview) definiert ist. Die JavaScript-Klasse sollte mit dem Formular geladen werden, daher sollte sie in der Klasse [*CWidgetFormView*](#cwidgetformview) mit den Methoden *includeJsFile()* und *addJavaScript()* referenziert werden. Im folgenden Beispiel wird sofort eine Singleton-Klasseninstanz erstellt und unter dem Namen *window.my_custom_widget_form* gespeichert. Wenn Sie also das Formular zum zweiten Mal öffnen, wird die Instanz neu erstellt. Die JavaScript-Klasse sollte sich im Verzeichnis *views* befinden. **views/widget.edit.js.php Beispiel** ```php window.my_custom_widget_form = new class { init({color_palette}) { 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'); }); } } }; ``` [comment]: # ({/d7c94075-d1c62429}) [comment]: # ({e70cf9fd-708ecb6b}) ### CWidgetField Die Klasse *CWidgetField* ist eine Basisklasse, von der alle Formularfeldklassen (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList* usw.) abgeleitet werden. Klassen, die *CWidgetField* erweitern, sind dafür verantwortlich, Konfigurationswerte von Widgets zu empfangen, zu speichern und zu validieren. Die folgenden *CWidgetField*-Klassen sind verfügbar. |CWidgetField class|Database field type|Description| |----|----|----------| |*CWidgetFieldCheckBox*|int32|Einzelnes Kontrollkästchen.| |*CWidgetFieldCheckBoxList*|array of int32|Mehrere Kontrollkästchen unter einem einzelnen Konfigurationsfeld.| |*CWidgetFieldColor*|string|Feld zur Farbauswahl.| |*CWidgetFieldDatePicker*|string|Feld zur Datumsauswahl.| |*CWidgetFieldIntegerBox*|int32|Feld zur Eingabe einer Ganzzahl. Kann zur Konfiguration von Minimal- und Maximalwerten verwendet werden.| |*CWidgetFieldLatLng*|string|Textfeld, in das durch Kommas getrennte Werte für Breitengrad, Längengrad und Kartenzoomstufe eingegeben werden können.| |*CWidgetFieldMultiSelect*|-|Basisklasse für Multiselect-Felder, erweitert durch alle *CWidgetFieldMultiSelect\**-Klassen.| |*CWidgetFieldMultiSelectAction*|ID|Multiselect-Feld zur Auswahl von Aktionen aus der Liste der in *Alerts → Actions* definierten Aktionen.| |*CWidgetFieldMultiSelectGraph*|ID|Multiselect-Feld zur Auswahl benutzerdefinierter Diagramme.| |*CWidgetFieldMultiSelectGraphPrototype*|ID|Multiselect-Feld zur Auswahl benutzerdefinierter Diagrammprototypen.| |*CWidgetFieldMultiSelectGroup*|ID|Multiselect-Feld zur Auswahl von Hostgruppen.| |*CWidgetFieldMultiSelectHost*|ID|Multiselect-Feld zur Auswahl von Hosts.| |*CWidgetFieldMultiSelectHostInventory*|array of int32|Multiselect-Feld zur Auswahl von Host-Inventarfeldern.| |*CWidgetFieldMultiSelectItem*|ID|Multiselect-Feld zur Auswahl von Datenpunkten.| |*CWidgetFieldMultiSelectItemPrototype*|ID|Multiselect-Feld zur Auswahl von Datenpunktprototypen.| |*CWidgetFieldMultiSelectMap*|ID|Multiselect-Feld zur Auswahl von Karten.| |*CWidgetFieldMultiSelectMediaType*|ID|Multiselect-Feld zur Auswahl von Medientypen.| |*CWidgetFieldMultiSelectOverrideHost*|ID|Multiselect-Feld zur Auswahl einer Datenquelle für Hosts aus einem Dashboard oder einem anderen Widget.| |*CWidgetFieldMultiSelectService*|ID|Multiselect-Feld zur Auswahl von Services.| |*CWidgetFieldMultiSelectSla*|ID|Multiselect-Feld zur Auswahl von SLAs.| |*CWidgetFieldMultiSelectUser*|ID|Multiselect-Feld zur Auswahl von Benutzern.| |*CWidgetFieldNavTree*|array of (multiple mixed)|Speichert eine Navigationsbaumstruktur von Karten zur Verwendung im Widget *Map navigation tree*.| |*CWidgetFieldNumericBox*|string|Feld zur Eingabe einer Fließkommazahl.| |*CWidgetFieldPatternSelect*|-|Basisklasse für Pattern-Select-Felder, erweitert durch alle *CWidgetPatternSelect\**-Klassen.| |*CWidgetFieldPatternSelectHost*|string|Multiselect-Feld zur Auswahl von Hosts. Unterstützt Hostnamenmuster.| |*CWidgetFieldPatternSelectItem*|string|Multiselect-Feld zur Auswahl von Datenpunkten. Unterstützt Datenpunktnamenmuster.| |*CWidgetFieldRadioButtonList*|int32|Radiobutton-Gruppe, die aus einem oder mehreren Radiobuttons besteht.| |*CWidgetFieldRangeControl*|int32|Schieberegler zur Auswahl eines Werts vom Typ Ganzzahl.| |*CWidgetFieldReference*|string|Speichert eine eindeutige Kennung für dieses Widget auf dem Dashboard; wird für die Widget-Kommunikation verwendet.| |*CWidgetFieldSelect*|int32|Dropdown-Auswahlfeld.| |*CWidgetFieldSeverities*|array of int32|Voreingestellte *CWidgetFieldCheckBoxList* mit Auslöser-Schweregraden.| |*CWidgetFieldSparkline*|array of (multiple mixed)|Ermöglicht die Konfiguration eines Sparkline-Diagramms.| |*CWidgetFieldTags*|array of (string, int32, string)|Ermöglicht die Konfiguration von einem oder mehreren Tag-Filterzeilen.| |*CWidgetFieldTextArea*|string|Textbereich zur Eingabe mehrzeiligen Texts.| |*CWidgetFieldTextBox*|string|Textfeld zur Eingabe einzeiligen Texts.| |*CWidgetFieldThresholds*|array of (string, string)|Ermöglicht die Konfiguration von Farb- und Zahlenpaaren.| |*CWidgetFieldTimePeriod*|array of string|Feld zur Auswahl eines Zeitraums.| |*CWidgetFieldTimeZone*|string|Dropdown mit Zeitzonen.| |*CWidgetFieldUrl*|string|Textfeld, in das URLs eingegeben werden können.| ::: noteclassic Die maximale Länge für `int32`-Felder beträgt 10 Zeichen, für `ID`-Felder 20 Zeichen und für `string`-Felder 2048 Zeichen. Für zusammengesetzte Typen (z. B. `array of (string, int32, string)`) gilt die Begrenzung für jedes Element einzeln. Feldspezifische Längenbeschränkungen können mit Methoden wie `setMaxLength()` festgelegt werden. ::: [comment]: # ({/e70cf9fd-708ecb6b})