Mostrar, ordenar y filtrar los datos en una galería de PowerAppsShow, sort, and filter data in a PowerApps gallery

Cree una galería para mostrar imágenes y texto sobre diversos productos, y ordene y filtre esa información.Create a gallery to show images and text about several products, and sort and filter that information.

En PowerApps, puede usar una galería para mostrar varios elementos relacionados, como si se tratara de un catálogo.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Las galerías son ideales para mostrar información sobre productos, como nombres y precios.Galleries are great for showing information about products, such as names and prices. En este tema, crearemos una galería y ordenaremos y filtraremos la información mediante el uso de funciones similares a las de Excel.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Además, cuando se seleccione un elemento, se colocará un borde a su alrededor.Also, when an item is selected, a border is placed around the item.

Nota

En este tema se usa una aplicación de tableta.This topic uses a tablet app. Puede usar una aplicación de teléfono, pero deberá cambiar el tamaño de algunos de los controles.You can use a phone app but you will need to resize some of the controls.

Requisitos previosPrerequisites

  • Regístrese en PowerApps e instálelo.Sign up for PowerApps and install PowerApps. Cuando abra PowerApps, inicie sesión con las mismas credenciales que usó para registrarse.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Cree una aplicación de tableta a partir de una plantilla, de datos o desde cero.Create a tablet app from a template, from data, or from scratch.
  • Tiene que saber configurar un control.Learn how to configure a control.
  • En estos pasos se usa CreateFirstApp como datos de entrada de ejemplo, que incluye imágenes .jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. El archivo zip incluye un archivo XML que se puede convertir a Excel.The zip file includes an XML file that can be converted to Excel. De lo contrario, PowerApps lee automáticamente los archivos dentro los archivos .zip y lo importa correctamente.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Puede descargar y usar estos datos de ejemplo o importar los suyos propios.You can download and use this sample data, or import your own.
  1. Cree una colección denominada Inventory con los datos de ejemplo.Create a collection named Inventory using the sample data. Siga estos pasos:Steps include:

    1. En la pestaña Insertar, seleccione Controles e Importar:On the Insert tab, select Controls, and then select Import:

    2. Establezca la propiedad AlSeleccionar del control de importación en la siguiente fórmula:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Seleccione el botón Importar datos para abrir el Explorador de Windows.Select the Import Data button to open Windows Explorer. Seleccione CreateFirstApp.zip y Abrir.Select CreateFirstApp.zip, and select Open.
    4. En el menú Archivo, seleccione Colecciones.In the File menu, select Collections. La colección Inventory se muestra con los datos que ha importado:The Inventory collection is listed with the data you imported:

      Acaba de crear la colección Inventory, que contiene información sobre cinco productos, incluida una imagen del diseño, el nombre del producto y el número de unidades disponibles.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      Nota

      El control de importación se usa para importar datos en forma de Excel y crear la colección.The import control is used to import Excel-like data and create the collection. El control de importación importa los datos cuando se crea la aplicación y se obtiene una vista previa de esta.The import control imports data when you are creating your app, and previewing your app. Actualmente, el control de importación no importa datos cuando se publica la aplicación.Currently, the import control does not import data when you publish your app.

  2. Seleccione la flecha Atrás para volver al diseñador.Select the back arrow to return to the designer.
  3. En la pestaña Insertar, haga clic o pulse en Galería y luego haga clic o pulse en la galería Horizontal.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. En el panel derecho, haga clic o pulse en la opción en la que el título y el subtítulo se superponen en superposición en el gráfico:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Establezca la propiedad Items de la galería en Inventory:Set the Items property of the gallery to Inventory:

  6. Cambie el nombre de la galería a ProductGallery y muévala de modo que no bloquee los demás controles.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Cambie el tamaño de la galería para que muestre tres productos:Resize the gallery so it shows three products:

  7. En el primer elemento de la galería, seleccione la etiqueta inferior:In the first item of the gallery, select the bottom label:

    Nota

    Cuando se cambia el primer elemento de una galería, se cambian automáticamente los demás elementos de la galería.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Establezca la propiedad Text de la etiqueta en la expresión siguiente:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Al hacerlo, en la etiqueta se muestran las unidades disponibles de cada producto:When you do this, the label shows the units in stock for each product:

Nota

De forma predeterminada, la propiedad Text de la etiqueta superior está establecida en ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Puede cambiarla a cualquier otro elemento de la colección.You can change it to any other item in your collection. Por ejemplo, si la colección tiene los campos ProductDescription o Price, puede establecer la etiqueta en ThisItem!ProductDescription o ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Mediante estos pasos, ha importado datos que incluyen imágenes .jpg en una colección.Using these steps, you imported data that includes .jpg images into a collection. Después, ha agregado una galería en la que se muestran los datos y ha configurado una etiqueta para mostrar las unidades disponibles de cada producto.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Seleccione un elemento cualquiera de la galería excepto el primero.Select any item in the gallery except the first one. Aparece el icono de edición en la esquina superior izquierda.The edit icon displays (upper left corner). Seleccione el icono de edición:Select the edit icon:
  2. En la pestaña Insertar, seleccione Formas y, luego, el rectángulo.On the Insert tab, select Shapes, and then select the rectangle. Aparece un rectángulo sólido azul en cada elemento de la galería.A blue solid rectangle appears in each gallery item.
  3. En la pestaña Inicio, seleccione Relleno y, después, Sin relleno.On the Home tab, select Fill, and then select No Fill.
  4. Seleccione Borde, Estilo de borde y la línea sólida.Select Border, select Border Style, and then select the solid line.
  5. Seleccione Borde de nuevo y establezca el grosor en 3.Select Border again, and set the thickness to 3. Cambie el tamaño del rectángulo de modo que rodee el elemento de la galería.Resize the rectangle so that it surrounds the gallery item. Ahora los elementos de la galería tienen un borde azul y deberían tener un aspecto similar al siguiente:The items in your gallery now have a blue border and should look similar to the following:
  6. En la pestaña Forma, seleccione Visible y escriba la siguiente fórmula en la barra de fórmulas:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    Un rectángulo azul rodea la selección actual en la galería.A blue rectangle surrounds the current selection in a gallery. Seleccione algunos elementos de la galería para confirmar que el rectángulo aparece alrededor de cada elemento seleccionado.Select a few gallery items to confirm that the rectangle appears around each item that you select. Recuerde que también puede abrir Vista previa para ver y probar lo que está creando.Remember, you can also open Preview to see and test what you're creating.

