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. Certifique-se de ler a Introdução da série para ter uma noção da visão geral, bem como dos downloads relacionados.

Nesta tarefa, criaremos um aplicativo do zero. Este aplicativo permite que um usuário atribua um gerente a projetos e atualize os detalhes do projeto. 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. O processo é mais complexo, mas você aprenderá mais, portanto, acreditamos ser uma compensação justa.

Dica: o pacote de download para este cenário inclui uma versão concluída desse aplicativo: project-details-app.msapp.

Análise rápida do 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. Você pode continuar a trabalhar no PowerApps Studio para Web ou pode usar o PowerApps Studio para 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:

  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 telas

  2. Painel do meio, que contém a tela do aplicativo em que você está trabalhando

  3. Painel direito, em que você configura opções como as fontes de dados e layout

  4. Lista suspensa Propriedade, em que você seleciona as propriedades às quais as fórmulas se aplicam

  5. Barra de fórmulas, em que você pode adicionar fórmulas (como no Excel) que definem o comportamento do aplicativo

  6. Faixa de opções, em que você adiciona controles e personaliza elementos de design

PowerApps Studio

Etapa 1: criar telas

Com essa análise feita, vamos começar a criar um aplicativo.

Criar e salvar o aplicativo

  1. No PowerApps Studio, clique ou toque em Novo e, em Aplicativo em branco, clique ou toque em Layout do Telefone.

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

    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.

    Salvar na nuvem

  4. Clique ou toque na Ícone Voltar para o aplicativo para voltar para o aplicativo.

Adicionar quatro telas ao aplicativo

Nesta etapa, criaremos quatro telas em branco para o aplicativo. Usaremos layouts de tela diferentes, dependendo da finalidade da tela. Adicionaremos conteúdo a essas telas nas etapas posteriores.

Tela Finalidade
SelectTask Tela de abertura, navegar para outras telas
AssignManager Atribuir um gerente a um projeto aprovado
ViewProjects Exibir uma lista de projetos, com informações de resumo
UpdateDetails Exibir e atualizar os detalhes de um projeto
  1. Na guia Início, clique ou toque em NewScreen e em Tela com rolagem.

    Tela com rolagem

  2. Renomeie a tela como SelectTask.

    Renomear a tela

  3. Crie e renomeie as telas adicionais:

    1. Clique ou toque em NewScreen e em Tela com rolagem. Renomeie a tela como AssignManager.
    2. Clique ou toque em NewScreen e em Tela da lista. Renomeie a tela como ViewProjects.
    3. Clique ou toque em NewScreen e em Tela do formulário. Renomeie a tela como UpdateDetails.
  4. Selecione as reticências (. . .) ao lado de Screen1 e clique ou toque em Excluir.

    Excluir tela

O aplicativo agora deve ser semelhante à imagem a seguir.

Todas as telas do aplicativo

Etapa 2: conectar a uma lista do SharePoint

Nesta etapa, nos conectaremos à lista do SharePoint Detalhes do Produto. Usamos apenas uma lista nesse aplicativo, mas você pode se conectar a ambas se desejar estender o aplicativo.

  1. Na barra de navegação esquerda, clique ou toque na tela SelectTask.

  2. No painel direito, clique ou toque em Adicionar fonte de dados.

    Conectar aos dados

  3. Clique ou toque em Nova conexão.

    Nova conexão

  4. Clique ou toque em SharePoint.

    Conexão do SharePoint

  5. Selecione Conectar-se diretamente (serviços de nuvem) e clique ou toque em Criar.

    Conectar-se diretamente (serviços de nuvem)

  6. Insira uma URL do SharePoint e, em seguida, clique ou toque em Ir.

    URL do SharePoint para conexão

  7. Selecione a lista Detalhes do Projeto e clique ou toque em Conectar.

    Selecionar lista Detalhes do Projeto

    A guia Fontes de dado no painel direito agora mostra a conexão criada.

    Guia Fontes de dados

Etapa 3: criar a tela SelectTask

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.

Atualizar o título e inserir o texto de introdução

  1. Na barra de navegação esquerda, selecione a tela SelectTask.

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

    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.

    Adicionar rótulo

  4. Na barra de fórmulas, defina as seguintes propriedades para o rótulo:

    • Propriedade Color = DarkGray
    • Propriedade Size = 18
    • Propriedade Text = “Clique ou toque em uma tarefa para continuar...”

    Atualizar o texto do rótulo

