Mostrar, ordenar e filtrar dados numa galeria do PowerAppsShow, sort, and filter data in a PowerApps gallery

Crie uma galeria para mostrar as imagens e texto sobre os vários produtos, e ordene e filtre essas informações.Create a gallery to show images and text about several products, and sort and filter that information.

No PowerApps, pode utilizar uma galeria para mostrar vários itens relacionados, tal como vê num catálogo.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. A galerias são ótimas para mostrar informações sobre produtos, como nomes e preços.Galleries are great for showing information about products, such as names and prices. Neste tópico, vamos criar uma galeria e ordenar e filtrar as informações com funções semelhantes às do Excel.In this topic, we create a gallery and sort and filter the information using Excel-like functions. Além disso, quando um item é selecionado, é colocado um limite à volta do item.Also, when an item is selected, a border is placed around the item.

Nota

Este tópico utiliza uma aplicação de tablet.This topic uses a tablet app. Pode utilizar uma aplicação para telemóvel, mas terá de redimensionar alguns dos controlos.You can use a phone app but you will need to resize some of the controls.

Pré-requisitosPrerequisites

  • Inscreva-se no PowerApps e instale-o.Sign up for PowerApps and install PowerApps. Quando abrir o PowerApps, inicie sessão com as mesmas credenciais que utilizou para se inscrever.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Crie uma aplicação para tablet a partir de um modelo, de dados ou de raiz.Create a tablet app from a template, from data, or from scratch.
  • Saiba como configurar um controlo.Learn how to configure a control.
  • Estes passos utilizam o CreateFirstApp como dados de entrada de exemplo, que inclui imagens .jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. O ficheiro zip inclui um ficheiro XML que pode ser convertido para Excel.The zip file includes an XML file that can be converted to Excel. Caso contrário, o PowerApps lê automaticamente os ficheiros .zip e importa-os com êxito.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Pode transferir e utilizar estes dados de exemplo ou importar os seus próprios.You can download and use this sample data, or import your own.
  1. Criar uma coleção designada Inventário com os dados de exemplo.Create a collection named Inventory using the sample data. Os passos incluem:Steps include:

    1. No separador Inserir, selecione Controlos e, em seguida, selecione Importar:On the Insert tab, select Controls, and then select Import:

    2. Defina a propriedade OnSelect do controlo de importação para a seguinte fórmula:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Selecione o botão Importar Dados para abrir o Explorador do Windows.Select the Import Data button to open Windows Explorer. Selecione CreateFirstApp.zip e selecione Abrir.Select CreateFirstApp.zip, and select Open.
    4. No menu Ficheiro, selecione Coleções.In the File menu, select Collections. A recolha de Inventário está listada com os dados que importou:The Inventory collection is listed with the data you imported:

      Acabou de criar a coleção de Inventário, que contém informações sobre cinco produtos, incluindo uma imagem de conceção, o nome do produto e o número de unidades em stock.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

      O controlo de importação é utilizado para importar dados como o Excel e criar a coleção.The import control is used to import Excel-like data and create the collection. O controlo de importação importa dados quando estiver a criar a sua aplicação e a pré-visualizar a sua aplicação.The import control imports data when you are creating your app, and previewing your app. Atualmente, o controlo de importação não importa dados quando publica a sua aplicação.Currently, the import control does not import data when you publish your app.

  2. Selecione a seta para trás para voltar ao estruturador.Select the back arrow to return to the designer.
  3. No separador Inserir, clique ou toque em Galeria e, em seguida, clique ou toque na galeria Horizontal.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. No painel da direita, clique ou toque na opção em que o título e o subtítulo sobrepõem o gráfico:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Defina a propriedade Items da galeria como Inventário:Set the Items property of the gallery to Inventory:

  6. Mude o nome de galeria para ProductGallery e mova a galeria, para que não bloqueie os outros controlos.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Redimensione a galeria, para que mostre três produtos:Resize the gallery so it shows three products:

  7. No primeiro item de galeria, selecione a etiqueta inferior:In the first item of the gallery, select the bottom label:

    Nota

    Quando altera o primeiro item em qualquer galeria, altera automaticamente todos os outros itens na galeria.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Defina a propriedade Texto da etiqueta para a seguinte expressão:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Ao fazê-lo, a etiqueta mostra as unidades em stock para cada produto:When you do this, the label shows the units in stock for each product:

Nota

Por predefinição, a propriedade Texto da etiqueta superior está definida como ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Pode alterá-la para qualquer outro item na sua coleção.You can change it to any other item in your collection. Por exemplo, se a coleção tiver os campos ProductDescription ou Preço, pode definir a etiqueta para ThisItem!ProductDescription ou ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Com estes passos, importou os dados que incluem imagens .jpg para uma coleção.Using these steps, you imported data that includes .jpg images into a collection. Em seguida, adicionou uma galeria que apresenta os dados e configurou uma etiqueta para mostrar as unidades em stock para cada produto.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Selecione qualquer item da galeria, exceto o primeiro.Select any item in the gallery except the first one. O ícone de edição é apresentado (canto superior esquerdo).The edit icon displays (upper left corner). Selecione o ícone de edição:Select the edit icon:
  2. No separador Inserir, selecione Formas e, em seguida, selecione o retângulo.On the Insert tab, select Shapes, and then select the rectangle. Um retângulo sólido azul é apresentado em cada item da galeria.A blue solid rectangle appears in each gallery item.
  3. No separador Base, selecione Preencher e, em seguida, selecione Não Preencher.On the Home tab, select Fill, and then select No Fill.
  4. Selecione Limite, selecione Estilo do Limite e, em seguida, selecione a linha sólida.Select Border, select Border Style, and then select the solid line.
  5. Selecione Limite novamente e defina a espessura para 3.Select Border again, and set the thickness to 3. Redimensione o retângulo de modo a que rodeie o item da galeria.Resize the rectangle so that it surrounds the gallery item. Os itens na sua galeria têm agora um limite azul e devem ter um aspeto semelhante ao seguinte:The items in your gallery now have a blue border and should look similar to the following:
  6. No separador Forma, selecione Visível e, em seguida, introduza a seguinte fórmula na Barra de Fórmula:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

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

    Um retângulo azul rodeia a seleção atual numa galeria.A blue rectangle surrounds the current selection in a gallery. Selecione alguns itens da galeria para confirmar que o retângulo é apresentado em torno de cada item que selecionar.Select a few gallery items to confirm that the rectangle appears around each item that you select. Lembre-se de que também pode abrir a Pré-visualização para ver e testar o que estiver a criar.Remember, you can also open Preview to see and test what you're creating.

