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

Mostrar uma lista de itens de qualquer fonte de dados, adicionando um controle Galeria para seu aplicativo.Show a list of items from any data source by adding a Gallery control to your app. Este tópico usa o Excel como fonte de dados.This topic uses Excel as the data source. Filtre a lista ao configurar o controle Galeria para mostrar somente os itens que correspondem ao critério de filtro em um controle de 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.

Pré-requisitosPrerequisites

  1. Abra o PowerApps e, em seguida, clique ou toque em Novo próximo à borda esquerda.Open PowerApps, and then click or tap New near the left edge.
  2. No bloco Aplicativo em branco, clique ou toque em Layout do telefone.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 conexão à tabela FlooringEstimates no arquivo do Excel.Add a connection to the FlooringEstimates table in the Excel file.
  5. (opcional) Adicione um controle Galeria à tela padrão ao clicar ou tocar na guia Inserir, ao clicar ou tocar em Galeria e, em seguida, ao clicar ou tocar em um controle Galeria que está vazio (em branco) ou que contém um conjunto padrão 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.

    Essas opções incluem controles Galeria que rolam horizontal ou verticalmente.These options include Gallery controls that scroll horizontally or vertically. Você também pode adicionar uma Galeria que baseia automaticamente seu 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. Na guia Página Inicial, clique ou toque em Nova tela.On the Home tab, click or tap New screen.

    É possível adicionar uma tela que está vazia, que rola, que contém um controle 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 Tela de lista para adicionar uma tela que contém um controle Galeria e outros controles, 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.

    Observação: se você estiver adicionando um controle de Galeria a uma nova tela ou a uma tela existente, será possível clicar ou tocar na parte inferior do controle de Galeria para selecioná-lo, clique ou toque em Estimativas de Piso no painel à direita e, em seguida, clique ou toque em um layout diferente no 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 layout padrão.For this tutorial, leave the default layout.

    Escolher o layout da galeria

  8. Clique ou toque no controle Galeria na tela que acabou de adicionar.Click or tap the Gallery control in the screen that you just added.
  9. Na guia Propriedades no painel à direita, 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, em seguida, clique ou toque em FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Selecione a fonte de dados

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

    Mostrar dados

    Você configurará a classificação e pesquisa mais adiante neste tópico.You'll configure sort and search later in this topic.

Antes de fazer qualquer personalização, escolha um layout de controle Galeria.Before you do any customization, decide on a Gallery control layout. O primeiro conjunto de controles em um controle Galeria é o modelo, que determina como todos os dados do controle Galeria são exibidos.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 clicando ou tocando próximo à parte inferior do controle Galeria e, depois, clicando ou tocando 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 modelo da galeria

  2. Com o modelo ainda selecionado, adicione um controle Rótulo e, em seguida, mova e redimensione-o para que não se sobreponha aos outros controles 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 rótulo

  3. Abra o painel Dados ao selecionar o modelo e, em seguida, clique ou toque em Estimativas de Piso no painel à direita.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.
  4. Selecione o rótulo que você adicionou anteriormente neste procedimento e, em seguida, 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 lista suspensa

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

    Alterar a associação de rótulo

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

Galeria final

A propriedade Items do controle Galeria determina quais itens são mostrados.The Items property of a Gallery control determines which items it shows. Neste procedimento, você configurará essa propriedade para que o controle Galeria mostre somente 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 controle Galeria ao clicar ou tocar na parte inferior deste controle.Select the Gallery control by clicking or tapping near the bottom of that control.
  2. Na guia Avançado, defina a propriedade Items do controle Galeria conforme 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, consulte a referência de fórmulas.For more information about the functions in this formula, see the formula reference.

  3. Na caixa de pesquisa, digite parte ou todo o nome do produto.Type part or all of a product name in the search box.

    O controle Galeria mostra somente os itens que atendem aos critérios de filtro.The Gallery control shows only those items that meet the filter criterion.

A propriedade Items de um controle 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, você configura essa propriedade para que o controle 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 de classificação

  1. Defina a propriedade Items do controle 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 classificação para alterar a ordem de classificação do controle Galeria por nomes de produtos.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

Para classificar e filtrar o controle Galeria:To sort and filter your Gallery control:

  • Substitua as duas instâncias de DataSource nesta fórmula pelo nome da fonte 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 você deseja classificar 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 controle Galeria como uma fórmula 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 padrãoChange the default selection

Defina a propriedade Padrão do controle Galeria para o registro que você deseja selecionar por padrã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 fonte de dados FlooringEstimates:For example, specify the fifth item in the FlooringEstimates data source:

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

Neste exemplo, você especifica o primeiro item na categoria Hardwood da fonte de dados 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"))

Próximas etapasNext steps