Filtros, búsquedas y ordenación en Power Apps

Image for post
Image for post

Los que venimos del mundo del ERP y del CRM, echamos mucho en falta en las aplicaciones de tipo lienzo (canvas) la posibilidad de filtrar, buscar y/o ordenar información en una tabla. En este artículo veremos cómo dotar a las tablas de datos o galerías con estas funcionalidades.

Filtros

Disponemos de una lista de clientes y necesitamos que el usuario pueda filtrar los clientes según su estado. Esta tabla tiene como origen de datos la colección colCustomers, con los siguientes campos:

Image for post
Image for post

Primero de todo, añadiremos a la app un control del tipo Drop Down llamado drpFiltroEstado, que nos permita escoger entre los distintos valores que pueda tomar el estado de un cliente, además de la opción “Todos” para contemplar todos los estados.

Para tal propósito, crearemos una colección de elementos, colEstados, que contenga estos valores:

Image for post
Image for post

A continuación, utilizaremos esta colección en la propiedad Items del control desplegable.

Image for post
Image for post

Por último, tendremos que modificar la expresión de la propiedad Items de la tabla para que se aplique el filtro. No obstante, hay que tener en cuenta que si el valor seleccionado es “Todos”, no debe aplicarse ningún filtro.

Image for post
Image for post

Para ello, hemos utilizado la función Filter con la ayuda de un If, para contemplar el caso de todos los estados.

Image for post
Image for post

Barra de búsqueda

Para los campos de texto como el ID o el nombre del cliente, es evidente que no tiene mucho sentido utilizar un desplegable para filtrar. En estos casos, la mejor solución es disponer de una barra de búsqueda en la que el usuario podrá introducir cualquier texto como filtro.

En primer lugar, crearemos un campo de texto llamado txtFiltroBuscar. A continuación, modificaremos de nuevo la propiedad Items de la tabla para que se aplique el filtro automáticamente en los campos alfanuméricos.

Image for post
Image for post

En este caso, hemos utilizado la función Search, indicándole que busque en las columnas ID y Nombre cualquier coincidencia con el texto introducido por el usuario. Destacar que no es necesario que el texto sea idéntico al valor de la tabla.

No obstante, ¿qué pasaría si tenemos muchos campos alfanuméricos y queremos que el usuario indique exactamente en qué campo quiere buscar? En este caso, podemos crear otra colección de elementos llamada colCamposFiltro en la que tendremos todos los campos disponibles para filtrar. Y al igual que en el filtro del punto 1, utilizaremos esta colección en un control desplegable.

Image for post
Image for post

A continuación, modificaremos de nuevo la fórmula de la propiedad Items de la tabla, para que en vez de buscar en todas las columnas, busque en la columna seleccionada por el usuario:

Image for post
Image for post

Pero… sorpresa! La función Search actualmente nos obliga a utilizar directamente un string para indicar el nombre de la columna, no podemos utilizar variables ni hacer referencia a otro control. En el siguiente link, podéis votar esta propuesta para que incorporen dicha funcionalidad.

Ordenación

Por último, pero no menos importante, veremos otra de las funcionalidades básicas en una tabla o listado, la posibilidad de ordenar por cualquiera de sus campos.

Empezaremos añadiendo un icono al lado de la etiqueta de cada campo:

Image for post
Image for post

En cada uno de los iconos, tendremos que modificar las siguientes propiedades (evidentemente adaptando las fórmulas al nombre de cada campo):

OnSelect

Al hacer click en uno de los iconos, la variable varOrderByField se establece con el valor del campo seleccionado, mientras que la variable varOrderDescenging cambia de descendente a ascendente o viceversa.

Image for post
Image for post

Fill

Utilizaremos esta propiedad para que el usuario vea de forma rápida qué campo se está utilizando para ordenar, mostrando el fondo del icono en color violeta.

Image for post
Image for post

Icon

El icono mostrado variará en función de si estamos utilizando el campo en cuestión para ordenar, y también del orden, ya sea ascendente o descendente.

Image for post
Image for post

Por último, tendremos que modificar de nuevo la propiedad Items de la tabla, para que tenga en cuenta la ordenación:

Image for post
Image for post

En este caso, hemos utilizado la fórmula SortByColumns, indicándole el campo sobre el cual se tiene que ordenar ( varOrderByField), además de la dirección ( varOrderDescending), ascendente o descendente.

Image for post
Image for post

Con esto terminamos este tutorial, con la esperanza de que en un futuro se incorporen por defecto estas funcionalidades en las tablas y galerías de Power Apps y no tengamos que hacerlo manualmente. Es importante mencionar que todo lo tratado en este artículo, puede aplicarse perfectamente también en una galería, utilizando la misma propiedad Items que la tabla.

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