Adicionar dois botões de navegação

  1. Na guia Inserir, clique ou toque em Botão e arraste o botão para baixo do rótulo.

    Botão Adicionar

  2. Na barra de fórmulas, defina as seguintes propriedades para o botão:

    • Propriedade OnSelect = 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.
    • Propriedade Text = "Atribuir Gerente"
  3. Redimensione o botão para acomodar o texto.

    Atualizar o texto do botão

  4. Insira outro botão com as seguintes propriedades:

    • Propriedade OnSelect = Navigate(ViewProjects, Fade).
    • Propriedade Text = "Atualizar Detalhes"

    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.

Executar o aplicativo

O aplicativo ainda não faz muito, mas você pode executá-lo se desejar:

  1. Clique ou toque na tela SelectTask (o aplicativo sempre é iniciado na tela selecionada no modo de versão prévia no PowerApps Studio).

  2. Clique ou toque na Ícone Executar aplicativo no canto superior direito para executar o aplicativo.

  3. Clique ou toque em um dos botões para navegar para outra tela.

  4. Clique ou toque na Ícone Fechar versão prévia do aplicativo no canto superior direito para fechar o aplicativo.

Etapa 4: criar a tela de AssignManager

Nesta etapa, usaremos uma galeria para exibir todos os projetos que foram aprovados, mas ainda não têm um gerente. Adicionaremos outros controles para que você possa atribuir um gerente.

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.

  1. Salve as alterações feitas até agora.

  2. Na barra de navegação esquerda, clique ou toque na tela AssignManager.

Atualizar o título e inserir o texto de introdução

  1. Altere [Título] para Atribuir Gerente.

  2. Adicione um rótulo com as seguintes propriedades:

    • Propriedade Color = DarkGray
    • Propriedade Size = 18
    • Propriedade Text = "Selecione um projeto e atribua um gerente"

    Layout de Atribuir gerente

Adicionar uma seta para voltar para ir para a tela SelectTask

  1. Clique ou toque na barra azul na parte superior da tela.

  2. Na guia Inserir, clique ou toque em Ícones e, em seguida, clique ou toque em Esquerda.

    Inserir seta para a esquerda

  3. Mova a seta para a esquerda da barra azul e defina as seguintes propriedades:

    • Propriedade Color = White
    • Propriedade Height = 40
    • Propriedade OnSelect = Navigate(SelectTask, Fade)
    • Propriedade Width = 40

    Adicionar o botão Voltar

Adicionar e modificar uma galeria

  1. Na guia Inserir, clique ou toque em Galeria e em Vertical.

    Adicionar uma galeria vertical

  2. Selecione Título, subtítulo e corpo do menu Layout no painel direito.

    Alterar o layout da galeria

    A galeria agora tem o layout certo, mas ainda tem o texto de exemplo padrão. Corrigiremos isso a seguir.

    Galeria com o texto padrão

  3. Defina as seguintes propriedades para a galeria:

    • Propriedade BorderThickness = 1
    • Propriedade BorderStyle = Dotted
    • Propriedade Items = Filter('Project Details', PMAssigned="Unassigned"). Somente projetos em nenhum gerente atribuído são incluídos na galeria.

    Galeria com o texto da lista

  4. No painel direito, atualize os campos de acordo com a lista a seguir:

    • ApprovedDate
    • Status
    • Título

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

    Remover o ícone de seta

    Agora, a tela deve ser semelhante à imagem a seguir.

    Galeria formatada

Alterar a cor de um item se ele for selecionado

  1. Selecione a galeria e defina a propriedade TemplateFill como If (ThisItem.IsSelected=true, Orange, White).

  2. Selecione um item da galeria. Agora, a tela deve ser semelhante à imagem a seguir.

    Galeria com o item selecionado

