Configuração

Esta página descreve as classes que podem ser usadas para criar uma visualização de configuração do widget com campos de configuração personalizados. A exibição de configuração do widget é a parte do widget que permite ao usuário configurar os parâmetros do widget para presentation.

Widget

Classe primária de widget, estende a classe base de todos os widgets do painel - CWidget. Necessário para substituir o comportamento padrão do widget.

A classe Widget deve estar localizada no diretório raiz do widget (por exemplo, ui/modules/my_custom_widget).

Exemplo de Widget.php

<?php

namespace Modules\MyCustomWidget;

use Zabbix\Core\CWidget;

class Widget extends CWidget {

    public const MY_CONSTANT = 0;

    função pública getTranslationStrings(): array {
        retorna [
            'class.widget.js' => [
                'Sem dados' => _('Sem dados')
            ]
        ];
    }
}

WidgetForm

A classe WidgetForm estende a classe padrão CWidgetForm e contém um conjunto de campos CWidgetField que são necessários para definir a estrutura de armazenamento da configuração do widget no banco de dados e manipular a validação de entrada.

A classe WidgetForm deve estar localizada no diretório includes. Se a classe tiver um nome diferente, o nome deverá ser especificado no parâmetro widget/form_class no arquivo manifest.json.

Exemplo de 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 {

    função pública addFields(): self {
        return $this
            ->addField(
                (novo 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')
            );
    }
}

CWidgetFormView

A classe CWidgetFormView é necessária para especificar a lógica de apresentação dos campos definidos na classe WidgetForm, determinando sua aparência e comportamento quando renderizados na exibição de configuração.

A classe CWidgetFormView é compatível com os seguintes métodos:

• addField() - recebe uma instância da classe CWidgetFieldView como parâmetro; Cada classe CWidgetField tem uma respectiva classe CWidgetFieldView para uso na exibição de configuração do widget.
• includeJsFile() - permite adicionar um arquivo JavaScript à visualização de configuração do widget.
• addJavaScript() - permite adicionar JavaScript em linha que será executado assim que a visualização de configuração do widget for carregada.

A classe CWidgetFormView deve estar localizada no diretório views.

Exemplo de views/widget.edit.php

<?php

/**
 * Minha visualização de formulário de widget personalizado.
 *
 * @var CView $this
 * @var array $data
 */

use Zabbix\Widgets\Fields\CWidgetFieldGraphDataSet;

(novo CWidgetFormView($data))
    ->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();

JavaScript

Uma classe JavaScript pode ser usada para adicionar comportamento dinâmico e interatividade à visualização de configuração do widget. Por exemplo, você pode inicializar um seletor de cores, definido na classe CWidgetFormView.

A classe JavaScript deve ser carregada com o formulário, portanto, deve ser referenciada na classe CWidgetFormView usando os métodos includeJsFile() e addJavaScript().

No exemplo abaixo, uma instância de classe singleton é imediatamente criada e armazenada sob o nome window.my_custom_widget_form. Assim, abrir o formulário pela segunda vez recriará a instância.

A classe JavaScript deve estar localizada no diretório views.

Exemplo de 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 de jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
jQuery(colorpicker).colorpicker();
}

const overlay = overlays_stack.getById('widget_properties');

for (const event de ['overlay.reload', 'overlay.close']) {
overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
}
}
};

CWidgetField

A classe CWidgetField é uma classe base da qual todas as classes de campos de formulário (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList etc.) herdam. As classes que estendem CWidgetField são responsáveis por receber, salvar e validar os valores de configuração do widget.

As seguintes classes CWidgetField estão disponíveis.