Criar um aplicativo para gerenciar projetosCreate an app to manage projects

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.

Dica

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

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:

  1. 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
  2. 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
  3. Painel direito, em que você configura opções como as fontes de dados e layoutRight-hand pane, where you set options like layout and data sources
  4. Lista suspensa Propriedade, em que você seleciona as propriedades às quais as fórmulas se aplicamProperty drop-down list, where you select the properties that formulas apply to
  5. Barra de fórmulas, em que você pode adicionar fórmulas (como no Excel) que definem o comportamento do aplicativoFormula bar, where you add formulas (like in Excel) that define app behavior
  6. Faixa de opções, em que você adiciona controles e personaliza elementos de designRibbon, where you add controls and customize design elements

PowerApps Studio

Etapa 1: criar telasStep 1: Create screens

Com essa análise feita, vamos começar a criar um aplicativo.With that review out of the way, let's start building an app.

Criar e salvar o aplicativoCreate and save the app

  1. No PowerApps Studio, clique ou toque em Novo e, em Aplicativo em branco, clique ou toque em Layout do Telefone.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Aplicativo em branco – layout do telefone

  2. Clique ou toque em Arquivo, que é aberto em uma guia Configurações do aplicativo. Insira o nome "Aplicativo de Gerenciamento de Projeto".Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Nome do aplicativo

  3. Clique ou toque em Salvar como, verifique se o aplicativo será salvo na nuvem e clique em Salvar no canto inferior direito.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Salvar na nuvem

  4. Clique ou toque naClick or tap Ícone Voltar para o aplicativo para voltar para o aplicativo.to go back to the app.

Adicionar quatro telas ao aplicativoAdd four screens to the app

Nesta etapa, criaremos quatro telas em branco para o aplicativo.In this step, we'll create four blank screens for the app. Usaremos layouts de tela diferentes, dependendo da finalidade da tela.We'll use different screen layouts, depending on the screen's purpose. Adicionaremos conteúdo a essas telas nas etapas posteriores.We'll add to these screens in later steps.

TelaScreen FinalidadePurpose
SelectTaskSelectTask Tela de abertura, navegar para outras telasOpening screen; navigate to other screens
AssignManagerAssignManager Atribuir um gerente a um projeto aprovadoAssign a manager to an approved project
ViewProjectsViewProjects Exibir uma lista de projetos, com informações de resumoView a list of projects, with summary information
UpdateDetailsUpdateDetails Exibir e atualizar os detalhes de um projetoView and update the details for a project
  1. Na guia Início, clique ou toque em NewScreen e em Tela com rolagem.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Tela com rolagem

  2. Renomeie a tela como SelectTask.Rename the screen to SelectTask.

    Renomear a tela

  3. Crie e renomeie as telas adicionais:Create and rename additional screens:

    1. Clique ou toque em NewScreen e em Tela com rolagem.Click or tap NewScreen, then Scrollable screen. Renomeie a tela como AssignManager.Rename the screen to AssignManager.
    2. Clique ou toque em NewScreen e em Tela da lista.Click or tap NewScreen, then List screen. Renomeie a tela como ViewProjects.Rename the screen to ViewProjects.
    3. Clique ou toque em NewScreen e em Tela do formulário.Click or tap NewScreen, then Form screen. Renomeie a tela como UpdateDetails.Rename the screen to UpdateDetails.
  4. Selecione as reticências (. . .) ao lado de Screen1 e clique ou toque em Excluir.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Excluir tela

O aplicativo agora deve ser semelhante à imagem a seguir.The app should now look like the following image.

Todas as telas do aplicativo

