Gerar uma aplicação para processar pedidos de projetoGenerate an app to handle project requests

Nota: este artigo faz parte de uma série de tutoriais sobre a utilização do PowerApps, do Microsoft Flow e do Power BI com o SharePoint Online.Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Certifique-se de que lê a introdução da série para obter uma noção da visão geral, bem como as transferências relacionadas.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

Agora que as listas de SharePoint estão implementadas, podemos criar e personalizar a nossa primeira aplicação.Now that the SharePoint lists are in place, we can build and customize our first app. O PowerApps está integrado no SharePoint, para que seja fácil gerar uma aplicação com três ecrãs básica, diretamente a partir de uma lista.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. Esta aplicação permite-lhe ver informações resumidas e detalhadas para cada item de lista, atualizar itens de lista existentes e criar novos itens de lista.This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. Se criar uma aplicação diretamente a partir de uma lista, a aplicação é apresentada como uma vista dessa lista.If you create an app directly from a list, the app appears as a view for that list. Pode então executar essa aplicação num browser, bem como num telemóvel.You can then run that app in a browser, as well as on a mobile phone.

Sugestão: o pacote de transferência para este cenário inclui uma versão concluída desta aplicação: project-requests-app.msapp.Tip: The download package for this scenario includes a finished version of this app: project-requests-app.msapp.

Passo 1: gerar uma aplicação a partir de uma lista do SharePointStep 1: Generate an app from a SharePoint list

  1. Na lista Pedidos de Projeto que criou, clique ou toque em PowerApps e em Criar uma aplicação.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    Criar uma aplicação

  2. Dê um nome à aplicação, como "Aplicação de Pedidos de Projeto"e clique ou toque em Criar.Give the app a name, like "Project Requests app", then click or tap Create. Quando a aplicação estiver pronta, é aberta na PowerApps Studio para Web.When the app is ready, it opens in PowerApps Studio for web.

    Especificar o nome da aplicação

Passo 2: rever a aplicação no PowerApps StudioStep 2: Review the app in PowerApps Studio

  1. No PowerApps Studio, por predefinição, a barra de navegação esquerda mostra uma vista hierárquica dos ecrãs e controlos da aplicação.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    PowerApps Studio com vista hierárquica

  2. Clique ou toque no ícone miniatura para mudar de vistas.Click or tap the thumbnail icon to switch views.

    Seletor de vistas do PowerApps Studio

  3. Clique ou toque em cada ecrã para visualizá-lo no painel central.Click or tap each screen to view it in the middle pane. Existem três ecrãs:There are three screens:

    1. O ecrã procurar, onde pode procurar, ordenar e filtrar os dados extraídos da lista.The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. O ecrã detalhes, onde pode ver mais detalhes sobre um item.The details screen, where you view more detail about an item.
    3. O ecrã editar/criar, onde pode editar um item existente ou criar um novo.The edit/create screen, where you edit an existing item or create a new one.

      PowerApps Studio com a vista de miniatura

Passo 3: personalizar o ecrã de procura da aplicaçãoStep 3: Customize the app's browse screen

  1. Clique ou toque no ecrã de procura.Click or tap the browse screen.

    Este ecrã tem um esquema que contém uma galeria para mostrar os itens de lista, bem como outros controlos, como uma barra de pesquisa e um botão de ordenação.This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. Selecione a galeria BrowseGallery1 ao clicar ou tocar em qualquer registo, exceto no primeiro.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    Galeria de Procura

  3. No painel do lado direito, atualize os campos para que correspondam à lista seguinte:In the right pane, update the fields to match the following list:

    • DataPedidoRequestDate
    • DescriçãoDescription
    • TítuloTitle
    • RequerenteRequestor

      Campos da galeria

  4. Com BrowseGallery1 ainda selecionado, selecione a propriedade Itens.With BrowseGallery1 still selected, select the Items property.

    Propriedade Itens

  5. Altere a fórmula para SortByColumns(Filter(“Pedidos de Projeto”, StartsWith(Title, TextSearchBox1.Text)), "Título", If(SortDescending1, Descending, Ascending)).Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Barra de fórmulas

    Isto permite-lhe ordenar e procurar pelo campo Título, em vez da predefinição que o PowerApps escolheu.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. Veja Descrição aprofundada das fórmulas para obter mais informações.See Formula deep-dive for more information.

  6. Clique ou toque em Ficheiro e em Guardar.Click or tap File, then Save. Clique ou toque em Voltar ao ícone de aplicação para regressar à aplicação.Click or tap Back to app icon to go back to the app.

Passo 4: personalizar o ecrã de detalhes e o ecrã de edição da aplicaçãoStep 4: Customize the app's details screen and edit screen

  1. Clique ou toque no ecrã de detalhes.Click or tap the details screen.

    Este ecrã tem um esquema diferente que contém um formulário de apresentação para mostrar os detalhes de um item selecionado na galeria.This screen has a different layout that contains a display form to show the details for an item selected in the gallery. Tem controlos para editar e eliminar itens, e para voltar ao ecrã de procura.It has controls to edit and delete items, and to go back to the browse screen.

  2. Selecione o formulário de apresentação DetailForm1.Select the DetailForm1 display form.

    Formulário de apresentação de detalhes

  3. No painel direito, arraste o campo Título para a parte superior.In the right pane, drag the Title field to the top.

    Campo Título

  4. Clique ou toque no ecrã de edição.Click or tap the edit screen.

    Este ecrã contém um formulário de edição para editar o item selecionado ou criar um novo (se tiver chegado aqui diretamente do ecrã de procura).This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). Tem controlos para guardar ou rejeitar as alterações.It has controls to save or discard changes.

  5. Selecione o formulário de edição EditForm1.Select the EditForm1 edit form.

    Formulário de edição

  6. Como anteriormente, arraste o campo Título para a parte superior.As above, drag the Title field to the top.

    Campo Título

