[comment]: # translation:outdated [comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # Configuració La configuració del giny forma part del mòdul del giny que permet a l'usuari definir la configuració del ginyper a [presentar](/presentation). Aquesta pàgina descriu classes que es poden emprar per crear un formulari de configuració de ginys amb camps personalitzats. [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### 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 [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm La classe *WidgetForm* amplia la classe per defecte (*CWidgetForm*) i conté un conjunt camps [*CWidgetField*](#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*](/devel/modules/file_structure/manifest#widget) de l'arxiu *manifest.json*. **includes/WidgetForm.php exemple** ```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* é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*](#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 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 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*](#cwidgetformview). La classe JavaScript s'ha de carregar amb el formulari; per tant, s'ha de fer referència a la classe [*CWidgetFormView*](#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 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]: # ({ab9f3560-708ecb6b}) ### CWidgetField La classe *CWidgetField* és una classe base de la qual s'hereten totes les classes de camp de formulari (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList*, etc.). Les classes que estenen *CWidgetField* són les responsables de rebre, desar i validar els valors de configuració del giny. Les següents classes *CWidgetField* són disponibles. |Classe CWidgetField|Tipus de camp de base de dades|Descripció| |----|----|----------| |*CWidgetFieldCheckBox*|int32|Caixa de verificació única.| |*CWidgetFieldCheckBoxList*|array of int32|Múltiples caselles de verificació sota un sol camp de configuració.| |*CWidgetFieldColor*|cadena|Camp de tria de color.| |*CWidgetFieldDatePicker*|cadena|Camp de tria de data.| |*CWidgetFieldHostPatternSelect*|cadena|Camp de tria múltiple que permet triar un o diversos equips. Accepta la definició de patrons de nom d'equip (es triaran tots els equips coincidents).| |*CWidgetFieldIntegerBox*|int32|Camp per introduir un nombre enter. Es pot emprar per configurar valors mínims i màxims.| |*CWidgetFieldLatLng*|cadena|Quadre de text que permet introduir la latitud, longitud i el nivell de zoom del mapa separats per comes.| |*CWidgetFieldMultiSelectAction*|ID|Camp de tria múltiple per triar accions (de la llista d'accions definides a *Alertes → Accions*).| |*CWidgetFieldMultiSelectGraph*|ID|Camp de tria múltiple per triar gràfics personalitzats.| |*CWidgetFieldMultiSelectGraphPrototype*|ID|Camp de tria múltiple per triar prototips de gràfics personalitzats.| |*CWidgetFieldMultiSelectGroup*|ID|Camp de tria múltiple per triar grups d'equips.| |*CWidgetFieldMultiSelectHost*|ID|Camp de tria múltiple per triar equips.| |*CWidgetFieldMultiSelectItem*|ID|Camp de tria múltiple per triar elements.| |*CWidgetFieldMultiSelectItemPattern*|ID|Camp de tria múltiple per triar patrons d'elements.| |*CWidgetFieldMultiSelectItemPrototype*|ID|Camp de tria múltiple per triar prototips d'elements.| |*CWidgetFieldMultiSelectMap*|ID|Camp de tria múltiple per triar mapes.| |*CWidgetFieldMultiSelectMediaType*|ID|Camp de tria múltiple per triar tipus de suports.| |*CWidgetFieldMultiSelectOverrideHost*|ID|Camp de tria múltiple per triar una font de dades (tauler de control o un altre giny) que conté un equip per al qual el giny pot mostrar dades.| |*CWidgetFieldMultiSelectService*|ID|Camp de tria múltiple per triar serveis.| |*CWidgetFieldMultiSelectSla*|ID|Camp de tria múltiple per triar SLA.| |*CWidgetFieldMultiSelectUser*|ID|Camp de tria múltiple per triar usuaris.| |*CWidgetFieldNumericBox*|cadena|Camp per introduir un nombre flotant.| |*CWidgetFieldRadioButtonList*|int32|Grup de caixes de ràdio que consta d'una o més caixes de ràdio.| |*CWidgetFieldRangeControl*|int32|Lliscant per triar un valor de tipus enter.| |*CWidgetFieldReference*|cadena|Crea un identificador únic per a aquest giny al tauler. S'utilitza per fer referència a aquest giny des d'altres ginys.| |*CWidgetFieldSelect*|int32|Caixa de tria desplegable.| |*CWidgetFieldSeverities*|matriu d'int32|*CWidgetFieldCheckBoxList* preestablert amb gravetat del trigger.| |*CWidgetFieldTags*|matriu de (cadena, int32, cadena)|Permet configurar una o més files de filtre d'etiquetes.| |*CWidgetFieldTextArea*|cadena|Àrea de text per introduir text de diverses línies.| |*CWidgetFieldTextBox*|cadena|Quadre de text per introduir text d'una sola línia.| |*CWidgetFieldTimePeriod*|matriu de cadena|Camp de tria del període de temps.| |*CWidgetFieldTimeZone*|cadena|Menú desplegable amb zones horàries.| |*CWidgetFieldThresholds*|matriu de (cadena, cadena)|Permet configurar parells de colors i nombres.| |*CWidgetFieldUrl*|cadena|Caixa de text que permet introduir la URL.| Les següents classes *CWidgetField* s'han creat per a ginys concrets. Aquestes classes tenen casos d'ús molt concrets, però també es poden reutilitzar si escau. |Classe CWidgetField|Tipus de camp de base de dades|Descripció| |----|----|----------| |*CWidgetFieldColumnsList*|matriu de (múltiples mixtes)|Per al giny *Equips principals*. Creeu una taula amb columnes personalitzades dels tipus permesos.| |*CWidgetFieldNavTree*|cadena|Per al giny *Arbre de navegació del mapa*. Substitueix la vista del giny en mode d'edició per l'arbre de tria del mapa.| [comment]: # ({/ab9f3560-708ecb6b})