Etapa 2: conectar a uma lista do SharePointStep 2: Connect to a SharePoint list

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.

  1. Na barra de navegação esquerda, clique ou toque na tela SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. No painel direito, clique ou toque em Adicionar fonte de dados.In the right pane, click or tap Add data source.

    Conectar aos dados

  3. Clique ou toque em Nova conexão.Click or tap New connection.

    Nova conexão

  4. Clique ou toque em SharePoint.Click or tap SharePoint.

    Conexão do SharePoint

  5. Selecione Conectar-se diretamente (serviços de nuvem) e clique ou toque em Criar.Select Connect directly (cloud services), then click or tap Create.

    Conectar-se diretamente (serviços de nuvem)

  6. Insira uma URL do SharePoint e, em seguida, clique ou toque em Ir.Enter a SharePoint URL, then click or tap Go.

    URL do SharePoint para conexão

  7. Selecione a lista Detalhes do Projeto e clique ou toque em Conectar.Select the Project Details list, then click or tap Connect.

    Selecionar lista Detalhes do Projeto

    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.

    Guia Fontes de dados

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.

Atualizar o título e inserir o texto de introduçãoUpdate the title and insert introductory text

  1. Na barra de navegação esquerda, selecione a tela SelectTask.In the left navigation bar, select the SelectTask screen.
  2. No painel central, selecione o [Título] padrão e, na barra de fórmulas, atualize a propriedade Text para “Gerenciamento de Projetos da Contoso”.In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    Propriedade Text na barra de fórmulas

  3. Na guia Inserir, clique ou toque em Rótulo e arraste o rótulo para baixo da faixa superior.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Adicionar rótulo

  4. Na barra de fórmulas, defina as seguintes propriedades para o rótulo:In the formula bar, set the following properties for the label:

    • Propriedade Color = DarkGrayColor property = DarkGray

    • Propriedade Size = 18Size property = 18

    • Propriedade Text = “Clique ou toque em uma tarefa para continuar...”Text property = "Click or tap a task to continue..."

      Atualizar o texto do rótulo

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

  1. Na guia Inserir, clique ou toque em Botão e arraste o botão para baixo do rótulo.On the Insert tab, click or tap Button, then drag the button below the label.

    Botão Adicionar

  2. 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.

    • Propriedade Text = "Atribuir Gerente"Text property = "Assign Manager"

  3. Redimensione o botão para acomodar o texto.Resize the button to accommodate the text.

    Atualizar o texto do botão

  4. Insira outro botão com as seguintes propriedades:Insert another button with the following properties:

    • Propriedade OnSelect = Navigate(ViewProjects, Fade).OnSelect property = Navigate(ViewProjects, Fade).

    • Propriedade Text = "Atualizar Detalhes"Text property = "Update Details"

      Atualizar o texto do botão

      Observação

      O botão é rotulado como Atualizar Detalhes, mas navegamos primeiro para a tela ViewProjects para selecionar um projeto para atualizar.The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

Executar o aplicativoRun the app

O aplicativo ainda não faz muito, mas você pode executá-lo se desejar:The app doesn't do a lot yet, but you can run it if you like:

  1. Clique ou toque na tela SelectTask (o aplicativo sempre é iniciado na tela selecionada no modo de versão prévia no PowerApps Studio).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).

  2. Clique ou toque naClick or tap Ícone Executar aplicativo no canto superior direito para executar o aplicativo.in the upper right corner to run the app.

  3. Clique ou toque em um dos botões para navegar para outra tela.Click or tap one of the buttons to navigate to another screen.

  4. Clique ou toque naClick or tap Ícone Fechar versão prévia do aplicativo no canto superior direito para fechar o aplicativo.in the upper right corner to close the app.

Etapa 4: criar a tela de AssignManagerStep 4: Build the AssignManager screen

Nesta etapa, usaremos uma galeria para exibir todos os projetos que foram aprovados, mas ainda não têm um gerente.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. Adicionaremos outros controles para que você possa atribuir um gerente.We'll add other controls, so you can assign a manager.

Observação

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.

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

  2. Na barra de navegação esquerda, clique ou toque na tela AssignManager.In the left navigation bar, click or tap the AssignManager screen.