Passo 5: executar a aplicação a partir da listaStep 5: Run the app from the list

  1. Na lista Pedidos de Projeto, clique ou toque em Todos os Itens e, em seguida, em Aplicação de Pedidos de Projeto.In the Project Requests list, click or tap All Items, then Project Requests app.

    Ver a aplicação Pedidos de Projeto

  2. Clique em Abrir para abrir a aplicação num novo separador do browser.Click Open, which opens the app in a new browser tab.

    Abrir a aplicação Pedidos de Projeto

  3. Na aplicação, clicar ou tocar emIn the app, click or tap Ir para o ícone de detalhes do primeiro item na galeria de procura.for the first item in the browse gallery.

    Primeiro item da galeria

  4. Clicar ou tocarClick or tap Ícone de edição de lápis para editar o item.to edit the item.
  5. Atualizar o campo Descrição – altere a última palavra de “grupo” para “equipa” e clique ou toque em Ícone de marca de verificaçãoUpdate the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    Atualizar o campo Descrição

  6. Feche o separador do browser.Close the browser tab.
  7. Regresse à lista Pedidos de Projeto, clique ou toque em Aplicação de Pedidos de Projeto e em Todos os Itens.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    Ver todos os itens

  8. Verifique a alteração que fez a partir da aplicação.Verify the change you made from the app.

    Verificar a edição

Esta é uma aplicação bastante simples, e apenas fizemos algumas personalizações básicas, mas pode constatar que é possível criar rapidamente algo interessante.This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. Vamos avançar para a próxima tarefa, mas observe a aplicação um pouco mais se assim se o desejar, e veja como os controlos e as fórmulas trabalham em conjunto para orientar o comportamento da aplicação.We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

Descrição aprofundada das fórmulasFormula deep-dive

Esta secção é opcional, mas irá ajudá-lo a compreender melhor como funcionam as fórmulas.This section is optional, but it will help you understand more about how formulas work. No passo 3 desta tarefa, modificámos a fórmula para a propriedade Itens de BrowseGallery1.In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. Especificamente, alterámos a ordenação e pesquisa para utilizarem o campo Título, em vez do campo que o PowerApps escolheu.Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. Segue-se a fórmula modificada:Here's the modified formula:

SortByColumns ( Filter ( “Pedidos de Projeto”, StartsWith ( Title, TextSearchBox1.Text ) ), "Título", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

Mas o que faz esta fórmula?But what does this formula do? Determina a origem de dados que é apresentada na galeria, filtra os dados com base no texto introduzido na caixa de pesquisa e ordena os resultados com base no botão de ordenação da aplicação.It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. A fórmula utiliza funções para realizar o seu trabalho.The formula uses functions to do its work. As funções utilizam parâmetros (por exemplo, de entrada), efetuam uma operação (como filtragem) e devolvem um valor (por exemplo, de saída):Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • A função SortByColumns ordena uma tabela com base numa ou mais colunas.The SortByColumns function sorts a table based on one or more columns.
  • A função Filtrar localiza os registos numa tabela que satisfazem uma fórmula que especificar.The Filter function finds the records in a table that satisfy a formula that you specify.
  • A função StartsWith testa se uma cadeia de texto começa com outra.The StartsWith function tests whether one text string begins with another.
  • A função If devolve um valor se uma condição for verdadeira, e devolve outro valor se a mesma condição for falsa.The If function returns one value if a condition is true, and returns another value if the same condition is false.

Ao juntar as funções na fórmula, eis o que acontece:When you put the functions together in the formula, here's what happens:

  1. Se introduzir texto na caixa de pesquisa, a função StartsWith compara esse texto com o início de cada cadeia na coluna Título da lista.If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )StartsWith ( Title, TextSearchBox1.Text )

    Por exemplo, se introduzir "de" na caixa de pesquisa, verá quatro resultados, incluindo os itens que começam por "Desktop" e "Device".For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." Não irá ver todos os "Mobile devices", porque não começam por "de".You won't see all the "Mobile devices" items because those don't start with "de."

  2. A função Filtro devolve linhas da tabela Pedidos de Projeto.The Filter function returns rows from the Project Requests table. Se não houver nenhum texto na caixa de pesquisa para comparação, o Filtro devolve todas as linhas.If there is no text in the search box to compare, Filter returns all rows.

    Filter ( “Pedidos de Projeto”, StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. A função If observa se a variável SortDescending1 está definida como verdadeira ou falsa (isto é definido pelo botão de ordenação na aplicação).The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). A função devolve então um valor de Descendente ou Ascendente.The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Descending, Ascending )If ( SortDescending1, Descending, Ascending )

  4. A função SortByColumns pode agora ordenar a galeria.Now the SortByColumns function can sort the gallery. Neste caso, ordena com base no campo Título, mas pode ser um campo diferente daquele em que pesquisa.In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

Se nos acompanhou até agora, esperamos que tenha ficado com uma melhor noção do funcionamento desta fórmula, e de como pode combinar funções e outros elementos para orientar o comportamento requerido pelas suas aplicações.If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. Para obter mais informações, veja Referência de fórmula para o PowerApps.For more information, see Formula reference for PowerApps.

Passos seguintesNext steps

O passo seguinte nesta série de tutoriais consiste em Criar um fluxo para gerir aprovações de projeto.The next step in this tutorial series is to Create a flow to manage project approvals.