Cuadros, gráficos e imágenes dinámicas de PowerApps

En este tutorial, veremos cómo los gráficos e imágenes de PowerApps pueden mejorar nuestras aplicaciones.

Las imágenes y las visualizaciones no solo se suman a la apariencia general de la aplicación en la que está trabajando. También hacen que su aplicación se vea más profesional.

Muchas personas también entienden mejor los datos cuando se presentan visualmente. Esto significa que su aplicación también es más eficaz cuando se utilizan tablas, gráficos y otras formas de elementos visuales.

Tabla de contenido

• Uso de imágenes dinámicas en PowerApps
• Uso de tablas y gráficos de PowerApps
• Uso de variables de colección en gráficos de PowerApps
• Conclusión

Uso de imágenes dinámicas en PowerApps

Comencemos por ver cómo podemos usar imágenes dinámicas en PowerApps. Vamos a aplicar estas imágenes a una galería.

Para este ejemplo, vamos a utilizar un material de referencia llamado Estimaciones de pisos. Esta tabla, que vamos a usar como fuente de datos, tiene columnas para Nombre, Categoría, Precio y URL de la imagen.

Entonces, vayamos a la pestaña de fuentes de datos, hagamos clic en Conectores y vayamos a OneDrive, ya que ahí es donde se guarda el archivo.

Elegiremos el archivo correcto aquí.

Luego, tenemos que asegurarnos de traer la tabla correcta. En este caso, solo tenemos una tabla adjunta a ese archivo de Excel.

Dado que anteriormente adjunté los nombres de otras tablas como Table1 de otras fuentes de datos, verá que el que acabamos de usar ahora aparece como Table1_2.

Ahora, agreguemos una galería y elijamos una plantilla vertical.

Una vez que la galería aparece en la pantalla, podemos moverla donde la necesitemos o cambiar su tamaño según sea necesario.

Como ya adjuntamos Table1_2 a esta aplicación, ahora podemos verla como una opción en Fuente de datos.

Los datos de la tabla ahora aparecen dentro de nuestra galería.

Tenga en cuenta que es normal que los usuarios lleguen a esta pantalla y no vean ningún dato dentro de la galería. En casos como estos, todo lo que tenemos que hacer es actualizar la fuente de datos.

Para actualizar la fuente de datos, vamos a necesitar un botón que use la función Actualizar. Como puede ver, esto hace referencia a Table1_2.

Esto simplemente significa que la función Actualizar se aplicará a esa tabla específica a la que nos referimos.

Si observamos esta galería, podemos ver que el subtítulo actualmente muestra la columna ImageURL, mientras que el título muestra la columna Categoría.

Cambiemos el subtítulo a Precio y el Título a Nombre.

En cuanto a la imagen, verás que no hay opción para que nuestra imagen elegida se seleccione dinámicamente. La primera opción nos permite agregar un archivo de imagen, pero hacerlo individualmente para cada elemento llevará mucho tiempo.

Si elegimos un archivo existente, como esta imagen de un águila, llenará todos los espacios de imágenes de toda la galería. Evidentemente, no queremos que aparezca la misma imagen aquí.

Queremos que cada elemento muestre la imagen específica que representan estas URL de imagen en nuestra fuente de datos.

Para hacer esto dinámico, seleccionemos un elemento en la galería y elijamos la imagen de nuestro menú desplegable de propiedades en la parte superior. Por el momento, es igual a “eagle”, que es el archivo que elegimos anteriormente.

En su lugar, vamos a utilizar ThisItem.ImageURL.

Básicamente, esto hace referencia a cada elemento específico de la galería y obtiene la URL de la imagen adjunta.

Ahora, la galería muestra las diferentes imágenes provenientes de las URL en nuestra fuente de datos.

Esto agrega mucha funcionalidad a cualquier aplicación en la que trabajemos. En este caso, estamos viendo una lista de productos donde los clientes pueden ver cómo se ve cada artículo.