Adicionar um rótulo, a entrada de texto e o botão OK para enviar as atribuições de gerente

  1. Clique ou toque fora da galeria na qual está trabalhando.

  2. Na guia Inserir, clique ou toque em Rótulo. Arraste o rótulo abaixo da galeria, à esquerda. Defina as seguintes propriedades para o rótulo:

    • Propriedade Size = 20
    • Propriedade Text = "Gerente:"

    Adicionar o rótulo Gerente

  3. Na guia Inserir, clique ou toque em Texto e em Entrada de texto. Arraste a entrada de texto abaixo da galeria, no centro. Defina as seguintes propriedades para a lista suspensa:

    • Propriedade Default = ""
    • Propriedade Height = 60
    • Propriedade Size = 20
    • Propriedade Width = 250

    Adicionar entrada de texto

  4. Na guia Inserir, clique ou toque em Botão. Arraste o botão abaixo da galeria, à direita. Defina as seguintes propriedades para o botão:

    • Propriedade Height = 60
    • Propriedade OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Para obter mais informações, consulte Aprofundar fórmula.
    • A fórmula atualiza a lista Detalhes do Projeto, definindo um valor para o campo PMAssigned.
    • Propriedade Size = 20
    • Propriedade Text = "OK"
    • Propriedade Width = 80

    Adicionar um botão OK

Agora, a tela concluída deve ser semelhante à imagem a seguir.

Tela Atribuir Gerente concluída

Etapa 5: criar a tela de ViewProjects

Nesta etapa, alteraremos as propriedades da galeria na tela ViewProjects. Esta galeria exibe itens da lista Detalhes do Projeto. Você seleciona um item na tela e, em seguida, edita os detalhes na tela UpdateDetails.

  1. Na barra de navegação esquerda, clique ou toque na tela ViewProjects.

  2. Altere [Título] para "Exibir Projetos".

  3. Na barra de navegação esquerda, clique ou toque em BrowserGallery1 em ViewProjects.

  4. Selecione Título, subtítulo e corpo do menu Layout no painel direito.

    Alterar o layout da galeria

    A galeria agora tem o layout certo, com o texto de exemplo padrão.

    Galeria com o texto padrão

  5. Selecione o botão Atualizar Ícone Atualizar e defina sua propriedade OnSelect como 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).

Adicionar uma seta para voltar para ir para a tela SelectTask

  1. Na barra de navegação esquerda, clique ou toque na tela AssignManager.

  2. Selecione a seta de voltar que você adicionou e copie-a.

  3. Cole a seta na tela ViewProjects e posicione-a à esquerda do botão de atualização.

    Botão Voltar

    Todas as suas propriedades vêm com ela, incluindo a propriedade OnSelect de Navigate(SelectTask, Fade).

Alterar a fonte de dados da galeria BrowseGallery1

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

    Isso define a fonte de dados da galeria para a lista Detalhes do Projeto e usa o campo Título para pesquisar e classificar.

  2. Selecione o ícone Seta de detalhes no primeiro item da galeria e defina a propriedade OnSelect como Navigate(UpdateDetails, None).

     Galeria Exibir Projetos – primeiro item selecionado

  3. No painel direito, atualize os campos de acordo com a lista a seguir:

    • Status
    • PMAssigned
    • Título

    Campos de galeria

    Agora, a tela concluída deve ser semelhante à imagem a seguir.

    Tela Exibir Projeto concluída

Etapa 6: criar a tela UpdateDetails

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. Nessa tela, você edita os detalhes de um projeto que selecionou na tela Exibir Projetos.

  1. Na barra de navegação esquerda, clique ou toque na tela UpdateDetails.

  2. Altere [Título] para "Atualizar Detalhes".

  3. Na barra de navegação esquerda, clique ou toque em EditForm1 em UpdateDetails.

  4. Defina as seguintes propriedades para o formulário:

    • Propriedade DataSource = 'Detalhes do Projeto'
    • Propriedade Item = 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:

    • Título
    • PMAssigned
    • Status
    • ProjectedStartDate
    • ProjectedEndDate
    • ProjectedDays
    • ActualDays

    Editar campos de formulário

  6. Selecione o botão de cancelar Ícone Cancelar e defina sua propriedade OnSelect como 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). Como estamos usando o controle de formulário de edição, podemos usar Submit(), em vez de usar Patch() como fizemos anteriormente.

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

Tela Atualizar Detalhes concluída

Etapa 7: executar o aplicativo

Agora que o aplicativo está concluído, vamos executá-lo par ver como funciona. Adicionaremos um link no site do SharePoint para o aplicativo. Você poderá executar o aplicativo no navegador, mas talvez precise compartilhar o aplicativo para outras pessoas para executá-lo. Para obter mais informações, consulte Compartilhar seus aplicativos.