Atualizar o título e inserir o texto de introduçãoUpdate the title and insert introductory text

  1. Altere [Título] para Atribuir Gerente.Change [Title] to Assign Manager.

  2. Adicione um rótulo com as seguintes propriedades:Add a label with the following properties:

    • Propriedade Color = DarkGrayColor property = DarkGray

    • Propriedade Size = 18Size property = 18

    • Propriedade Text = "Selecione um projeto e atribua um gerente"Text property = "Select a project, then assign a manager"

      Layout de Atribuir gerente

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

  1. Clique ou toque na barra azul na parte superior da tela.Click or tap the blue bar at the top of the screen.

  2. Na guia Inserir, clique ou toque em Ícones e, em seguida, clique ou toque em Esquerda.On the Insert tab, click or tap Icons, then click or tap Left.

    Inserir seta para a esquerda

  3. Mova a seta para a esquerda da barra azul e defina as seguintes propriedades:Move the arrow to the left side of the blue bar, and set the following properties:

    • Propriedade Color = WhiteColor property = White

    • Propriedade Height = 40Height property = 40

    • Propriedade OnSelect = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)

    • Propriedade Width = 40Width property = 40

      Adicionar o botão Voltar

  1. Na guia Inserir, clique ou toque em Galeria e em Vertical.On the Insert tab, click or tap Gallery, then Vertical.

    Adicionar uma galeria vertical

  2. 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.

    Alterar o layout da galeria

    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.

    Galeria com o texto padrão

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

    • Propriedade BorderThickness = 1BorderThickness property = 1

    • Propriedade BorderStyle = DottedBorderStyle property = Dotted

    • Propriedade Items = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). Somente projetos em nenhum gerente atribuído são incluídos na galeria.Only projects with no manager assigned are included in the gallery.

      Galeria com o texto da lista

  4. 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:

    • ApprovedDateApprovedDate

    • StatusStatus

    • TítuloTitle

      Campos de galeria

  5. Redimensione os rótulos na galeria de conforme apropriado e remova a seta do primeiro item da galeria (não precisamos navegar para nenhum lugar desta galeria).Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    Remover o ícone de seta

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

    Galeria formatada

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

  1. 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).

  2. 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.

    Galeria com o item selecionado

Adicionar um rótulo, a entrada de texto e o botão OK para enviar as atribuições de gerenteAdd a label, text input, and OK button to submit manager assignments

  1. Clique ou toque fora da galeria na qual está trabalhando.Click or tap outside the gallery you've been working on.

  2. Na guia Inserir, clique ou toque em Rótulo.On the Insert tab, click or tap Label. Arraste o rótulo abaixo da galeria, à esquerda.Drag the label below the gallery, to the left. Defina as seguintes propriedades para o rótulo:Set the following properties for the label:

    • Propriedade Size = 20Size property = 20

    • Propriedade Text = "Gerente:"Text property = "Manager:"

    Adicionar o rótulo Gerente

  3. Na guia Inserir, clique ou toque em Texto e em Entrada de texto.On the Insert tab, click or tap Text, then Text input. Arraste a entrada de texto abaixo da galeria, no centro.Drag the text input below the gallery, in the center. Defina as seguintes propriedades para a lista suspensa:Set the following properties for the drop down:

    • Propriedade Default = ""Default property = ""

    • Propriedade Height = 60Height property = 60

    • Propriedade Size = 20Size property = 20

    • Propriedade Width = 250Width property = 250

    Adicionar entrada de texto

  4. Na guia Inserir, clique ou toque em Botão.On the Insert tab, click or tap Button. Arraste o botão abaixo da galeria, à direita.Drag the button below the gallery, to the right. Defina as seguintes propriedades para o botão:Set the following properties for the button:

    • Propriedade Height = 60Height property = 60

    • Propriedade OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}).OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Para obter mais informações, consulte Aprofundar fórmula.For more information, see Formula deep-dive.

    • A fórmula atualiza a lista Detalhes do Projeto, definindo um valor para o campo PMAssigned.This formula updates the Project Details list, setting a value for the PMAssigned field.

    • Propriedade Size = 20Size property = 20

    • Propriedade Text = "OK"Text property = "OK"

    • Propriedade Width = 80Width property = 80

    Adicionar um botão OK

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