Sugerencia

Seleccione el rectángulo, Reordenar en la pestaña Inicio y Enviar al fondo.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Con esta característica, puede seleccionar un elemento de galería sin que el borde bloquee nada.Using this feature, you can select a gallery item without the border blocking anything.

Mediante estos pasos, ha agregado un borde alrededor de la selección actual en la galería.Using these steps, you added a border around the current selection in the gallery.

Mediante estos pasos, vamos a ordenar los elementos de la galería en orden ascendente y descendente.In these steps, we are going to sort the gallery items in ascending and descending order. Además, vamos a agregar un control deslizante para "filtrar" los elementos de la galería por las unidades disponibles que elija.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Ordenar en orden ascendente o descendenteSort in ascending or descending order

  1. Seleccione un elemento cualquiera de la galería excepto el primero.Select any item in the gallery except the first one.
  2. La propiedad Items está establecida actualmente en Inventory (el nombre de la colección).The Items property is currently set to Inventory (the name of your collection). Cámbiela a lo siguiente:Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    Cuando lo haga, los elementos de la galería se ordenarán por nombre de producto en orden ascendente: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Pruebe un orden descendente.Try descending order. Establezca la propiedad Elementos de la galería en la siguiente fórmula:Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. Agregue un control deslizante (pestaña Insertar > Controles), cambie su nombre a StockFilter y muévalo debajo de la galería.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Configure el control deslizante de modo que los usuarios no puedan establecerlo en un valor fuera del intervalo de unidades disponibles:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. En la pestaña Contenido, seleccione Mín. y escriba la expresión siguiente:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. En la pestaña Contenido, seleccione Máx. y escriba la expresión siguiente:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Seleccione un elemento cualquiera de la galería excepto el primero.Select any item in the gallery except the first one. Establezca la propiedad Items de la galería en la expresión siguiente:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. En Vista previa, ajuste el control deslizante en un valor comprendido entre la cantidad mínima y máxima en la galería.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. A medida que ajuste el control deslizante, la galería mostrará solo los productos con una cantidad inferior al valor que elija:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Ahora vamos a agregar un filtro:Now, let's add to our filter:

  1. Vuelva al diseñador.Go back to the designer.
  2. En la pestaña Insertar, seleccione Texto, elija Texto de entrada y cambie el nombre del control nuevo a NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Mueva el control de texto debajo del control deslizante.Move the text control below the slider.
  3. Establezca la propiedad Items de la galería en la expresión siguiente:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. En Vista previa, establezca el control deslizante en 30 y escriba la letra g en el control de entrada de texto.In Preview, set the slider to 30, and type the letter g in the text-input control. En la galería se muestra el único producto con menos de 30 unidades disponibles y con un nombre que empieza por la letra "g":The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

consejos y trucosTips and Tricks

  • En cualquier momento, puede seleccionar el botón de vista previa () para ver lo que ha creado y probarlo.At anytime, you can select the preview button () to see what you created and test it.
  • Al diseñar la aplicación, puede volver a cambiar el tamaño de los controles y moverlos haciendo clic en ellos y arrastrándolos.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Presione ESC o seleccione la X para cerrar la ventana de vista previa.Press ESC or select the X to close the preview window.
  • Cuando use una galería, seleccione el primer elemento para cambiar todos los elementos de la galería.When using a gallery, select the first item in the gallery to change all items in the gallery. Por ejemplo, seleccione el primer elemento para agregar un borde a todos los elementos de la galería.For example, select the first item to add a border to all items in the gallery.
  • Para actualizar las propiedades de la galería, seleccione un elemento cualquiera de la galería excepto el primero.To update the properties of the gallery, select any item in the gallery except the first one. Por ejemplo, seleccione el segundo elemento para actualizar la propiedad Items, ShowScrollbar u otra propiedad que se aplique a la galería (no a los elementos de la galería).For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

Qué ha aprendidoWhat you learned

En este tema:In this topic, you:

  • Ha creado una colección, ha importado datos que incluían imágenes .jpg en esta colección y ha hecho que los datos aparecieran en una galería.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Debajo de cada imagen de la galería, ha configurado una etiqueta que indica las unidades disponibles de ese elemento.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Ha agregado un borde alrededor del elemento que se seleccione.Added a border around the item that you select.
  • Ha ordenado los elementos por nombre de producto de manera ascendente y descendente.Sorted the items by product name in ascending and descending order.
  • Ha agregado un control deslizante y un control de texto de entrada para filtrar los productos por unidades disponibles y nombre de producto.Added a slider and an input text control to filter the products by units in stock and product name.