Mostrar una lista de elementos en PowerAppsShow a list of items in PowerApps

Muestre una lista de elementos de cualquier origen de datos mediante la adición de un control Galería a la aplicación.Show a list of items from any data source by adding a Gallery control to your app. En este tema se utiliza Excel como origen de datos.This topic uses Excel as the data source. 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.Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

Requisitos previosPrerequisites

  1. Abra PowerApps y haga clic o pulse en Nueva aplicación cerca del borde izquierdo.Open PowerApps, and then click or tap New near the left edge.

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

  3. En el cuadro de diálogo PowerApps Studio, pulse o haga clic en Skip (Omitir).In the Welcome to PowerApps Studio dialog box, click or tap Skip.

  4. Agregue una conexión a la tabla FlooringEstimates del archivo de Excel.Add a connection to the FlooringEstimates table in the Excel file.

  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.(optional) Add a Gallery control to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a Gallery control that's empty (blank) or that contains a default set of controls.

    Estas opciones incluyen controles Galería que se desplazan de forma horizontal o vertical.These options include Gallery controls that scroll horizontally or vertically. También se puede agregar un control Galería que base automáticamente su tamaño en la cantidad de contenido de cada elemento.You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    Agregar galería

  6. En la pestaña Inicio, pulse o haga clic en Nueva pantalla.On the Home tab, click or tap New screen.

    Puede agregar una pantalla que esté vacía, que se desplace, que contenga un control Galería o que contenga un formulario.You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  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.Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    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 Datos.Whether you add a Gallery control to a new screen or an existing one, you can click or tap near the bottom of the Gallery control to select it, click or tap Flooring Estimates in the right-hand pane, and then click or tap a different layout in the Data pane. Para este tutorial, deje el diseño predeterminado.For this tutorial, leave the default layout.

    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.Click or tap the Gallery control in the screen that you just added.

  9. En la pestaña Propiedades del panel derecho, pulse o haga clic en CustomGallerySample.On the Properties tab of the right-hand pane, click or tap CustomGallerySample.

  10. En el panel Data (Datos), pulse o haga clic en CustomGallerySample y, después, en FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Seleccionar origen de datos

    El control Galería muestra los datos de ejemplo.The Gallery control shows the sample data.

    Mostrar datos

    La ordenación y la búsqueda se configurarán en este mismo tema más adelante.You'll configure sort and search later in this topic.

Antes de realizar cualquier personalización, elija un diseño del control Galería.Before you do any customization, decide on a Gallery control layout. El primer conjunto de controles de un control Galería es la plantilla, que determina el aspecto de todos los datos de dicho control.The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  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.Select the template by clicking or tapping near the bottom of the Gallery control and then clicking or tapping the pencil icon in the upper-left corner.

    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.With the template still selected, add a Label control, and then move and resize it so that it doesn't overlap with other controls in the template.

    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.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.

  4. Seleccione la etiqueta que ha agregado en este procedimiento y abra la lista resaltada en el panel Data (Datos).Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    Lista desplegable abierta

  5. En dicha lista, pulse o haga clic en Price.In that list, click or tap Price.

    Cambiar el enlace de la etiqueta

    El control Galería muestra los valores nuevos.The Gallery control shows the new values.

    Galería final

La propiedad Elementos de una control Galería determina los elementos que muestra.The Items property of a Gallery control determines which items it shows. 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.In this procedure, you configure that property so that the Gallery control shows only those items for which the product name contains the text in 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.Select the Gallery control by clicking or tapping near the bottom of that control.

  2. En la pestaña Opciones avanzadas, establezca la pestañaElementos del control Galería en esta fórmula:On the Advanced tab, set the Items property of the Gallery control to this formula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))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.For more information about the functions in this formula, see the formula reference.

  3. Escriba una parte o la totalidad de un nombre de producto en el cuadro de búsqueda.Type part or all of a product name in the search box.

    El control Galería muestra solo los elementos que cumplen el criterio de filtro.The Gallery control shows only those items that meet the filter criterion.

La propiedad Elementos de un control Galería determina el orden en que muestra los elementos.The Items property of a Gallery control determines the order in which it shows items. En este procedimiento, configurará esa propiedad para que el control Galería muestra el orden de los elementos según lo establecido por ImageSortUpDown1.In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

Imagen para ordenar

  1. Establezca la propiedad Elementos del control Galería en esta fórmula:Set the Items property of the Gallery control to this formula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))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.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

Para ordenar y filtrar un control Galería:To sort and filter your Gallery control:

  • Reemplace las dos instancias de DataSource de esta fórmula por el nombre del origen de datos.Replace both instances of DataSource in this formula with the name of your data source.

  • Reemplace las dos instancias de ColumnName por el nombre de la columna por la que desea ordenar y filtrar.Replace both instances of ColumnName with the name of the column by which you want to sort and filter.

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

Resalte del elemento seleccionadoHighlight the selected item

En la propiedad RellenoDePlantilla del control Galería escriba una fórmula similar a la de este ejemplo:Set the Gallery control's TemplateFill property to a formula that's similar to this example:

If(ThisItem.IsSelected, LightCyan, White)If(ThisItem.IsSelected, LightCyan, White)

Cambio de la elección predeterminadaChange the default selection

En la propiedad Default del control Galería, especifique el registro que desea que se seleccione de manera predeterminada.Set the Gallery control's Default property to the record that you want to select by default. Por ejemplo, especifique el quinto elemento del origen de datos FlooringEstimates:For example, specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))Last(FirstN(FlooringEstimates, 5))

En este ejemplo, especifique el primer elemento de la categoría Hardwood del origen de datos FlooringEstimates:In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

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

Pasos siguientesNext steps

Aprenda a trabajar con formularios y fórmulas.Learn how to work with forms and formulas.