[comment]: # translation:outdated

[comment]: # aside:1

[comment]: # ({0a11f1a9-f7477fb0})
# Configuratie

Deze pagina beschrijft klassen die kunnen worden gebruikt om een widgetconfiguratieweergave met aangepaste configuratievelden te maken.
De widgetconfiguratieweergave is het deel van de widget waarmee de gebruiker widgetparameters kan configureren voor [presentatie](/presentatie).

[comment]: # ({/0a11f1a9-f7477fb0})

[comment]: # ({e486789d-adf59b13})
### Widget

Primaire widgetklasse, breidt de basisklasse uit van alle dashboardwidgets - *CWidget*.
Nodig om het standaard widgetgedrag te overschrijven.

De *Widget* klasse moet zich bevinden in de hoofdmap van de widget (bijvoorbeeld *ui/modules/my_custom_widget*).

**Voorbeeld Widget.php**

```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' => _('Geen gegevens')
            ]
        ];
    }
}
```

[comment]: # ({/e486789d-adf59b13})

[comment]: # ({a308ceb7-1ff26877})
### WidgetForm

De klasse *WidgetForm* breidt de standaardklasse *CWidgetForm* uit en bevat een reeks [*CWidgetField*](#cwidgetfield) velden
die nodig zijn voor het definiëren van de structuur voor het opslaan van widgetconfiguraties in de database en het afhandelen van invoervalidatie.

De *WidgetForm* klasse moet zich bevinden in de *includes* map.
Als de klasse een andere naam heeft, moet de naam worden gespecificeerd in de [*widget/form_class*](/devel/modules/file_structure/manifest#widget) parameter in het *manifest.json* bestand.

**Voorbeeld WidgetForm.php**

```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 function addFields(): self {
        return $this
            ->addField(
                (new 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')
            );
    }
}
```

[comment]: # ({/a308ceb7-1ff26877})

[comment]: # ({44e964fb-61f06fc3})
### CWidgetFormView

De klasse *CWidgetFormView* is vereist voor het specificeren van de presentatielogica van de velden die zijn gedefinieerd in de *WidgetForm* klasse,
waarbij hun uiterlijk en gedrag worden bepaald wanneer ze worden weergegeven in de configuratie weergave.

De klasse *CWidgetFormView* ondersteunt de volgende methoden:

-   *addField()* - ontvangt een instantie van de *CWidgetFieldView* klasse als parameter;
    elke [*CWidgetField*](#cwidgetfield) klasse heeft een respectieve *CWidgetFieldView* klasse voor gebruik in de widget configuratie weergave.
-   *includeJsFile()* - stelt u in staat om een JavaScript-bestand toe te voegen aan de widget configuratie weergave.
-   *addJavaScript()* - stelt u in staat om inline JavaScript toe te voegen dat wordt uitgevoerd zodra de widget configuratie weergave wordt geladen.

De klasse *CWidgetFormView* moet zich bevinden in de *views* map.

**Voorbeeld widget.edit.php**

```php
<?php
    
/**
 * Mijn aangepaste widget formulierweergave.
 *
 * @var CView $this
 * @var array $data
 */

use Zabbix\Widgets\Fields\CWidgetFieldGraphDataSet;

(new 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();
```

[comment]: # ({/44e964fb-61f06fc3})

[comment]: # ({d7c94075-d1c62429})
### JavaScript

JavaScript kan worden gebruikt om dynamisch gedrag en interactiviteit toe te voegen aan de widgetconfiguratieweergave.
U kunt bijvoorbeeld een kleurenkiezer initialiseren, gedefinieerd in de klasse [*CWidgetFormView*](#cwidgetformview).

Het JavaScript moet worden geladen met het formulier, daarom moet ernaar worden verwezen in de klasse [*CWidgetFormView*](#cwidgetformview) met behulp van de methoden *includeJsFile()* en *addJavaScript()*.

In het onderstaande voorbeeld wordt onmiddellijk een singleton-klasse-instantie gemaakt en opgeslagen onder de naam *window.my_custom_widget_form*.
Als u het formulier voor de tweede keer opent, wordt de instantie opnieuw gemaakt.

Het JavaScript moet zich in de map *views* bevinden.

**views/widget.edit.js.php voorbeeld**

```php
<?php

gebruik Modules\MyCustomWidget\Widget;

?>

window.my_custom_widget_form = nieuwe klasse {

init({color_palette}) {
colorPalette.setThemeColors(color_palette);

for (const colorpicker van jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
jQuery(colorpicker).colorpicker();
}

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

voor (const gebeurtenis van ['overlay.reload', 'overlay.close']) {
overlay.$dialogue[0].addEventListener(gebeurtenis, () => { jQuery.colorpicker('hide'); });
}
}
};
```

[comment]: # ({/d7c94075-d1c62429})

[comment]: # ({ab9f3560-708ecb6b})
### CWidgetField

De klasse *CWidgetField* is een basisklasse waarvan alle formulierveldklassen (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList*, enz.) worden geërfd.
Klassen die *CWidgetField* uitbreiden, zijn verantwoordelijk voor het ontvangen, opslaan en valideren van widgetconfiguratiewaarden.

De volgende *CWidgetField*-klassen zijn beschikbaar.

|CWidgetField-klasse|Databaseveldtype|Beschrijving|
|----|----|----------|
|*CWidgetFieldCheckBox*|int32|Enkel selectievakje.|
|*CWidgetFieldCheckBoxList*|array van int32|Meerdere selectievakjes onder één configuratieveld.|
|*CWidgetFieldColor*|string|Kleurselectieveld.|
|*CWidgetFieldDatePicker*|string|Datumselectieveld.|
|*CWidgetFieldHostPatternSelect*|string|Multiselectveld waarmee u één of meerdere hosts kunt selecteren. Ondersteunt het definiëren van hostnaampatronen (alle overeenkomende hosts worden geselecteerd).|
|*CWidgetFieldIntegerBox*|int32|Veld om een geheel getal in te voeren. Kan worden gebruikt om minimum- en maximumwaarden te configureren.|
|*CWidgetFieldLatLng*|string|Tekstvak waarmee u door komma's gescheiden breedtegraad, lengtegraad en kaartzoomniveau kunt invoeren.|
|*CWidgetFieldMultiSelectAction*|ID|Multiselectveld voor het selecteren van acties (uit de lijst met acties die zijn gedefinieerd in *Alerts → Actions*).|
|*CWidgetFieldMultiSelectGraph*|ID|Multiselectveld voor het selecteren van aangepaste grafieken.|
|*CWidgetFieldMultiSelectGraphPrototype*|ID|Multiselect-veld voor het selecteren van aangepaste grafiekprototypes.|
|*CWidgetFieldMultiSelectGroup*|ID|Multiselect-veld voor het selecteren van hostgroepen.|
|*CWidgetFieldMultiSelectHost*|ID|Multiselect-veld voor het selecteren van hosts.|
|*CWidgetFieldMultiSelectItem*|ID|Multiselect-veld voor het selecteren van items.|
|*CWidgetFieldMultiSelectItemPattern*|ID|Multiselect-veld voor het selecteren van itempatronen.|
|*CWidgetFieldMultiSelectItemPrototype*|ID|Multiselect-veld voor het selecteren van itemprototypes.|
|*CWidgetFieldMultiSelectMap*|ID|Multiselect-veld voor het selecteren van kaarten.|
|*CWidgetFieldMultiSelectMediaType*|ID|Multiselect-veld voor het selecteren van mediatypen.|
|*CWidgetFieldMultiSelectOverrideHost*|ID|Multiselectveld voor het selecteren van een gegevensbron (dashboard of andere widget) met een host waarvoor de widget gegevens kan weergeven.|
|*CWidgetFieldMultiSelectService*|ID|Multiselectveld voor het selecteren van services.|
|*CWidgetFieldMultiSelectSla*|ID|Multiselectveld voor het selecteren van SLA's.|
|*CWidgetFieldMultiSelectUser*|ID|Multiselectveld voor het selecteren van gebruikers.|
|*CWidgetFieldNumericBox*|string|Veld om een float-getal in te voeren.|
|*CWidgetFieldRadioButtonList*|int32|Radioboxgroep die bestaat uit een of meer radioboxen.|
|*CWidgetFieldRangeControl*|int32|Schuifregelaar om een integer-type waarde te selecteren.|
|*CWidgetFieldReference*|string|Maakt een unieke id voor deze widget op het dashboard. Het wordt gebruikt om te verwijzen naar deze widget vanuit andere widgets.|
|*CWidgetFieldSelect*|int32|Dropdown-selectievak.|
|*CWidgetFieldSeverities*|array van int32|*CWidgetFieldCheckBoxList* vooraf ingesteld met trigger-ernst.|
|*CWidgetFieldTags*|array van (string, int32, string)|Maakt het mogelijk om een of meer tagfilterrijen te configureren.|
|*CWidgetFieldTextArea*|string|Tekstgebied voor het invoeren van tekst met meerdere regels.|
|*CWidgetFieldTextBox*|string|Tekstvak voor het invoeren van tekst met één regel.|
|*CWidgetFieldTimePeriod*|array van string|Tijdsperiode-selectieveld.|
|*CWidgetFieldTimeZone*|string|Dropdown met tijdzones.|
|*CWidgetFieldThresholds*|array van (string, string)|Hiermee kunt u kleur- en nummerparen configureren.|
|*CWidgetFieldUrl*|string|Tekstvak waarmee u URL's kunt invoeren.|

De volgende *CWidgetField*-klassen zijn gemaakt voor specifieke widgets.
Deze klassen hebben zeer specifieke use cases, maar ze kunnen indien nodig ook opnieuw worden gebruikt.

|CWidgetField-klasse|Databaseveldtype|Beschrijving|
|----|----|----------|
|*CWidgetFieldColumnsList*|array van (meerdere gemengde)|Voor *Top hosts*-widget. Maak een tabel met aangepaste kolommen van toegestane typen.|
|*CWidgetFieldNavTree*|string|Voor *Map navigation tree*-widget. Vervangt de widgetweergave in de bewerkingsmodus door de mapselectieboom.|

[comment]: # ({/ab9f3560-708ecb6b})