Cómo bloquear la UI con un Spinner en Dynamics 365 usando JavaScript


Escenario:

Tenés una lógica en JavaScript que se ejecuta ya sea en el On Load del formulario o en el On Change de algún campo. Pero antes de que el usuario siga editando o interactuando con el sistema, necesitás que sí o sí esa lógica termine de ejecutarse.

Por ejemplo:

  • Llamás a una Custom API para crear registros en otra tabla de forma automática.
  • Invocás un servicio externo y querés esperar la respuesta para mostrar algo en pantalla.

Sea cual sea el caso, necesitás que el usuario sepa que algo está pasando "detrás de escena" y que espere. Además, querés bloquear la interfaz para que no siga tocando cosas mientras tu lógica está en curso.

La solución: usar un spinner. 🎡

Dynamics 365 tiene una forma súper simple de implementar esto gracias a Xrm.Utility. Este módulo te ofrece dos métodos:

  • ShowProgressIndicator: muestra el spinner y le avisa al usuario que tiene que esperar.
  • CloseProgressIndicator: cierra el spinner cuando todo está listo.

Ahora, veamos qué pasa si agregás este método en el On Load de un formulario:

Xrm.Utility.showProgressIndicator();


Como ves, la UI queda bloqueada hasta tanto no cerremos ese progress indicator. Ahora, agrego a la lógica de mi código el close para ver como vuelvo al contexto original:

Xrm.Utility.closeProgressIndicator();



💡 ¿Qué pasa si quiero agregar un mensaje personalizado a ese Spinner?

El método "showProgressIndicator" puede recibir un string como parámetro y ese string es el que va a mostrar. Por ejemplo:

Xrm.Utility.showProgressIndicator("Procesando solicitud...");



El método closeProgressIndicator no recibe parámetros y va a cerrar cualquier spinner que este ejecutandose en ese momento.

Comentarios