[comment]: # translation:outdated [comment]: # aside:1 [comment]: # ({0a11f1a9-f7477fb0}) # Configuración Esta página describe las clases que se pueden utilizar para crear una vista de configuración de widget con campos de configuración personalizados. La vista de configuración del widget es la parte del widget que permite al usuario configurar los parámetros del widget para la [presentación](/presentation). [comment]: # ({/0a11f1a9-f7477fb0}) [comment]: # ({68bbd84a-adf59b13}) ### Widget Clase principal del widget, extiende la clase base de todos los widgets del panel - *CWidget*. Requerido para sobrescribir el comportamiento predeterminado del widget. La clase *Widget* debe ubicarse en el directorio raíz del widget (por ejemplo, *zabbix/ui/modules/my_custom_widget*). **Ejemplo de Widget.php** ```php [ 'No data' => _('No data') ] ]; } } ``` [comment]: # ({/68bbd84a-adf59b13}) [comment]: # ({e5aad37e-1ff26877}) ### WidgetForm La clase *WidgetForm* extiende la clase por defecto *CWidgetForm* y contiene un conjunto de campos [*CWidgetField*](#cwidgetfield) que son necesarios para definir la estructura de almacenamiento de la configuración del widget en la base de datos y gestionar la validación de entrada. La clase *WidgetForm* debe ubicarse en el directorio *includes*. Si la clase tiene un nombre diferente, el nombre debe especificarse en el parámetro [*widget/form_class*](/devel/modules/file_structure/manifest#widget) en el archivo *manifest.json*. **Ejemplo de includes/WidgetForm.php** ```php addField( (new CWidgetFieldMultiSelectItem('itemid', _('Métrica'))) ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK) ->setMultiple(false) ) ->addField( new CWidgetFieldTextBox('description', _('Descripción')) ) ->addField( (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000') ); } } ``` [comment]: # ({/e5aad37e-1ff26877}) [comment]: # ({3ca7a0e4-61f06fc3}) ### CWidgetFormView La clase *CWidgetFormView* es necesaria para especificar la lógica de presentación de los campos definidos en la clase *WidgetForm*, determinando su apariencia y comportamiento cuando se representan en la vista de configuración. La clase *CWidgetFormView* admite los siguientes métodos: - *addField()* - recibe una instancia de la clase *CWidgetFieldView* como parámetro; cada clase [*CWidgetField*](#cwidgetfield) tiene una clase *CWidgetFieldView* respectiva para usar en la vista de configuración del widget. - *addFieldset()* - recibe una instancia de la clase *CWidgetFieldsGroupView* que combina campos en un contenedor colapsable. - *addFieldsGroup()* - recibe una instancia de *CWidgetFormFieldsetCollapsibleView* que combina visualmente (con un borde) los campos en un grupo. - *includeJsFile()* - permite añadir un archivo JavaScript a la vista de configuración del widget. - *addJavaScript()* - permite añadir JavaScript en línea que se ejecutará tan pronto como se cargue la vista de configuración del widget. La clase *CWidgetFormView* debe ubicarse en el directorio *views*. **Ejemplo de views/widget.edit.php** ```php addField( (new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))->setPopupParameter('numeric', true) ) ->addFieldset( (new CWidgetFormFieldsetCollapsibleView(_('Configuración avanzada'))) ->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 Se puede utilizar una clase JavaScript para añadir comportamiento dinámico e interactividad a la vista de configuración del widget. Por ejemplo, puede inicializar un selector de color, definido en la clase [*CWidgetFormView*](#cwidgetformview). La clase JavaScript debe cargarse con el formulario, por lo tanto, debe ser referenciada en la clase [*CWidgetFormView*](#cwidgetformview) utilizando los métodos *includeJsFile()* y *addJavaScript()*. En el siguiente ejemplo, se crea inmediatamente una instancia de clase singleton y se almacena bajo el nombre *window.my_custom_widget_form*. Así, al abrir el formulario por segunda vez, se volverá a crear la instancia. La clase JavaScript debe ubicarse en el directorio *views*. **Ejemplo de 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]: # ({1e4be89d-708ecb6b}) ### CWidgetField La clase *CWidgetField* es una clase base de la que heredan todas las clases de campos de formulario (*CWidgetFieldCheckBox*, *CWidgetFieldTextArea*, *CWidgetFieldRadioButtonList*, etc.). Las clases que extienden *CWidgetField* son responsables de recibir, guardar y validar los valores de configuración del widget. Las siguientes clases *CWidgetField* están disponibles. |Clase CWidgetField|Tipo de campo de base de datos|Descripción| |----|----|----------| |*CWidgetFieldCheckBox*|int32|Casilla de verificación única.| |*CWidgetFieldCheckBoxList*|array of int32|Varias casillas de verificación en un único campo de configuración.| |*CWidgetFieldColor*|string|Campo de selección de color.| |*CWidgetFieldDatePicker*|string|Campo de selección de fecha.| |*CWidgetFieldIntegerBox*|int32|Campo para introducir un número entero. Puede utilizarse para configurar valores mínimos y máximos.| |*CWidgetFieldLatLng*|string|Cuadro de texto que permite introducir la latitud, la longitud y el nivel de zoom del mapa separados por comas.| |*CWidgetFieldMultiSelect*|-|Clase base para campos de selección múltiple, extendida por todas las clases *CWidgetFieldMultiSelect\**.| |*CWidgetFieldMultiSelectAction*|ID|Campo de selección múltiple para seleccionar acciones de la lista de acciones definida en *Alertas → Acciones*.| |*CWidgetFieldMultiSelectGraph*|ID|Campo de selección múltiple para seleccionar gráficos personalizados.| |*CWidgetFieldMultiSelectGraphPrototype*|ID|Campo de selección múltiple para seleccionar prototipos de gráficos personalizados.| |*CWidgetFieldMultiSelectGroup*|ID|Campo de selección múltiple para seleccionar grupos de hosts.| |*CWidgetFieldMultiSelectHost*|ID|Campo de selección múltiple para seleccionar hosts.| |*CWidgetFieldMultiSelectHostInventory*|array of int32|Campo de selección múltiple para seleccionar campos de inventario de host.| |*CWidgetFieldMultiSelectItem*|ID|Campo de selección múltiple para seleccionar items.| |*CWidgetFieldMultiSelectItemPrototype*|ID|Campo de selección múltiple para seleccionar prototipos de item.| |*CWidgetFieldMultiSelectMap*|ID|Campo de selección múltiple para seleccionar mapas.| |*CWidgetFieldMultiSelectMediaType*|ID|Campo de selección múltiple para seleccionar tipos de medio.| |*CWidgetFieldMultiSelectOverrideHost*|ID|Campo de selección múltiple para seleccionar una fuente de datos para hosts desde un dashboard u otro widget.| |*CWidgetFieldMultiSelectService*|ID|Campo de selección múltiple para seleccionar servicios.| |*CWidgetFieldMultiSelectSla*|ID|Campo de selección múltiple para seleccionar SLA.| |*CWidgetFieldMultiSelectUser*|ID|Campo de selección múltiple para seleccionar usuarios.| |*CWidgetFieldNavTree*|array of (multiple mixed)|Almacena una estructura de árbol de navegación de mapas para su uso en el widget *Árbol de navegación de mapas*.| |*CWidgetFieldNumericBox*|string|Campo para introducir un número de coma flotante.| |*CWidgetFieldPatternSelect*|-|Clase base para campos de selección por patrón, extendida por todas las clases *CWidgetPatternSelect\**.| |*CWidgetFieldPatternSelectHost*|string|Campo de selección múltiple para seleccionar hosts. Admite patrones de nombre de host.| |*CWidgetFieldPatternSelectItem*|string|Campo de selección múltiple para seleccionar items. Admite patrones de nombre de item.| |*CWidgetFieldRadioButtonList*|int32|Grupo de botones de opción que consta de uno o más botones de opción.| |*CWidgetFieldRangeControl*|int32|Control deslizante para seleccionar un valor de tipo entero.| |*CWidgetFieldReference*|string|Almacena un identificador único para este widget en el dashboard; se utiliza para la comunicación entre widgets.| |*CWidgetFieldSelect*|int32|Cuadro desplegable de selección.| |*CWidgetFieldSeverities*|array of int32|*CWidgetFieldCheckBoxList* predefinido con severidades de trigger.| |*CWidgetFieldSparkline*|array of (multiple mixed)|Permite configurar un gráfico sparkline.| |*CWidgetFieldTags*|array of (string, int32, string)|Permite configurar una o más filas de filtro de etiquetas.| |*CWidgetFieldTextArea*|string|Área de texto para introducir texto de varias líneas.| |*CWidgetFieldTextBox*|string|Cuadro de texto para introducir texto de una sola línea.| |*CWidgetFieldThresholds*|array of (string, string)|Permite configurar pares de color y número.| |*CWidgetFieldTimePeriod*|array of string|Campo de selección de período de tiempo.| |*CWidgetFieldTimeZone*|string|Lista desplegable con zonas horarias.| |*CWidgetFieldUrl*|string|Cuadro de texto que permite introducir URL.| ::: noteclassic La longitud máxima para los campos `int32` es de 10 caracteres, para los campos `ID` de 20 caracteres y para los campos `string` de 65535 caracteres. En los tipos compuestos (por ejemplo, `array of (string, int32, string)`), el límite se aplica a cada elemento individualmente. Las restricciones de longitud específicas de cada campo pueden establecerse mediante métodos como `setMaxLength()`. ::: [comment]: # ({/1e4be89d-708ecb6b})