Mostrar uma lista de itens no PowerAppsShow a list of items in PowerApps

Mostra uma lista de itens de qualquer origem de dados, adicionando um controlo Galeria à sua aplicação.Show a list of items from any data source by adding a Gallery control to your app. Este tópico utiliza o Excel como a origem de dados.This topic uses Excel as the data source. Filtre a lista, ao configurar o controlo Galeria para mostrar apenas os itens que correspondem ao critério do filtro num controlo Introdução 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.

Pré-requisitosPrerequisites

  1. Abra o PowerApps e clique ou toque em Novo junto ao lado esquerdo.Open PowerApps, and then click or tap New near the left edge.
  2. No mosaico Aplicação em branco, clique ou toque em Esquema de telemóvel.On the Blank app tile, click or tap Phone layout.
  3. Na caixa de diálogo Bem-vindo ao PowerApps Studio, clique ou toque em Ignorar.In the Welcome to PowerApps Studio dialog box, click or tap Skip.
  4. Adicione uma ligação à tabela FlooringEstimates no ficheiro do Excel.Add a connection to the FlooringEstimates table in the Excel file.
  5. (opcional) Adicione um controlo Galeria ao ecrã predefinido, ao clicar ou tocar no separador Inserir, clicar ou tocar em Galeria e, em seguida, clicar ou tocar num controlo Galeria que está vazio (em branco) ou que contém um conjunto predefinido de controlos.(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 opções incluem controlos Galeria que se deslocam horizontal ou verticalmente.These options include Gallery controls that scroll horizontally or vertically. Também pode adicionar um controlo Galeria que baseia automaticamente o tamanho na quantidade de conteúdo de cada item.You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    Adicionar galeria

  6. No separador Página Principal, clique ou toque em Novo ecrã.On the Home tab, click or tap New screen.

    Pode adicionar um ecrã de que está vazio, que se desloca, que contém um controlo Galeria ou que contém um formulário.You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. Clique ou toque em Listar ecrã para adicionar um ecrã que contém um controlo Galeria e outros controlos, como uma barra de pesquisa.Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    Nota: quer esteja a adicionar um controlo Galeria a um ecrã novo ou existente, clique ou toque perto da parte inferior do controlo Galeria para selecioná-lo, clique ou toque em Flooring Estimates no painel direito e, em seguida, clique ou toque num esquema diferente do painel Dados.Note: 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, deixe o esquema predefinido.For this tutorial, leave the default layout.

    Escolher o esquema de galeria

  8. Clique ou toque no controlo Galeria do ecrã que acabou de adicionar.Click or tap the Gallery control in the screen that you just added.
  9. No separador Propriedades do painel direito, clique ou toque em CustomGallerySample.On the Properties tab of the right-hand pane, click or tap CustomGallerySample.
  10. No painel Dados, clique ou toque em CustomGallerySample e clique ou toque em FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Selecionar a origem de dados

    O controlo Galeria mostra os dados de exemplo.The Gallery control shows the sample data.

    Mostrar dados

    Irá configurar a ordenação e pesquisa mais tarde neste tópico.You'll configure sort and search later in this topic.

Antes de efetuar qualquer personalização, escolha um esquema de controlo Galeria.Before you do any customization, decide on a Gallery control layout. O primeiro conjunto de controlos num controlo Galeria é o modelo, que determina como todos os dados no controlo Galeria são apresentados.The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. Selecione o modelo, ao clicar ou tocar perto da parte inferior do controlo Galeria e clicar ou tocar no ícone de lápis no canto superior esquerdo.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 o modelo de galeria

  2. Com o modelo ainda selecionado, adicione um controlo Etiqueta e mova-o e redimensione-o para que não se sobreponha a outros controlos no modelo.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.

    Adicionar etiqueta

  3. Abra o painel Dados, ao selecionar o modelo e clicar ou tocar em Flooring Estimates no painel direito.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.
  4. Selecione a etiqueta que adicionou anteriormente neste procedimento e abra a lista realçada no painel Dados.Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    Abrir a lista pendente

  5. Nessa lista, clique ou toque em Preço.In that list, click or tap Price.

    Alterar o enlace de etiqueta

    O controlo Galeria mostra os novos valores.The Gallery control shows the new values.

Galeria Final

A propriedade Itens de um controlo Galeria determina os itens que o mesmo irá mostrar.The Items property of a Gallery control determines which items it shows. Neste procedimento, configure a propriedade para que o controlo Galeria mostre apenas os itens para os quais o nome do produto contém o texto em 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.

Caixa de pesquisa de texto

  1. Selecione o controlo Galeria, ao clicar ou tocar junto à parte inferior desse controlo.Select the Gallery control by clicking or tapping near the bottom of that control.
  2. No separador Avançadas, defina a propriedade Itens do controlo Galeria para 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 obter mais informações sobre as funções desta fórmula, veja a referência de fórmulas.For more information about the functions in this formula, see the formula reference.

  3. Na caixa de pesquisa, escreva parte ou a totalidade de um nome de produto.Type part or all of a product name in the search box.

    O controlo Galeria mostra apenas os itens que cumprem os critérios de filtro.The Gallery control shows only those items that meet the filter criterion.

A propriedade Itens de um controlo Galeria determina a ordem na qual os itens são mostrados.The Items property of a Gallery control determines the order in which it shows items. Neste procedimento, configure essa propriedade para que o controlo Galeria mostre a ordem dos itens, conforme definido por ImageSortUpDown1.In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

Imagem para ordenação

  1. Defina a propriedade Itens do controlo Galeria para 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. Selecione o ícone de ordenação para alterar a ordem de ordenação do controlo Galeria pelos nomes dos produtos.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

Para ordenar e filtrar o controlo Galeria:To sort and filter your Gallery control:

  • Substitua as duas instâncias de DataSource nesta fórmula pelo nome da sua origem de dados.Replace both instances of DataSource in this formula with the name of your data source.
  • Substitua as duas instâncias de ColumnName pelo nome da coluna pela qual pretende ordenar e 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))

Realçar o item selecionadoHighlight the selected item

Defina a propriedade TemplateFill do controlo Galeria para uma fórmula que seja semelhante a este exemplo: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)

Alterar a seleção predefinidaChange the default selection

Defina a propriedade Predefinição do controlo Galeria para o registo que pretende selecionar por predefinição.Set the Gallery control's Default property to the record that you want to select by default. Por exemplo, especifique o quinto item na origem de dados FlooringEstimates:For example, specify the fifth item in the FlooringEstimates data source:

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

Neste exemplo, especifique o primeiro item na categoria Madeira da origem de dados FlooringEstimates:In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

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

Passos seguintesNext steps