Gerar um aplicativo para tratar as solicitações de projetoGenerate an app to handle project requests

Observação

Este artigo faz parte de uma série de tutoriais sobre como usar o PowerApps, o Microsoft Flow e o Power BI com o SharePoint Online.This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Certifique-se de ler a Introdução da série para ter uma noção da visão geral, bem como dos downloads relacionados.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

Agora que as listas do SharePoint estão em vigor, podemos criar e personalizar o nosso primeiro aplicativo.Now that the SharePoint lists are in place, we can build and customize our first app. O PowerApps é integrado ao SharePoint, portanto, é fácil de gerar um aplicativo de três telas básico diretamente de uma lista.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. Este aplicativo permite que você exiba informações resumidas e detalhadas para cada item de lista, atualize itens de lista existentes e crie 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 você criar um aplicativo diretamente de uma lista, o aplicativo será exibido como um exibição para essa lista.If you create an app directly from a list, the app appears as a view for that list. Você pode executar esse aplicativo em um navegador, bem como em um telefone celular.You can then run that app in a browser, as well as on a mobile phone.

Dica

O pacote de download para este cenário inclui uma versão concluída desse aplicativo: project-requests-app.msapp.The download package for this scenario includes a finished version of this app: project-requests-app.msapp.

Etapa 1: gerar um aplicativo de uma lista do SharePointStep 1: Generate an app from a SharePoint list

  1. Na lista Solicitações de Projeto que você criou, clique ou toque em PowerApps e em Criar um aplicativo.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    Criar um aplicativo

  2. Atribua um nome ao aplicativo, como "Aplicativo de Solicitações de Projeto" e clique ou toque em Criar.Give the app a name, like "Project Requests app", then click or tap Create. Quando o aplicativo estiver pronto, ele será aberto no PowerApps Studio para Web.When the app is ready, it opens in PowerApps Studio for web.

    Especificar um nome para o aplicativo

Etapa 2: examinar o aplicativo no PowerApps StudioStep 2: Review the app in PowerApps Studio

  1. No PowerApps Studio, a barra de navegação à esquerda por padrão mostra uma exibição hierárquica das telas e controles no aplicativo.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    PowerApps Studio com exibição hierárquica

  2. Clique ou toque no ícone de miniatura para alternar entre as exibições.Click or tap the thumbnail icon to switch views.

    Seletor da exibição do PowerApps Studio

  3. Clique ou toque em cada tela para exibi-la no painel central.Click or tap each screen to view it in the middle pane. Há três telas:There are three screens:

    (a).(a). A tela de navegação, em que você navega, classifica e filtra os dados extraídos da lista.The browse screen, where you browse, sort, and filter the data pulled in from the list.

    (b).(b). A tela de detalhes, na qual são exibidos mais detalhes sobre um item.The details screen, where you view more detail about an item.

    (c).(c). A tela de edição/criação, em que você edita 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 exibição de miniatura

Etapa 3: personalizar a tela de navegação do aplicativoStep 3: Customize the app's browse screen

  1. Clique ou toque na tela de navegação.Click or tap the browse screen.

    Esta tela tem um layout que contém um galeria para mostrar os itens de lista, bem como outros controles, como uma barra de pesquisa e um botão de classificaçã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 clicando ou tocando em qualquer registro, exceto o primeiro.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    Galeria de navegação

  3. No painel direito, em Propriedades, clique ou toque em Solicitações de Projeto.In the right pane, under Properties, click or tap Project Requests.

  4. Atualize os campos de acordo com a lista a seguir:Update the fields to match the following list:

    • RequestDateRequestDate

    • SolicitanteRequestor

    • TítuloTitle

      Campos de galeria

  5. Com BrowseGallery1 ainda selecionada, selecione a propriedade Items.With BrowseGallery1 still selected, select the Items property.

    Propriedade Itens

  6. Altere a fórmula para SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", 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

    Isso permite que você classifique e pesquise o campo Título, em vez do padrão que o PowerApps escolheu.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. Consulte Aprofundar fórmula para obter mais informações.See Formula deep-dive for more information.

  7. Clique ou toque em Arquivo e em Salvar.Click or tap File, then Save. Clique ou toque em Ícone de Voltar para o aplicativo para voltar para o aplicativo.Click or tap Back to app icon to go back to the app.

