Crea tu propio sistema de mensajes en Power Apps usando componentes

En cualquier software y/o aplicación, es muy importante proporcionar al usuario información relativa a las acciones que va realizando, tales como mensajes de información, avisos o errores.

Power Apps no iba a ser menos, y dentro de las aplicaciones de lienzo (canvas), existe una función llamada Notify que nos permite mostrar mensajes por pantalla, pudiendo elegir entre distintos tipos de notificaciones.

No obstante, los que ya hayas trabajado con esta función, habréis notado que le faltan algunas opciones de personalización, como por ejemplo:

• Iconos personalizados
• Formato del mensaje
• Temporizador
• Histórico de mensajes

En este artículo, veremos como podemos crear nuestro propio sistema de mensajes, y además, lo haremos utilizando componentes, para de esta forma, poder aprovecharlo en otras Power Apps.

El resultado final será algo parecido a esto:

Creación del componente

En la parte izquierda de Power Apps Studio, tenemos disponible el menú de componentes, que nos permitirá crear, exportar e importar componentes. En nuestro caso, vamos a crear el componente des de cero, pero evidentemente, haciendo uso de las opciones de exportación e importación podremos reutilizarlos en otras aplicaciones. Incluso, podríamos apoyarnos en las librerías de componentes (todavía en preview), para agrupar todos nuestros componentes en un único sitio.

En este caso, crearemos el componente, al que llamaremos Custom Message, dentro de la propia aplicación. Un componente tiene la misma estructura que una pantalla, por lo que podremos añadir tantos elementos como sean necesarios. Para este ejercicio necesitaremos 4, una etiqueta (1), una imagen (2), un rectángulo (3), y un temporizador (4), que juntaremos en un grupo (5), quedando de la siguiente forma.

Los componentes permiten utilizar parámetros de entrada, a través de los cuales podremos enviar valores desde la aplicación donde se estén utilizando. Crearemos 4 parámetros de entrada:

• Message (texto): Mensaje a mostrar
• Type (imagen): Icono/imagen a mostrar junto al mensaje
• Duration (number): Duración del mensaje en pantalla
• Background (color): Color para el fondo del mensaje

A continuación, modificaremos algunas propiedades de los elementos del componente, para vincular los parámetros de entrada con el valor de cada elemento.

Etiqueta (1)

Imagen (2)

Rectángulo (3)

Es importante que este elemento esté posicionado el último de todos dentro del componente, ya que lo utilizaremos como fondo al mostrar el mensaje, y de no ser así, se superpondría a otros elementos, haciéndolos invisibles.

Temporizador (4)

Llegados a este punto, ya estamos en disposición de usar el componente en nuestra aplicación. Para tal propósito, nos situaremos en la pantalla donde queramos agregar el componente y utilizaremos la siguiente opción:

En la misma pantalla, creamos un botón que utilizaremos para mostrar un mensaje al usuario. Modificaremos la propiedad OnSelect del botón para actualizar estas 4 variables:

A su vez, utilizaremos estas variables como parámetros de entrada en el componente, de la siguiente forma (repetir el proceso para las 4 variables):

Si probamos el botón, veremos como ya nos aparece el mensaje, pero sin embargo, este se queda siempre visible en la pantalla. Para corregir esto, haremos uso de una variable a la que llamaremos varShow, que se activará al inicializar el componente, y desactivaremos al terminar el temporizador. Para ello, volvemos de nuevo al componente y en la propiedad OnReset del componente, establecemos el valor de la variable a true.

Por otra parte, en la propiedad OnTimerEnd del temporizador, actualizaremos la variable a false.

Además, también tendremos que indicar al temporizador cuando debe empezar a contar (propiedad Start), y precisamente, será cuando la variable varShow tome por valor true.

Por último, utilizaremos también esta variable en la propiedad Visible del grupo (5), de esta forma, el mensaje se mostrará únicamente durante el tiempo indicado. El temporizador, lo podemos poner como no visible siempre.

Ahora sí, si volvemos al botón que hemos creado para mostrar el mensaje por pantalla, únicamente tendremos que hacer una pequeña modificación en la propiedad OnSelect:

Con esto, forzaremos que se ejecute la propiedad OnReset del componente, y de esta forma, la variable varShow tomará el valor true, con lo que se mostrará el mensaje, y pasados n segundos, varShow pasará a ser false debido a la propiedad OnTimerEnd, por lo que el mensaje desaparecerá de la pantalla.

Llegados a este punto, ya tenemos un sistema donde podremos crear nuestros propios mensajes con iconos, formato y duración personalizados.

No obstante, todavía no podemos recuperar todos los mensajes que la aplicación ha ido enviando. Pues bien, es tan fácil como guardarlos en una colección, y mostrarlos en una galería. Para ello, modificaremos de nuevo la propiedad OnSelect del botón que genera el mensaje, quedando de la siguiente forma:

En una nueva pantalla, crearemos una galería que tendrá como origen de datos la colección colMessages (1). En esta pantalla también tendremos la posibilidad de ordenar los mensajes por fecha/hora (2), de eliminarlos todos (3), y también de buscar un mensaje en concreto (4).

Para navegar hacía este centro de mensajes, simplemente crearemos un icono en la pantalla que queramos, y haremos uso de la función Navigate.

Y ahora sí, hemos llegado al final del post, en el que hemos aprendido a crear nuestro propio sistema de mensajes, para aquellos casos en los que la función Notify no cubra todas nuestras necesidades.

Follow the power!