Configuració

La configuració del giny forma part del mòdul del giny que permet a l'usuari definir la configuració del ginyper a presentar. Aquesta pàgina descriu classes que es poden emprar per crear un formulari de configuració de ginys amb camps personalitzats.

Giny

Classe de giny principal que amplia la classe per defecte CWidget. Necessari per substituir els mètodes de giny predeterminats o per afegir constants.

La classe Widget ha d'ubicar-se a la carpeta arrel del giny (per exemple, zabbix/ui/modules/my_custom_widget).

Widget.php exemple

<?php

namespace Modules\WidgetNameHere;

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

La classe WidgetForm amplia la classe per defecte (CWidgetForm) i conté un conjunt camps CWidgetField que calen per definir l'estructura d'emmagatzematge de la configuració del giny a la base de dades i gestionar la validació d'entrada.

La classe WidgetForm s'ha d'ubicar al directori include. Si la classe té un nom diferent, s'ha d'especificar al paràmetre widget/form_class de l'arxiu manifest.json.

includes/WidgetForm.php exemple

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

La classe CWidgetFormView és necessària per especificar la lògica de presentació dels camps definits a la classe WidgetForm, determinant-ne l'aparença i el comportament quan es representen a la vista de configuració.

La classe CWidgetFormView admet els mètodes següents:

• addField() - rep una instància de la classe CWidgetFieldView com a paràmetre; cada classe CWidgetField té una classe respectiva CWidgetFieldView per emprar-la a la vista de configuració del giny.
• addFieldset() - rep una instància de la classe CWidgetFieldsGroupView que combina camps a un contenidor col·lapsable.
• addFieldsGroup() - rep una instància de CWidgetFormFieldsetCollapsibleView que, visualment (amb un contorn), combina camps en un grup.
• includeJsFile() - permet afegir un fitxer JavaScript a la vista de configuració del giny.
• addJavaScript() - permet afegir JavaScript en línia que s'executarà tan bon punt es carregui la vista de configuració del giny.

La classe CWidgetFormView s'ha d'ubicar al directori views.

exemple de views/widget.edit.php

<?php

/**
 * La meva vista de formulari de giny personalitzada.
 *
 * @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

Es pot emprar una classe JavaScript per afegir comportament dinàmic i interactivitat a la vista de configuració del giny. Per exemple, podeu inicialitzar un selector de color, definit a la classe CWidgetFormView.

La classe JavaScript s'ha de carregar amb el formulari; per tant, s'ha de fer referència a la classe CWidgetFormView emprant els mètodes includeJsFile() i addJavaScript().

A l'exemple següent, es crea immediatament una instància de classe singleton i s'emmagatzema sota el nom window.my_custom_widget_form. Així, en obrir el formulari per segon cop es tornarà a crear la instància.

La classe JavaScript s'ha d'ubicar al directori views.

views/widget.edit.js.php exemple

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

La classe CWidgetField és una classe base des de la qual s'hereten totes les classes de camp de forma (CwidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList, etc.). Les classes que s'estenen CWidgetField són responsables de rebre, guardar i validar els valors de configuració del giny.

Les següents classes de CWidgetField estan disponibles.