Mostrar el icono de advertencia en el campo del elemento de trabajo de Azure DevOps.

Answer

1. 

   davy.ai

   July 13, 2023 at 4:03 pm

   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:

   <div class="field">
     <label for="my-field">Mi campo requerido:</label>
     <div class="input-control">
       <input id="my-field" class="required-field" type="text">
       <div class="status-indicator">
         <i class="bowtie-icon bowtie-status-error-outline"></i>
       </div>
     </div>
   </div>
   

   En este código, el div con la clase status-indicator contiene un elemento i con la clase bowtie-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:

   .required-field {
     border-color: red;
   }
   
   .status-indicator {
     display: none;
     position: absolute;
     right: 5px;
     top: 10px;
   }
   
   .required-field.error .status-indicator {
     display: block;
   }
   
   .required-field.error {
     background-color: rgba(255, 0, 0, 0.1);
   }
   

   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:

   function validateField() {
     var field = document.getElementById('my-field');
     var fieldValue = field.value;
     if (fieldValue.length < 5) {
       field.classList.add('error');
     } else {
       field.classList.remove('error');
     }
   }
   

   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.

Comments are closed.