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 zu konfigurieren.

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

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

Die Klasse WidgetForm erweitert die Standardklasse CWidgetForm und enthält einen Satz von 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 in der Datei manifest.json angegeben werden.

includes/WidgetForm.php Beispiel

<?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

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 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

/**
 * 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

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 definiert ist.

Die JavaScript-Klasse sollte mit dem Formular geladen werden, daher sollte sie in der Klasse 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

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

Die Klasse CWidgetField ist eine Basisklasse, von der alle Formularfeldklassen (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList usw.) abgeleitet werden. Klassen, die CWidgetField erweitern, sind für das Empfangen, Speichern und Validieren von Widget-Konfigurationswerten verantwortlich.

Die folgenden CWidgetField-Klassen sind verfügbar.