Adicionar um link para o aplicativo

  1. No inicializador de aplicativos do Office 365, clique ou toque em 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.

    Selecionar o aplicativo de Gerenciamento de Projetos

  3. Copie o endereço (URL) para o aplicativo no navegador.

    Copiar a URL do aplicativo

  4. No SharePoint, clique ou toque em EDITAR LINKS.

    Editar links do site do SharePoint

  5. Clique ou toque em (+) link.

    Adicionar link do aplicativo ao site do SharePoint

  6. Digite "Aplicativo de Gerenciamento de Projeto" e cole o endereço para o aplicativo.

    Editar propriedades do link

  7. Clique ou toque em OK e em Salvar.

    Salvar alterações de link

Atribuir um gerente a um projeto

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. Em seguida, assumiremos a função do gerente de projeto e adicionaremos algumas informações sobre o projeto atribuído a nós.

  1. Primeiro, vamos examinar a lista Detalhes do Projeto no SharePoint. Dois projetos têm um valor de Não Atribuído na coluna PMAssigned. Os veremos no aplicativo.

    Projetos não atribuídos na lista do SharePoint

  2. Clique ou toque no link que você criou para o aplicativo.

  3. Na primeira tela, clique ou toque em Atribuir Gerente.

    Tela de introdução do aplicativo

  4. Na tela Atribuir Gerente, você verá os dois projetos não atribuídos na lista. Selecione o projeto New BI software (Novo software de BI).

    Galeria com o item selecionado

  5. Na entrada de texto Gerente, insira "Joni Sherman" e clique em OK.

    A alteração é aplicada à lista e a galeria é atualizada para que apenas o projeto não atribuído restante seja exibido.

    Atribuir gerente ao projeto

  6. Volte para a lista do SharePoint e atualize a página. Você verá que a entrada do projeto agora está atualizada com o nome do gerente de projeto.

    Gerente de projeto atribuído no alista do SharePoint

Atualizar os detalhes do projeto

  1. Clique ou toque em Ícone Voltar para voltar para a primeira tela e clique ou toque em Atualizar Detalhes.

    Tela de introdução do aplicativo

  2. Na tela Exibir Projetos, insira “Novo” na caixa de pesquisa.

    Pesquisar na galeria do aplicativo

  3. Clique no Ícone de Seta de detalhes do item New BI software (Novo software de BI).

    Item da galeria selecionado

  4. Na tela Atualizar Detalhes, defina os seguintes valores:

    • O campo ProjectedStartDate = "3/6/2017"
    • O campo ProjectedEndDate = "3/24/2017"
    • O campo ProjectedDays = "15"

    Atualizar detalhes do item

  5. Clique ou toque na Ícone de marca de seleção Para aplicar a alteração à lista do SharePoint.

  6. Feche o aplicativo e volte à lista. Você verá que a entrada do projeto agora está atualizada com as alterações de data e dia.

    Lista do SharePoint atualizada

Aprofundar fórmula

Esta é a segunda seção opcional sobre as fórmulas do PowerApps. 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. Neste aprofundamento, analisaremos a fórmula que usamos para a tela AssignManager do segundo aplicativo. Aqui está a fórmula:

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

O que essa fórmula faz? 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. A fórmula usa funções para fazer seu trabalho:

  • A função Patch modifica um ou mais registros de uma fonte de dados.

  • A função LookUp localiza o primeiro registro em uma tabela que satisfaz uma fórmula.

Quando você reúne as funções na fórmula, eis o que acontece:

  1. Quando você clica no botão OK, a função Patch é chamada para atualizar a lista Detalhes do Projeto.

  2. Dentro da função Patch, a função LookUp identifica qual linha da lista Detalhes do Projeto atualizar. Ele faz isso comparando a ID do item da galeria selecionado à ID da lista. Por exemplo, uma ID de 12 significa que a entrada de New BI software (Novo software de BI) deve ser atualizada.

  3. Agora que a função Patch tem a ID certa, ela atualiza o campo PMAssigned com o valor em TextInput1.Text.

Próximas etapas

A próxima etapa nesta série de tutoriais é criar um relatório do Power BI para analisar projetos.