ADF tips: Control de cambios pendientes
El control de cambios pendientes cuando el usuario abandona una página es siempre un problema muy a tener en cuenta, sobretodo cuando el usuario utiliza formas de navegación no controladas por la aplicación (como el botón atrás, cerrar el navegador, refrescar la página…).
ADF ofrece una manera muy sencilla de alertar al usuario cuando tiene cambios pendientes, simplemente debemos añadir el atributo uncommittedDataWarning dentro del tag af:document; como se muestra en la imagen.
Esta nueva propiedad provoca que cuando el usuario intenta cerrar el navegador, refrescar la página, ir atrás o una acción similar, salte un popup genérico que le alerte de que si continua puede perder sus cambios.
Además es posible forzar a que este aviso sea lanzado cuando se haga uso de algún elemento de navegación dentro de la propia pantalla, por ejemplo al pulsar un botón o hacer un cambio de pestaña. Para ello debemos añadir el atributo af:checkUncommittedDataBehavior dentro del componente deseado.
Aunque es una solución válida para evitar salidas descontroladas del navegador, en algunos casos puede que necesitemos personalizar este popup de alerta. Por ejemplo para ofrecerle al usuario la opción de guardar sus cambios desde el propio popup, forzar a deshacer todos los cambios antes de permitir la navegación o tal vez darle un aspecto más amigable al aviso. Para ello podemos acceder a la comprobación que internamente el framework ejecuta por nosotros para saber cuándo debe mostrar el mensaje de aviso; teniendo la opción de por ejemplo abrir un popup de aviso propio.
En resumen, gracias a la opción de uncommittedDataWarning podemos alertar al usuario de una forma rápida y eficaz de que va a perder los cambios pendientes, y en caso de que el aviso genérico no cumpla con todos nuestros requisitos, existe una forma alternativa de hacer la misma comprobación y controlar manualmente todas las opciones que el usuario tendrá disponibles.
Follow us on: |
|
|
Buen tip Fernando.
¿Cómo se personalizaría el popup de alerta, sería llamando ese código mediante el action de un botón?
y en caso de cerrar el navegador, ¿cómo mostrar el popup personalizado?
Gracias!.
Hola,
Para utilizar el popup personalizado deberíamos llamar a ese código desde los puntos donde querramos controlar la pérdida de cambios; lo más normal es utilizarlo desde el típico botón de Salir o Cancelar.
Para poder controlar el cierre de navegador con el mensaje personalizado deberíamos jugar con un evento javascript utilizando las propiedades onunload del componente document sobre el que tenemos nuestra página (en caso de trabajar con templates se simplifica mucho).
Como explicar esta segunda casúsitica en una respuesta tal vez sea demasiado confuso prepararé un nuevo tip con los detalles.
No te pierdas el blog las próximas semanas 😉