Mostrar, ordenar y filtrar datos en la galería de una aplicación de lienzo

Cree una galería para mostrar datos sobre varios productos y ordenar y filtrar esa información.

En Power Apps, use una galería para mostrar varios elementos relacionados, de forma muy similar a un catálogo de productos. Las galerías son excelentes para mostrar nombres de productos, precios y recuentos de unidades. En este artículo, creará una galería y ordenará y filtrará la información mediante las funciones de Power Fx. Cuando se selecciona un elemento, un borde lo resalta.

Requisitos previos

• Suscríbase en Power Apps y luego inicie sesión con las mismas credenciales utilizadas para la suscripción.
• Cree una aplicación de tableta a partir de una plantilla o desde cero.
• Aprenda a configurar un control.

Mostrar datos en una galería

1. Cree una colección denominada Inventory agregando un control Button y estableciendo su propiedad OnSelect en la fórmula siguiente:

   ClearCollect(
       Inventory,
       { ProductName: "Europa",    UnitsInStock: 25 },
       { ProductName: "Ganymede",  UnitsInStock: 32 },
       { ProductName: "Callisto",  UnitsInStock: 12 },
       { ProductName: "Io",        UnitsInStock: 47 },
       { ProductName: "Titan",     UnitsInStock: 18 }
   )
   

2. Seleccione el botón mientras mantiene presionada la tecla Alt (o seleccione Vista previa y, a continuación, el botón) para rellenar la colección Inventario con cinco productos, cada uno con un nombre de producto y un recuento de unidades.

   Nota

   Este artículo utiliza una pequeña colección integrada para que puedas seguir el ejemplo sin necesidad de datos externos. En escenarios de producción, conéctese a un origen de datos real, como SharePoint o Microsoft Dataverse.

3. En la pestaña Insertar, seleccione Diseño>Galería horizontal.

4. En el panel derecho, seleccione un diseño que muestre un título y un subtítulo.

5. Establezca la propiedad Items de la galería en Inventario.

6. Cambie el nombre de la galería a ProductGallery y cambie su tamaño para mostrar tres productos al mismo tiempo.

7. Seleccione la etiqueta inferior en el primer elemento de la galería.

   Nota

   Al cambiar el primer elemento de una galería, el mismo cambio se aplica automáticamente a todos los demás elementos.

8. Establezca la propiedad Text de la etiqueta en:

   ThisItem.UnitsInStock
   

La etiqueta muestra ahora el número de unidades en stock para cada producto.

Resaltar el elemento de la galería seleccionado

1. Seleccione cualquier elemento de la galería excepto el primero y, a continuación, seleccione el icono de edición (lápiz) en la esquina superior izquierda para entrar en el modo de edición de plantillas.

2. En la pestaña Insertar, seleccione Formas>Rectángulo. Aparece un rectángulo sólido en cada elemento de la galería.

3. En el panel Propiedades , establezca Color en Sin relleno (transparente).

4. En Borde, establezca el menú desplegable Estilo en Sólido y el valor de Grosor en 3.

5. Cambie el tamaño del rectángulo para rodear el contenido del elemento de la galería.

6. Establezca la propiedad Visible del rectángulo en:

   ThisItem.IsSelected
   

El borde azul ahora solo aparece alrededor del elemento seleccionado.

Ordenar y filtrar elementos en la galería

Ordenar en orden ascendente o descendente

1. Seleccione cualquier elemento de la galería excepto el primero para actualizar la propiedad Items de la galería.

2. Cambie la propiedad Items para ordenar por nombre de producto en orden ascendente:

   Sort(Inventory, ProductName)
   

3. Para ordenar en orden descendente, cambie la propiedad Items a:

   Sort(Inventory, ProductName, SortOrder.Descending)
   

Filtrar elementos con un control deslizante y una entrada de texto

1. En la pestaña Insertar, seleccioneControl deslizante>. Cambie el nombre del control deslizante a StockFilter y colótrelo debajo de la galería.

2. Establezca el intervalo del control deslizante para que coincida con los datos:

   • Establezca Min en: Min(Inventory, UnitsInStock)
   • Establezca Max en: Max(Inventory, UnitsInStock)

3. Seleccione cualquier elemento de la galería excepto el primero y establezca la propiedad Items en:

   Filter(Inventory, UnitsInStock <= StockFilter.Value)
   

4. Seleccione Vista previa (F5) y ajuste el control deslizante para ver la galería filtra los productos por cantidad de existencias.

5. Para filtrar también por nombre de producto, agregue un control Entrada de texto (en la pestaña Insertar , seleccione Entrada>de texto de entrada), cámbielo NameFilter y colóquelo debajo del control deslizante.

6. Actualice la propiedad Items para combinar ambos filtros:

   Filter(Inventory, UnitsInStock <= StockFilter.Value && NameFilter.Text in ProductName)
   

7. En Vista previa, establezca el control deslizante en 30 y escriba g en la entrada de texto. La galería muestra solo productos con 30 unidades o menos en stock and con un nombre de producto que contiene la letra "g".

Sugerencias y trucos

• Seleccione el botón de vista previa (F5) en cualquier momento para probar lo que ha compilado.
• Puede cambiar el tamaño y cambiar la posición de los controles mediante arrastrar y colocar.
• Presione Esc o seleccione X para cerrar la ventana de vista previa.
• Para cambiar todos los elementos de una galería a la vez, seleccione el primer elemento de la galería.
• Para actualizar las propiedades de nivel de galería (como Items o ShowScrollbar), seleccione cualquier elemento excepto el primero.

Resumen

En este artículo, encontrarás:

• Ha creado una colección con datos de producto de ejemplo.
• Se muestran los datos de recopilación en una galería horizontal.
• Etiquetas configuradas para mostrar valores de campo de cada registro.
• Se ha agregado un borde de selección alrededor del elemento de la galería activa.
• Elementos de la galería ordenados por nombre de producto en orden ascendente y descendente.
• Se usa un control deslizante y una entrada de texto para filtrar los productos por cantidad y nombre de existencias.