Neste artigo

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.

Nesta tarefa, criaremos um aplicativo do zero.In this task, we'll build an app from scratch.Este aplicativo permite que um usuário atribua um gerente a projetos e atualize os detalhes do projeto.This app allows a user to assign a manager to projects and to update project details.Você verá alguns dos mesmos controles e fórmulas que viu no primeiro aplicativo, mas criará mais do aplicativo por conta própria desta vez.You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time.O processo é mais complexo, mas você aprenderá mais, portanto, acreditamos ser uma compensação justa.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Análise rápida do PowerApps StudioQuick review of PowerApps Studio

Você usou o PowerApps Studio para Web na última tarefa, mas queremos ter certeza de que você entende todas as partes antes de continuarmos.You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on.Você pode continuar a trabalhar no PowerApps Studio para Web ou pode usar o PowerApps Studio para Windows.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

O PowerApps Studio tem três painéis e uma faixa de opções que tornam a experiência de criação de aplicativos semelhante à da criação de um conjunto de slides do PowerPoint:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

Barra de navegação esquerda, que mostra uma exibição hierárquica de todas as telas e controles do aplicativo, bem como miniaturas das telasLeft navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens

Painel do meio, que contém a tela do aplicativo em que você está trabalhandoMiddle pane, which contains the app screen you are working on

Nesta etapa, nos conectaremos à lista do SharePoint Detalhes do Produto.In this step, we'll connect to the Product Details SharePoint list.Usamos apenas uma lista nesse aplicativo, mas você pode se conectar a ambas se desejar estender o aplicativo.We only use one list in this app, but you could easily connect to both if you want to extend the app.

A guia Fontes de dado no painel direito agora mostra a conexão criada.The Data sources tab in the right pane now shows the connection that you have created.

Etapa 3: criar a tela SelectTaskStep 3: Build the SelectTask screen

Nesta etapa, forneceremos uma maneira de navegar para as outras telas no aplicativo, trabalhando com alguns dos controles, das fórmulas e das opções de formatação que o PowerApps fornece.In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

Adicionar dois botões de navegaçãoAdd two navigation buttons

Na barra de fórmulas, defina as seguintes propriedades para o botão:In the formula bar, set the following properties for the button:

Propriedade OnSelect = Navigate(AssignManager, Fade).OnSelect property = Navigate(AssignManager, Fade).Quando você executa o aplicativo e clica nesse botão, você navega para a segunda tela no aplicativo, com uma transição de esmaecimento entre as telas.When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.

Criaremos uma página mais tarde no aplicativo que permite que você edite todos os campos de um projeto (incluindo o campo gerente), mas achamos que seria interessante criar uma tela de como essa também.We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

Salve as alterações feitas até agora.Save the changes you've made so far.

Adicionar e modificar uma galeriaAdd and modify a gallery

Selecione Título, subtítulo e corpo do menu Layout no painel direito.Select Title, subtitle, and body from the Layout menu in the right pane.

A galeria agora tem o layout certo, mas ainda tem o texto de exemplo padrão.The gallery now has the right layout, but it still has the default sample text.Corrigiremos isso a seguir.We'll fix that next.

Defina as seguintes propriedades para a galeria:Set the following properties for the gallery:

Agora, a tela deve ser semelhante à imagem a seguir.The screen should now look like the following image.

Alterar a cor de um item se ele for selecionadoChange the color of an item if it's selected

Selecione a galeria e defina a propriedade TemplateFill como If (ThisItem.IsSelected=true, Orange, White).Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).

Selecione um item da galeria.Select an item in the gallery.Agora, a tela deve ser semelhante à imagem a seguir.The screen should now look like the following image.

Adicionar uma seta para voltar para ir para a tela SelectTaskAdd a back arrow to return to the SelectTask screen

Selecione a seta de voltar que você adicionou e copie-a.Select the back arrow you added there, and copy it.

Cole a seta na tela ViewProjects e posicione-a à esquerda do botão de atualização.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

Todas as suas propriedades vêm com ela, incluindo a propriedade OnSelect de Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

Alterar a fonte de dados da galeria BrowseGallery1Change the data source for the BrowseGallery1 gallery

