Muestre una lista de elementos de cualquier origen de datos mediante la adición de un control Galería a la aplicación. En este tema se utiliza Excel como origen de datos. Filtre la lista mediante la configuración del control Galería para mostrar únicamente aquellos elementos que coinciden con el criterio de filtro en un control Entrada de texto.

Requisitos previos

Adición de un control Galería

  1. Abra PowerApps y haga clic o pulse en Nueva aplicación cerca del borde izquierdo.

  2. En el icono Blank app (Aplicación vacía), pulse o haga clic en Phone layout (Diseño de teléfono).

  3. En el cuadro de diálogo PowerApps Studio, pulse o haga clic en Skip (Omitir).

  4. Agregue una conexión a la tabla FlooringEstimates del archivo de Excel.

  5. (opcional) Agregue un control Galería a la pantalla predeterminada, para lo que debe hacer clic o pulsar la pestaña Insertar, pulsar o hacer clic en Galería y, después, pulsar o hacer clic en un control Galería que esté vacío (en blanco) o que contenga un conjunto predeterminado de controles.

    Estas opciones incluyen controles Galería que se desplazan de forma horizontal o vertical. También se puede agregar un control Galería que base automáticamente su tamaño en la cantidad de contenido de cada elemento.

    Agregar galería

  6. En la pestaña Inicio, pulse o haga clic en Nueva pantalla.

    Puede agregar una pantalla que esté vacía, que se desplace, que contenga un control Galería o que contenga un formulario.

  7. Pulse o haga clic en Pantalla de lista para agregar una pantalla que contenga un control Galería y otros controles, como una barra de búsqueda.

    Nota: si agrega un control Galería a una pantalla nueva o a una existente, puede hacer clic o pulsar cerca de la parte inferior del control Galería para seleccionarlo, pulsar o hacer clic en Flooring Estimates en el panel derecho y, después, pulsar o hacer clic en otro diseño del panel Data (Datos). Para este tutorial, deje el diseño predeterminado.

    Elegir el diseño de la galería

  8. Pulse o haga clic en el control Galería de la pantalla que acaba de agregar.

  9. En la pestaña Propiedades del panel derecho, pulse o haga clic en CustomGallerySample.

  10. En el panel Data (Datos), pulse o haga clic en CustomGallerySample y, después, en FlooringEstimates.

    Seleccionar origen de datos

    El control Galería muestra los datos de ejemplo.

    Mostrar datos

    La ordenación y la búsqueda se configurarán en este mismo tema más adelante.

Agregar un control al control Galería

Antes de realizar cualquier personalización, elija un diseño del control Galería. El primer conjunto de controles de un control Galería es la plantilla, que determina el aspecto de todos los datos de dicho control.

  1. Seleccione la plantilla, para lo que debe hacer clic o pulsar cerca de la parte inferior del control Galería y, después, pulsar o hacer clic en el icono del lápiz en la esquina superior izquierda.

    Editar plantilla de galería

  2. Con la plantilla aún seleccionada, agregue un control Etiqueta y, después, muévalo y ajuste su tamaño para que no se superponga con otros controles de la plantilla.

    Agregar etiqueta

  3. Abra el panel Data (Datos), para lo que debe seleccionar la plantilla y, después, pulsar o hacer clic en Flooring Estimates en el panel derecho.

  4. Seleccione la etiqueta que ha agregado en este procedimiento y abra la lista resaltada en el panel Data (Datos).

    Lista desplegable abierta

  5. En dicha lista, pulse o haga clic en Price.

    Cambiar el enlace de la etiqueta

    El control Galería muestra los valores nuevos.

Galería final

Filtro del control Galería

La propiedad Elementos de una control Galería determina los elementos que muestra. En este procedimiento, se configura esa propiedad para que el control Galería muestre solo los elementos para los que el nombre del producto contenga el texto de TextSearchBox1.

Cuadro de búsqueda de texto

  1. Seleccione el control Galería, para lo que debe hacer clic o pulsar cerca de la parte inferior del control Galería.

  2. En la pestaña Opciones avanzadas, establezca la pestañaElementos del control Galería en esta fórmula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))

    Para más información acerca de las funciones de esta fórmula, consulte la referencia de las fórmulas.

  3. Escriba una parte o la totalidad de un nombre de producto en el cuadro de búsqueda.

    El control Galería muestra solo los elementos que cumplen el criterio de filtro.

Orden del control Galería

La propiedad Elementos de un control Galería determina el orden en que muestra los elementos. En este procedimiento, configurará esa propiedad para que el control Galería muestra el orden de los elementos según lo establecido por ImageSortUpDown1.

Imagen para ordenar

  1. Establezca la propiedad Elementos del control Galería en esta fórmula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

  2. Seleccione el icono de ordenación para cambiar el criterio de ordenación del control Galería por los nombres de los productos.

Para ordenar y filtrar un control Galería:

  • Reemplace las dos instancias de DataSource de esta fórmula por el nombre del origen de datos.
  • Reemplace las dos instancias de ColumnName por el nombre de la columna por la que desea ordenar y filtrar.

Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

Resalte del elemento seleccionado

En la propiedad RellenoDePlantilla del control Galería escriba una fórmula similar a la de este ejemplo:

If(ThisItem.IsSelected, LightCyan, White)

Cambio de la elección predeterminada

En la propiedad Default del control Galería, especifique el registro que desea que se seleccione de manera predeterminada. Por ejemplo, especifique el quinto elemento del origen de datos FlooringEstimates:

Last(FirstN(FlooringEstimates, 5))

En este ejemplo, especifique el primer elemento de la categoría Hardwood del origen de datos FlooringEstimates:

First(Filter(FlooringEstimates, Category = "Hardwood"))

Pasos siguientes