Dica

Selecione o retângulo, selecione Reordenar no separador Base e, em seguida, selecione Enviar para Anterior.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. Ao utilizar esta funcionalidade, pode selecionar um item da galeria sem o limite bloquear nada.Using this feature, you can select a gallery item without the border blocking anything.

Ao utilizar estes passos, adicionou um limite em redor da seleção atual na galeria.Using these steps, you added a border around the current selection in the gallery.

Nestes passos, vamos para ordenar os itens da galeria por ordem ascendente e descendente.In these steps, we are going to sort the gallery items in ascending and descending order. Além disso, iremos adicionar um controlo de deslize para "filtrar" itens da galeria pelas unidades no stock que escolher.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Ordenar por ordem ascendente ou descendenteSort in ascending or descending order

  1. Selecione qualquer item da galeria, exceto o primeiro.Select any item in the gallery except the first one.
  2. A propriedade Itens está atualmente configurada para o Inventário (o nome da sua coleção).The Items property is currently set to Inventory (the name of your collection). Altere-a para o seguinte:Change it to the following:

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

    Ao fazê-lo, os itens da galeria são ordenados pelo nome do produto por ordem ascendente: When you do this, the items in the gallery are sorted by the product name in ascending order:

    Experimente por ordem descendente.Try descending order. Defina a propriedade Itens da galeria como a fórmula seguinte:Set the Items property of the gallery to the following formula:

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

  1. Adicione um Controlo de deslize (separador Inserir > Controlos), mude o nome para StockFilter e mova-o sob a galeria.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. Configure o controlo de deslize para que os utilizadores não possam defini-lo para um valor fora do intervalo de unidades no stock:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. No separador Conteúdo, selecione Mín e, em seguida, introduza a seguinte expressão:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. No separador Conteúdo, selecione Máx e, em seguida, introduza a seguinte expressão:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Selecione qualquer item da galeria, exceto o primeiro.Select any item in the gallery except the first one. Defina a propriedade Itens da galeria como a expressão seguinte:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. Na Pré-visualização, ajuste o controlo de deslize para um valor entre a quantidade mais elevado e mais baixa na galeria.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. À medida que ajusta o controlo de deslize, a galeria mostra apenas os produtos que são inferiores ao valor que escolher:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

Agora, vamos adicionar ao nosso filtro:Now, let's add to our filter:

  1. Voltar para o estruturador.Go back to the designer.
  2. No separador Inserir, selecione Texto, selecione Introdução de texto e mude o nome do novo controlo para NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Mova o controlo de texto abaixo do controlo de deslize.Move the text control below the slider.
  3. Defina a propriedade Itens da galeria como a expressão seguinte:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. Na Pré-visualização, defina o controlo de deslize para 30 e escreva a letra g no controlo de introdução de texto.In Preview, set the slider to 30, and type the letter g in the text-input control. A galeria mostra o único produto com menos de 30 unidades em stock e tem um nome com a letra "g":The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

Sugestões e TruquesTips and Tricks

  • Pode selecionar o botão de pré-visualização () em qualquer altura para ver o que criou e testá-lo.At anytime, you can select the preview button () to see what you created and test it.
  • Ao conceber a sua aplicação, pode redimensionar os controlos e movê-los com a função de clicar e arrastar.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Prima ESC ou selecione o X para fechar a janela de pré-visualização.Press ESC or select the X to close the preview window.
  • Quando utilizar uma galeria, selecione o primeiro item na galeria para alterar todos os itens da galeria.When using a gallery, select the first item in the gallery to change all items in the gallery. Por exemplo, selecione o primeiro item para adicionar um limite em todos os itens da galeria.For example, select the first item to add a border to all items in the gallery.
  • Para atualizar as propriedades da galeria, selecione qualquer item da galeria, exceto o primeiro.To update the properties of the gallery, select any item in the gallery except the first one. Por exemplo, selecione o segundo item para atualizar os Itens, ShowScrollbar e outras propriedades que se aplicam à galeria (e não os itens na galeria).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).

O que aprendeuWhat you learned

Neste tópico, o utilizador:In this topic, you:

  • Criou uma coleção, importou dados que incluem imagens .jpg para essa coleção e mostrou os dados numa galeria.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Em cada imagem na galeria, configurou uma etiqueta que lista as unidades em stock para esse item.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Adicionou um limite à volta do item selecionado.Added a border around the item that you select.
  • Ordenou os itens por nome de produto por ordem ascendente e descendente.Sorted the items by product name in ascending and descending order.
  • Adicionou um controlo de deslize e um controlo de introdução de texto para filtrar os produtos por unidades no stock e nome de produto.Added a slider and an input text control to filter the products by units in stock and product name.