Isso define a fonte de dados da galeria para a lista Detalhes do Projeto e usa o campo Título para pesquisar e classificar.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

Selecione o no primeiro item da galeria e defina a propriedade OnSelect como Navigate(UpdateDetails, None).Select the in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

No painel direito, atualize os campos de acordo com a lista a seguir:In the right pane, update the fields to match the following list:

StatusStatus

PMAssignedPMAssigned

TítuloTitle

Agora, a tela concluída deve ser semelhante à imagem a seguir.The completed screen should now look like the following image.

Com o formulário ainda selecionado, no painel direito, clique ou toque na caixa de seleção para os campos a seguir, na ordem mostrada:With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

Selecione o botão de salvar e consulte a fórmula OnSelect – SubmitForm(EditForm1).Select the save button and check out the OnSelect formula - SubmitForm(EditForm1).Como estamos usando o controle de formulário de edição, podemos usar Submit(), em vez de usar Patch() como fizemos anteriormente.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

Etapa 7: executar o aplicativoStep 7: Run the app

Agora que o aplicativo está concluído, vamos executá-lo par ver como funciona.Now that the app is complete, let's run it to see how it works.Adicionaremos um link no site do SharePoint para o aplicativo.We'll add a link on the SharePoint site to the app.Você poderá executar o aplicativo no navegador, mas talvez precise compartilhar o aplicativo para outras pessoas para executá-lo.You will be able to run the app in the browser, but you might need to share the app for other people to run it.Para obter mais informações, consulte Compartilhar seus aplicativos.For more information, see Share your apps.

Atribuir um gerente a um projetoAssign a manager to a project

Agora que temos o aplicativo em nosso site do SharePoint, vamos supor que a função do aprovador projeto – procuraremos por quaisquer projetos que não têm um gerente atribuído e atribuiremos um gerente a um dos projetos.Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects.Em seguida, assumiremos a função do gerente de projeto e adicionaremos algumas informações sobre o projeto atribuído a nós.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

Primeiro, vamos examinar a lista Detalhes do Projeto no SharePoint.First, let's look at the Project Details list in SharePoint.Dois projetos têm um valor de Não Atribuído na coluna PMAssigned.Two projects have a value of Unassigned in the PMAssigned column.Os veremos no aplicativo.We will see these in the app.

Clique ou toque no link que você criou para o aplicativo.Click or tap the link that you created to the app.

Volte para a lista do SharePoint e atualize a página.Go back to the SharePoint list and refresh the page.Você verá que a entrada do projeto agora está atualizada com o nome do gerente de projeto.You'll see that the project entry is now updated with the project manager name.

Clique ou toque naClick or tapPara aplicar a alteração à lista do SharePoint.to apply the change to the SharePoint list.

Feche o aplicativo e volte à lista.Close the app, and go back to the list.Você verá que a entrada do projeto agora está atualizada com as alterações de data e dia.You see that the project entry is now updated with the date and day changes.

Aprofundar fórmulaFormula deep-dive

Esta é a segunda seção opcional sobre as fórmulas do PowerApps.This is the second optional section on PowerApps formulas.No primeiro aprofundamento, analisamos uma das fórmulas que o PowerApps gera para a galeria de navegação em um aplicativo de três telas.In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app.Neste aprofundamento, analisaremos a fórmula que usamos para a tela AssignManager do segundo aplicativo.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app.Aqui está a fórmula:Here's the formula:

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:

Quando você clica no botão OK, a função Patch é chamada para atualizar a lista Detalhes do Projeto.When you click the OK button, the Patch function is called to update the Project Details list.

Dentro da função Patch, a função LookUp identifica qual linha da lista Detalhes do Projeto atualizar.Within the Patch function, the LookUp function identifies which row of the Project Details list to update.Ele faz isso comparando a ID do item da galeria selecionado à ID da lista.It does this by comparing the ID of the selected gallery item to the ID in the list.Por exemplo, uma ID de 12 significa que a entrada de New BI software (Novo software de BI) deve ser atualizada.For example, an ID of 12 means that the entry for New BI software should be updated.

Agora que a função Patch tem a ID certa, ela atualiza o campo PMAssigned com o valor em TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.