Destina Personalizar uma galeria no PowerAppsTutorial: Customize a gallery in PowerApps

Neste tutorial, irá personalizar uma lista de registos, denominada galeria, e fazer outras alterações numa aplicação que foi automaticamente gerada no Microsoft PowerApps.In this tutorial, you'll customize a list of records, called a gallery, and make other changes in an app that was generated automatically in Microsoft PowerApps. Os utilizadores podem gerir os dados na aplicação, mesmo que não faça estas alterações. Contudo, a aplicação será mais fácil de utilizar se a personalizar de acordo com as necessidades da sua organização.Users can manage data in the app even if you don't make these changes, but the app will be easier to use if you customize it for your organization's needs.

Por exemplo, a galeria deste tutorial corresponde a este gráfico por predefinição.For example, the gallery for this tutorial matches this graphic by default. O endereço de e-mail é apresentado com um destaque maior do que os restantes tipos de dados e os utilizadores podem ordenar e filtrar a galeria com base no texto desse endereço:The email address is featured more prominently than other types of data, and users can sort and filter the gallery based on text in that address:

Galeria predefinida

No entanto, os seus utilizadores poderão estar mais interessados no nome da conta do que no endereço de e-mail. Por isso, poderá reconfigurar a galeria para destacar, ordenar e filtrar com base nos dados essenciais para a sua organização.However, your users might be more interested in the account name more than the email address, so you'll reconfigure the gallery to highlight, sort, and filter based on the key data for your organization. Além disso, poderá alterar o título do ecrã predefinido para o diferenciar de outros ecrãs na aplicação.In addition, you'll change the title of the default screen to differentiate it from the other screens in the app.

Galeria final

Também poderá adicionar uma barra de deslocamento para que os utilizadores sem ecrãs táteis ou rodas de rato possam navegar na galeria.You'll also add a scroll bar so that users who don't have touch screens or mouse wheels can browse the entire gallery.

  • Alterar o esquema da galeriaChange the layout of the gallery
  • Alterar o tipo de dados apresentados na galeriaChange the type of data that appears in the gallery
  • Alterar as colunas através das quais os utilizadores podem ordenar e pesquisar os dadosChange the columns by which users can sort and search the data
  • Alterar o título do ecrãChange the screen title
  • Mostrar uma barra de deslocamentoShow a scroll bar

Este tutorial começa com uma aplicação que foi gerada a partir de uma origem de dados específica.This tutorial starts with an app that was generated from a specific data source. No entanto, os mesmos conceitos aplicam-se a todas as aplicações que gerar no PowerApps, quer seja a partir de uma lista do SharePoint, de uma tabela do Excel ou de uma outra origem de dados.However, the same concepts apply to any app that you generate in PowerApps, whether from a SharePoint list, an Excel table, or some other data source.

Se não estiver inscrito no PowerApps, inscreva-se gratuitamente antes de começar.If you're not signed up for PowerApps, sign up for free before you start.

Pré-requisitosPrerequisites

Gere um aplicativo da entidade contas do Common Data Service.Generate an app from the Accounts entity of Common Data Service.

Abrir a aplicação geradaOpen the generated app

  1. Inicie sessão no PowerApps e selecione Aplicações junto ao limite esquerdo.Sign in to PowerApps, and then select Apps near the left edge.

  2. Localize a aplicação que gerou, selecione o ícone de reticências ( ... ) e, em seguida, selecione Editar.Find the app that you generated, select the ellipsis icon (...) for it, and then select Edit.

    Abrir a aplicação para edição

  3. Se a caixa de diálogo Bem-vindo ao PowerApps Studio for apresentada, selecione Ignorar.If the Welcome to PowerApps Studio dialog box appears, select Skip.

Alterar o esquemaChange the layout

  1. No painel de navegação esquerdo, selecione ProcurarGaleria1.In the left navigation pane, select BrowseGallery1.

    Quando selecionada, a galeria é rodeada por uma caixa de seleção com identificadores.When the gallery is selected, a selection box with handles surrounds it.

    Selecionar a galeria

  2. Na guia Propriedades do painel direito, abra a lista de opções em layoute, em seguida, selecione a opção que mostra apenas um título.On the Properties tab of the right-hand pane, open the list of options under Layout, and then select the option that shows only a title.

    Selecionar o esquema só de título

  3. Ao lado de campos, selecione Editare, em seguida, selecione a seta para baixo da caixa título.Next to Fields, select Edit, and then select the down arrow for the title box.

    O nome deste controlo terminará num número, como Título1, mas o número poderá ser diferente com base noutras ações que tenha tomado.The name of this control will end in a numeral, such as Title1, but the numeral might differ based on other actions you might have taken.

  4. Na lista de opções, selecione nome da contae, em seguida, feche o painel dados .In the list of options, select Account name, and then close the Data pane.

    A galeria mostra o nome de cada conta.The gallery shows the name of each account.

    Galeria final