Tela Atribuir Gerente concluída

Etapa 5: criar a tela de ViewProjectsStep 5: Build the ViewProjects screen

Nesta etapa, alteraremos as propriedades da galeria na tela ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. Esta galeria exibe itens da lista Detalhes do Projeto.This gallery displays items from the Project Details list. Você seleciona um item na tela e, em seguida, edita os detalhes na tela UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. Na barra de navegação esquerda, clique ou toque na tela ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.

  2. Altere [Título] para "Exibir Projetos".Change [Title] to "View Projects".

  3. Na barra de navegação esquerda, clique ou toque em BrowserGallery1 em ViewProjects.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.

  4. 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.

    Alterar o layout da galeria

    A galeria agora tem o layout certo, com o texto de exemplo padrão.The gallery now has the right layout, with the default sample text.

    Galeria com o texto padrão

  5. Selecione o botão Atualizar Ícone Atualizar e defina sua propriedade OnSelect como Refresh('Project Details').Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').

  6. Selecione o botão de novo item Ícone Adicionar novo e defina sua propriedade OnSelect como NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

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

  1. Na barra de navegação esquerda, clique ou toque na tela AssignManager.In the left navigation bar, click or tap the AssignManager screen.

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

  3. 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.

    Botão Voltar

    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).

  1. Selecione a galeria BrowseGallery1 e defina a propriedade Items da galeria como SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Select the BrowseGallery1 gallery, and set the Items property of the gallery to SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    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.

  2. Selecione o ícone Seta de detalhes no primeiro item da galeria e defina a propriedade OnSelect como Navigate(UpdateDetails, None).Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="94e9e-322">Galeria Exibir Projetos – primeiro item selecionado</span><span class="sxs-lookup"><span data-stu-id="94e9e-322">View Projects gallery - first item selected</span></span>

  3. 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

      Campos de galeria

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

      Tela Exibir Projeto concluída

Etapa 6: criar a tela UpdateDetailsStep 6: Build the UpdateDetails screen

Nesta etapa, conectaremos o formulário de edição na tela UpdateDetails à nossa fonte de dados e faremos algumas alterações de campo e propriedade.In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. Nessa tela, você edita os detalhes de um projeto que selecionou na tela Exibir Projetos.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. Na barra de navegação esquerda, clique ou toque na tela UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.

  2. Altere [Título] para "Atualizar Detalhes".Change [Title] to "Update Details".

  3. Na barra de navegação esquerda, clique ou toque em EditForm1 em UpdateDetails.In the left navigation bar, click or tap EditForm1 under UpdateDetails.

  4. Defina as seguintes propriedades para o formulário:Set the following properties for the form:

    • Propriedade DataSource = 'Detalhes do Projeto'DataSource property = 'Project Details'

    • Propriedade Item = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected

  5. 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:

    • TítuloTitle

    • PMAssignedPMAssigned

    • StatusStatus

    • ProjectedStartDateProjectedStartDate

    • ProjectedEndDateProjectedEndDate

    • ProjectedDaysProjectedDays

    • ActualDaysActualDays

      Editar campos de formulário

  6. Selecione o botão de cancelar Ícone Cancelar e defina sua propriedade OnSelect como ResetForm(EditForm1); Back().Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().

  7. Selecione o botão de salvar Ícone de salvamento de marca de seleção e consulte a fórmula OnSelectSubmitForm(EditForm1).Select the save button Checkmark save icon 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.

Agora a tela concluída deve ser semelhante à imagem a seguir (se os campos estiverem em branco, certifique-se de que selecionou um item na tela Exibir Projetos).The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