Pero si estamos trabajando en una aplicación que tiene una lista de clientes, por ejemplo, podemos usar el mismo enfoque y mostrar imágenes de cada persona en la galería para que sea más fácil reconocerlos.

Uso de tablas y gráficos de PowerApps

Esta vez, intentemos agregar gráficos a nuestra aplicación. Esta es otra representación visual de datos que puede ayudar a que nuestra aplicación sea más atractiva.

Sin duda, usar mosaicos de LuckyTemplates es la mejor manera de agregar gráficos de PowerApps a cualquier aplicación.

Cualquier usuario de LuckyTemplates sabe que uno de los puntos fuertes de la plataforma es la facilidad con la que se pueden realizar visualizaciones. Por lo tanto, es más fácil crear el gráfico en LuckyTemplates y luego usarlo como mosaico en PowerApps. De esta forma, los usuarios pueden interactuar con el cuadro o gráfico como si lo estuvieran usando en LuckyTemplates.

Por supuesto, hay gráficos integrados de PowerApps que también podemos usar. Sin embargo, estos gráficos son todos estáticos, lo que podría afectar el compromiso y la funcionalidad.

Sin embargo, estos gráficos integrados aún podrían ser útiles si su único objetivo es visualizar un conjunto de datos pequeño o si no está interesado en usar un gráfico más dinámico.

Para hacer eso, necesitamos una fuente de datos. En este ejemplo, vamos a utilizar estas dos columnas que muestran Ubicación e Ingresos.

Para usar esto como una fuente de datos, necesitamos convertirlo en una tabla.

Ahora que tenemos una tabla para usar, solo adjuntamos el archivo a PowerApps de la misma manera que lo hicimos antes. Aquí está el archivo llamado LocationRevenue.

En cuanto al nombre de la tabla, también se llama Table1.

Esto significa que una vez que lo elijamos, se mostrará como Table1_3.

Cuando miramos los datos con los que estamos trabajando, podemos ver que un gráfico de columnas sería el mejor formato para usar.

Por el momento, todavía muestra los datos de muestra predeterminados.

Necesitará una fuente de datos específica, que debería aparecer en la propiedad Elementos.

Usemos Table1_3 para este gráfico.

Ahora muestra los datos de la tabla que usamos como fuente.

Como cualquier otro elemento de PowerApps, podemos personalizar las propiedades del gráfico. Por ejemplo, podemos hacer que el tamaño de la fuente sea un poco más grande para que sea más fácil para los usuarios ver los datos.

Uso de variables de colección en gráficos de PowerApps

Otra forma de mostrar datos en gráficos es usar variables de colección . Si miramos la documentación de Microsoft PowerApps, muestra una fórmula de muestra.

Antes de usar esta fórmula, agreguemos un botón aquí primero.

En la propiedad OnSelect, copiemos y peguemos la fórmula del documento de MS. Como puede ver, esta fórmula usa la función Collect y hace referencia a la variable Revenue. A esta variable le sigue una lista de elementos.

Resaltemos el gráfico esta vez, vayamos a la propiedad Elementos y equiparémoslo con Ingresos.

Una vez hecho esto, cada vez que hagamos clic en el botón, se mostrará la lista de elementos asociados a la variable Ingresos.

Introducción a Power Apps: definición, características, funciones e importancia
Entornos de Power Apps: configuración adecuada de los elementos de la aplicación
Funciones y fórmulas de PowerApps | Una introducción

Conclusión

Los gráficos y las imágenes definitivamente agregan más valor a cualquier aplicación, especialmente cuando son dinámicas. Pueden ayudar a que los usuarios se sientan más comprometidos cuando usan la aplicación.

Pero incluso si decide no hacer que ninguno de sus gráficos o imágenes sea dinámico, tenga en cuenta que agregan valor de la misma manera.

El mero hecho de que pueda agregar alguna representación visual de datos ya mejora cualquier aplicación a pasos agigantados.

Mis mejores deseos,

Enrique