Alterar as colunas de pesquisa e ordenaçãoChange sort and search columns

  1. Selecione a galeria conforme descrito na secção anterior.Select the gallery as the previous section describes.

    Selecionar a galeria

  2. Junto ao canto superior esquerdo, confirme que a lista de propriedades mostra Itens.Near the upper-left corner, confirm that the property list shows Items.

    Propriedade Itens

    O valor desta propriedade é apresentado na barra de fórmulas.The value of this property appears in the formula bar. Defina esta propriedade para especificar não só a origem de dados da galeria, mas também as colunas através das quais os utilizadores podem ordenar e pesquisar os dados.You set this property to specify not only the data source for the gallery but also the columns by which users can sort and search the data.

  3. Copie esta fórmula e cole-a na barra de fórmulas.Copy this formula, and then paste it in the formula bar.

    SortByColumns(Search(Accounts; TextSearchBox1.Text; "name"); "name"; If(SortDescending1; Descending; Ascending))

    Ao utilizar esta fórmula, confirme que:By using this formula, you ensure that:

    • Se um utilizador escrever na barra de pesquisa um ou mais carateres, a galeria mostrará apenas os nomes das contas que contêm o texto que o utilizador escreveu.If a user types one or more characters in the search bar, the gallery shows only those account names that contain the text that the user typed.
    • Se um utilizador selecionar o ícone de ordenação, a galeria será ordenada alfabeticamente pelo nome da conta na ordem ascendente ou descendente, dependendo do número de vezes que o utilizador selecionar o ícone.If a user selects the sort icon, the gallery is sorted alphabetically by account name in either ascending or descending order, depending on how many times the user selects the icon.

    Para obter mais informações sobre estas e outras funções, veja a referência de fórmulas.For more information about these and other functions, see the formula reference.

Testar a ordenação e a pesquisaTest sorting and searching

  1. Abra o Modo de pré-visualização ao premir F5 (ou ao selecionar o botão de reprodução junto ao canto superior direito).Open Preview mode by pressing F5 (or by selecting the play button near the upper-right corner).

    Abrir o Modo de pré-visualização

  2. Junto ao canto superior direito do ecrã de navegação, selecione o ícone de ordenação uma ou mais vezes para alternar a ordem de ordenação alfabética entre ascendente e descendente.Near the upper-right corner of the browse screen, select the sort icon one or more times to change the alphabetical sort order between ascending and descending.

    Testar o ícone de ordenação

  3. Na caixa de pesquisa, escreva k para mostrar apenas os nomes das contas que contêm essa letra.In the search box, type k to show only those account names that contain the letter that you typed.

    Testar a barra de pesquisa

  4. Remova todo o texto da barra de pesquisa e feche o Modo de pré-visualização ao premir Esc (ou ao selecionar o ícone de fechar junto ao canto superior direito).Remove all text from the search bar, and then close Preview mode by pressing Esc (or by selecting the close icon near the upper-right corner).

Alterar o título do ecrãChange the screen title

  1. Selecione o título do ecrã ao clicar ou tocar nele.Select the title of the screen by clicking or tapping it.

    Selecionar o título do ecrã

  2. Confirme que a lista de propriedades mostra Texto e, em seguida, na barra de fórmulas, substitua Contas por Procurar (mantendo as aspas).Ensure that the property list shows Text and then, in the formula bar, replace Accounts with Browse (retaining the double quotation marks).

    Atualizar o título do ecrã

    O ecrã reflete as alterações.The screen reflects your change.

    Novo título do ecrã

Mostrar uma barra de deslocamentoShow a scrollbar

Se os seus utilizadores não tiverem ecrãs táteis ou rodas de rato, configure a galeria para mostrar uma barra de deslocamento quando o utilizador paira o cursor do rato sobre a mesma.If your users might have neither touch screens nor mouse wheels, configure the gallery to show a scrollbar when the user hovers over it with the mouse. Desta forma, os utilizadores podem ver todas as contas, mesmo que o ecrã não consiga mostrar todas ao mesmo tempo.That way, users can show all accounts even if the screen can't show them all at once.

  1. Selecione a galeria conforme descrito no primeiro procedimento.Select the gallery as the first procedure describes.

    Selecionar a galeria

  2. Defina a propriedade Mostrar ScrollBar da galeria como true.Set the gallery's Show scrollbar property to true.

Passos seguintesNext steps

Neste tutorial, personalizou a galeria e efetuou outras alterações ao ecrã predefinido para a procura de registos numa aplicação gerada.In this tutorial, you've customized the gallery and made other changes to the default screen for browsing records in a generated app. Também pode personalizar os ecrãs predefinidos para apresentar detalhes e criar ou atualizar contas.You can also customize the default screens for displaying details and creating or updating accounts. Como o ecrã de procura contém uma galeria, os outros dois ecrãs na aplicação contêm formulários.As the browse screen contains a gallery, the other two screens in the app contain forms. Pode alterar, por exemplo, os tipos de dados apresentados pelos formulários e a sua ordem.You can change, for example, which types of data the forms show and in which order.