Tela Atualizar Detalhes concluída

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.

  1. No inicializador de aplicativos do Office 365, clique ou toque em PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    PowerApps no inicializador de aplicativos do Office 365

  2. No PowerApps, clique ou toque nas reticências (. . .) para o Aplicativo de Gerenciamento de Projetos e em Abrir.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Selecionar o aplicativo de Gerenciamento de Projetos

  3. Copie o endereço (URL) para o aplicativo no navegador.Copy the address (URL) for the app in the browser.

    Copiar a URL do aplicativo

  4. No SharePoint, clique ou toque em EDITAR LINKS.In SharePoint, click or tap EDIT LINKS.

    Editar links do site do SharePoint

  5. Clique ou toque em (+) link.Click or tap (+) link.

    Adicionar link do aplicativo ao site do SharePoint

  6. Digite "Aplicativo de Gerenciamento de Projeto" e cole o endereço para o aplicativo.Enter "Project Management app", and paste in the address for the app.

    Editar propriedades do link

  7. Clique ou toque em OK e em Salvar.Click or tap OK, then Save.

    Salvar alterações de link

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.

  1. 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.

    Projetos não atribuídos na lista do SharePoint

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

  3. Na primeira tela, clique ou toque em Atribuir Gerente.On the first screen, click or tap Assign Manager.

    Tela de introdução do aplicativo

  4. Na tela Atribuir Gerente, você verá os dois projetos não atribuídos na lista.On the Assign Manager screen, you see the two unassigned projects from the list. Selecione o projeto New BI software (Novo software de BI).Select the New BI software project.

    Galeria com o item selecionado

  5. Na entrada de texto Gerente, insira "Joni Sherman" e clique em OK.In the Manager text input, enter "Joni Sherman", then click OK.

    A alteração é aplicada à lista e a galeria é atualizada para que apenas o projeto não atribuído restante seja exibido.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Atribuir gerente ao projeto

  6. 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.

    Gerente de projeto atribuído no alista do SharePoint

Atualizar os detalhes do projetoUpdate details for the project

  1. Clique ou toque em Ícone Voltar para voltar para a primeira tela e clique ou toque em Atualizar Detalhes.Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Tela de introdução do aplicativo

  2. Na tela Exibir Projetos, insira “Novo” na caixa de pesquisa.On the View Projects screen, enter "New" in the search box.

    Pesquisar na galeria do aplicativo

  3. Clique no Ícone de Seta de detalhes do item New BI software (Novo software de BI).Click Details arrow icon for the New BI software item.

    Item da galeria selecionado

  4. Na tela Atualizar Detalhes, defina os seguintes valores:On the Update Details screen, set the following values:

    • O campo ProjectedStartDate = "3/6/2017"The ProjectedStartDate field = "3/6/2017"

    • O campo ProjectedEndDate = "3/24/2017"The ProjectedEndDate field = "3/24/2017"

    • O campo ProjectedDays = "15"The ProjectedDays field = "15"

    Atualizar detalhes do item

  5. Clique ou toque naClick or tap Ícone de marca de seleção Para aplicar a alteração à lista do SharePoint.to apply the change to the SharePoint list.

  6. 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.

    Lista do SharePoint atualizada

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:

Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

O que essa fórmula faz?What does this formula do? Quando você seleciona um item na galeria e clica no botão OK, a fórmula atualiza a lista Detalhes do Projeto, definindo a coluna PMAssigned com o valor especificado na entrada de texto.When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. A fórmula usa funções para fazer seu trabalho:The formula uses functions to do its work:

  • A função Patch modifica um ou mais registros de uma fonte de dados.The Patch function modifies one or more records of a data source.

  • A função LookUp localiza o primeiro registro em uma tabela que satisfaz uma fórmula.The LookUp function finds the first record in a table that satisfies a 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:

  1. 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.

  2. 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.

  3. 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.

Próximas etapasNext steps

A próxima etapa nesta série de tutoriais é criar um relatório do Power BI para analisar projetos.The next step in this tutorial series is to create a Power BI report to analyze projects.