[comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # Configurazione Questa pagina descrive le classi che possono essere utilizzate per creare una vista di configurazione del widget con campi di configurazione personalizzati. La vista di configurazione del widget è la parte del widget che consente all'utente di configurare i parametri del widget per la [presentazione](/presentation). [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### Widget La classe widget primaria, estende la classe base di tutti i widget della dashboard - *CWidget*. Necessaria per sovrascrivere il comportamento predefinito del widget. La classe *Widget* deve trovarsi nella directory principale del widget (ad esempio, *zabbix/ui/modules/my_custom_widget*). **Esempio di Widget.php** ```php [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm La classe *WidgetForm* estende la classe predefinita *CWidgetForm* e contiene un insieme di campi [*CWidgetField*](#cwidgetfield) necessari per definire la struttura di archiviazione della configurazione del widget nel database e gestire la validazione dell'input. La classe *WidgetForm* deve trovarsi nella directory *includes*. Se la classe ha un nome diverso, il nome deve essere specificato nel parametro [*widget/form_class*](/devel/modules/file_structure/manifest#widget) nel file *manifest.json*. **Esempio di includes/WidgetForm.php** ```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 La classe *CWidgetFormView* è necessaria per specificare la logica di presentazione dei campi definiti nella classe *WidgetForm*, determinandone l'aspetto e il comportamento quando vengono renderizzati nella vista di configurazione. La classe *CWidgetFormView* supporta i seguenti metodi: - *addField()* - riceve come parametro un'istanza della classe *CWidgetFieldView*; ogni classe [*CWidgetField*](#cwidgetfield) ha una rispettiva classe *CWidgetFieldView* da utilizzare nella vista di configurazione del widget. - *addFieldset()* - riceve un'istanza della classe *CWidgetFieldsGroupView* che combina i campi in un contenitore comprimibile. - *addFieldsGroup()* - riceve un'istanza di *CWidgetFormFieldsetCollapsibleView* che combina visivamente (con un bordo) i campi in un gruppo. - *includeJsFile()* - consente di aggiungere un file JavaScript alla vista di configurazione del widget. - *addJavaScript()* - consente di aggiungere codice JavaScript inline che verrà eseguito non appena la vista di configurazione del widget viene caricata. La classe *CWidgetFormView* deve trovarsi nella directory *views*. **Esempio views/widget.edit.php** ```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 Una classe JavaScript può essere utilizzata per aggiungere comportamento dinamico e interattività alla vista di configurazione del widget. Ad esempio, è possibile inizializzare un selettore di colori, definito nella classe [*CWidgetFormView*](#cwidgetformview). La classe JavaScript deve essere caricata insieme al modulo, pertanto deve essere referenziata nella classe [*CWidgetFormView*](#cwidgetformview) utilizzando i metodi *includeJsFile()* e *addJavaScript()*. Nell'esempio seguente, un'istanza singleton della classe viene creata immediatamente e memorizzata con il nome *window.my_custom_widget_form*. Pertanto, aprendo il modulo una seconda volta, l'istanza verrà ricreata. La classe JavaScript deve trovarsi nella directory *views*. **Esempio di views/widget.edit.js.php** ```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 La classe *CWidgetField* è una classe base da cui ereditano tutte le classi dei campi dei moduli (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList*, ecc.). Le classi che estendono *CWidgetField* sono responsabili della ricezione, del salvataggio e della validazione dei valori di configurazione del widget. Sono disponibili le seguenti classi *CWidgetField*. |Classe CWidgetField|Tipo di campo del database|Descrizione| |----|----|----------| |*CWidgetFieldCheckBox*|int32|Singola casella di controllo.| |*CWidgetFieldCheckBoxList*|array of int32|Più caselle di controllo sotto un unico campo di configurazione.| |*CWidgetFieldColor*|string|Campo di selezione del colore.| |*CWidgetFieldDatePicker*|string|Campo di selezione della data.| |*CWidgetFieldIntegerBox*|int32|Campo per l'immissione di un numero intero. Può essere usato per configurare i valori minimo e massimo.| |*CWidgetFieldLatLng*|string|Casella di testo che consente di immettere latitudine, longitudine e livello di zoom della mappa separati da virgole.| |*CWidgetFieldMultiSelect*|-|Classe base per i campi multiselezione, estesa da tutte le classi *CWidgetFieldMultiSelect\**.| |*CWidgetFieldMultiSelectAction*|ID|Campo multiselezione per selezionare azioni dall'elenco delle azioni definite in *Alerts → Actions*.| |*CWidgetFieldMultiSelectGraph*|ID|Campo multiselezione per selezionare grafici personalizzati.| |*CWidgetFieldMultiSelectGraphPrototype*|ID|Campo multiselezione per selezionare prototipi di grafici personalizzati.| |*CWidgetFieldMultiSelectGroup*|ID|Campo multiselezione per selezionare gruppi di host.| |*CWidgetFieldMultiSelectHost*|ID|Campo multiselezione per selezionare host.| |*CWidgetFieldMultiSelectHostInventory*|array of int32|Campo multiselezione per selezionare i campi dell'inventario host.| |*CWidgetFieldMultiSelectItem*|ID|Campo multiselezione per selezionare item.| |*CWidgetFieldMultiSelectItemPrototype*|ID|Campo multiselezione per selezionare prototipi di item.| |*CWidgetFieldMultiSelectMap*|ID|Campo multiselezione per selezionare mappe.| |*CWidgetFieldMultiSelectMediaType*|ID|Campo multiselezione per selezionare tipi di media.| |*CWidgetFieldMultiSelectOverrideHost*|ID|Campo multiselezione per selezionare una sorgente dati per gli host da una dashboard o da un altro widget.| |*CWidgetFieldMultiSelectService*|ID|Campo multiselezione per selezionare servizi.| |*CWidgetFieldMultiSelectSla*|ID|Campo multiselezione per selezionare SLA.| |*CWidgetFieldMultiSelectUser*|ID|Campo multiselezione per selezionare utenti.| |*CWidgetFieldNavTree*|array of (multiple mixed)|Memorizza una struttura ad albero di navigazione delle mappe da usare nel widget *Map navigation tree*.| |*CWidgetFieldNumericBox*|string|Campo per l'immissione di un numero in virgola mobile.| |*CWidgetFieldPatternSelect*|-|Classe base per i campi di selezione tramite pattern, estesa da tutte le classi *CWidgetPatternSelect\**.| |*CWidgetFieldPatternSelectHost*|string|Campo multiselezione per selezionare host. Supporta pattern per i nomi host.| |*CWidgetFieldPatternSelectItem*|string|Campo multiselezione per selezionare item. Supporta pattern per i nomi degli item.| |*CWidgetFieldRadioButtonList*|int32|Gruppo di pulsanti di opzione costituito da uno o più pulsanti di opzione.| |*CWidgetFieldRangeControl*|int32|Cursore per selezionare un valore di tipo intero.| |*CWidgetFieldReference*|string|Memorizza un identificatore univoco per questo widget nella dashboard; usato per la comunicazione tra widget.| |*CWidgetFieldSelect*|int32|Casella di selezione a discesa.| |*CWidgetFieldSeverities*|array of int32|*CWidgetFieldCheckBoxList* preconfigurato con le severità dei trigger.| |*CWidgetFieldSparkline*|array of (multiple mixed)|Consente di configurare un grafico sparkline.| |*CWidgetFieldTags*|array of (string, int32, string)|Consente di configurare una o più righe di filtro per tag.| |*CWidgetFieldTextArea*|string|Area di testo per l'immissione di testo su più righe.| |*CWidgetFieldTextBox*|string|Casella di testo per l'immissione di testo su una sola riga.| |*CWidgetFieldThresholds*|array of (string, string)|Consente di configurare coppie di colore e numero.| |*CWidgetFieldTimePeriod*|array of string|Campo di selezione del periodo di tempo.| |*CWidgetFieldTimeZone*|string|Elenco a discesa con i fusi orari.| |*CWidgetFieldUrl*|string|Casella di testo che consente di immettere URL.| ::: noteclassic La lunghezza massima per i campi `int32` è di 10 caratteri, per i campi `ID` di 20 caratteri e per i campi `string` di 2048 caratteri. Per i tipi compositi (ad esempio, `array of (string, int32, string)`), il limite si applica a ciascun elemento singolarmente. Le restrizioni di lunghezza specifiche per campo possono essere impostate usando metodi come `setMaxLength()`. ::: [comment]: # ({/e70cf9fd-708ecb6b})