Etapa 4: examinar a tela de detalhes e a tela de edição do aplicativoStep 4: Review the app's details screen and edit screen

  1. Clique ou toque na tela de detalhes.Click or tap the details screen.

    Esta tela tem um layout diferente que contém um formulário de exibição para mostrar os detalhes para 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. Ela tem controles para editar e excluir itens e voltar para a tela de navegação.It has controls to edit and delete items, and to go back to the browse screen.

    Formulário de exibição de detalhes

  2. Clique ou toque na tela de edição.Click or tap the edit screen.

    Essa tela contém um formulário de edição para editar o item selecionado ou criar um novo (se você vier aqui diretamente da tela de navegação).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). Ela tem controles para salvar ou descartar as alterações.It has controls to save or discard changes.

    Formulário de edição

Etapa 5: executar o aplicativo da listaStep 5: Run the app from the list

  1. Na lista Solicitações de Projeto, clique ou toque em Todos os Itens e em Aplicativo de Solicitações de Projeto.In the Project Requests list, click or tap All Items, then Project Requests app.

    Exibir o aplicativo de Solicitações de Projeto

  2. Clique em Abrir, que abre o aplicativo em uma nova guia do navegador.Click Open, which opens the app in a new browser tab.

    Abrir o aplicativo de Solicitações de Projeto

  3. No aplicativo, clique ou toque emIn the app, click or tap Ícone Ir para detalhes para o primeiro item na galeria de navegação.for the first item in the browse gallery.

    Primeiro item da galeria

  4. Clique ou toque naClick or tap Ícone de edição de lápis para editar o item.to edit the item.

  5. Atualize o campo Descrição – altere a última palavra de “group” para “team” e clique ou toque em Ícone de Marca de seleçã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 a guia do navegador.Close the browser tab.

  7. Volte para a lista Solicitações de Projeto, clique ou toque em Aplicativo de Solicitações de Projeto e em Todos os Itens.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    Exibir todos os itens

  8. Verifique a alteração feita no aplicativo.Verify the change you made from the app.

    Verificar a edição

Este é um aplicativo muito simples e fizemos apenas algumas personalizações básicas, mas você pode ver 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 passar para a próxima tarefa, mas observe o aplicativo um pouco mais, caso deseje, e veja como os controles e as fórmulas trabalham juntos para direcionar o comportamento do aplicativo.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.

Aprofundar fórmulaFormula deep-dive

Esta seção é opcional, mas ela ajudará você a entender melhor como as fórmulas funcionam.This section is optional, but it will help you understand more about how formulas work. Na etapa 3 dessa tarefa, modificamos a fórmula para a propriedade Items de BrowseGallery1.In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. Especificamente, alteramos a classificação e a pesquisa para usar 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. Aqui está a fórmula modificada:Here's the modified formula:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

Mas o que essa fórmula faz?But what does this formula do? Ela determina a fonte de dados que aparece na galeria, filtra os dados com base em qualquer texto inserido na caixa de pesquisa e classifica os resultados com base no botão de classificação no aplicativo.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 usa funções para fazer seu trabalho.The formula uses functions to do its work. As funções usam parâmetros (ou seja, entrada), executam uma operação (como filtragem) e retornam um valor (ou seja, saída):Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • A função SortByColumns classifica uma tabela com base em uma ou mais colunas.The SortByColumns function sorts a table based on one or more columns.
  • A função Filter localiza os registros em uma tabela que atende à fórmula especificada.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 caracteres de texto começa com outra.The StartsWith function tests whether one text string begins with another.
  • A função If retornará um valor se uma condição for verdadeira e retornará 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.

Quando você reúne 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 você digitar um texto na caixa de pesquisa, a função StartsWith comparará esse texto ao início de cada cadeia de caracteres 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 você digitar "de" na caixa de pesquisa, verá quatro resultados, incluindo itens que começam com “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." Você não verá todos os itens "Mobile devices", porque eles não começam com “de”.You won't see all the "Mobile devices" items because those don't start with "de."

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

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. A função If verifica se a variável SortDescending1 está definida como verdadeira ou falsa (o botão de classificação no aplicativo define isso).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 retorna um valor de Descending ou Ascending.The function then returns a value of Descending or Ascending.

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

  4. Agora a função SortByColumns função pode classificar a galeria.Now the SortByColumns function can sort the gallery. Nesse caso, ela classifica com base no campo Título, mas esse pode ser um campo diferente daquele em que fez a 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 você continuou conosco até esse ponto, esperamos que tenha uma noção melhor de como essa fórmula funciona e como você pode combinar funções e outros elementos para direcionar o comportamento que seus aplicativos exigem.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, consulte Referência de fórmula para PowerApps.For more information, see Formula reference for PowerApps.

Próximas etapasNext steps

A próxima etapa nesta série de tutoriais é criar um fluxo para gerenciar aprovações de projeto.The next step in this tutorial series is to Create a flow to manage project approvals.