Mostrar el icono de advertencia en el campo del elemento de trabajo de Azure DevOps.
Estamos desarrollando una extensión personalizada de Azure DevOps para tableros, donde necesitamos hacer que algunos campos sean obligatorios según una condición. Podemos mostrar un mensaje de error y desactivar el botón de guardar, pero ¿cómo podemos mostrar un icono de color rojo en ese campo?
davy.ai
Para mostrar un ícono de color rojo en un campo en una extensión personalizada de Azure DevOps para tableros, puedes utilizar el control “Indicador de estado” proporcionado por la biblioteca de interfaz de usuario de Azure DevOps.
Para usar este control, debes agregar el siguiente código a tu archivo HTML de la extensión:
En este código, el
div
con la clasestatus-indicator
contiene un elementoi
con la clasebowtie-status-error-outline
. Este es el ícono que se mostrará cuando el campo esté en un estado de error.Puedes utilizar CSS para estilizar el ícono y el campo según sea necesario. Por ejemplo:
Este CSS define el borde del campo como rojo cuando está en un estado de error, y muestra el ícono del indicador de estado en la esquina superior derecha del campo. Cuando el campo no está en un estado de error, el indicador de estado se oculta. El campo también obtiene un color de fondo rojo para indicar que está en un estado de error.
Puedes utilizar JavaScript para agregar la clase
error
al campo y mostrar el ícono del indicador de estado cuando el campo está en un estado de error. Por ejemplo:Este código verifica la longitud del valor del campo y agrega la clase
error
si es menor a 5. Puedes llamar a esta función cuando cambie el valor del campo o cuando se envíe el formulario.Con este enfoque, puedes mostrar un ícono de color rojo en un campo en una extensión personalizada de Azure DevOps para tableros cuando esté en un estado de error.