Crea tu propio sistema de mensajes en Power Apps usando componentes

Miquel Vidal Morales
Feb 11 · 6 min read

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 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)

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!

Follow the Power {Platform}, por Miquel Vidal

Blog sobre las BizApps de Microsoft, especialmente Power Platform

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store