Criar um aplicativo de tela para gerenciar projetos

Nesta tarefa, criaremos um aplicativo de tela do zero. Este aplicativo permite que um usuário atribua um gerente a projetos e atualize os detalhes dos projetos. 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.

Revisão rápida do Power Apps Studio

O Power Apps 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 no 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 central, que contém a tela do aplicativo em que você está trabalhando
3. Painel direito, em que você configura opções como fontes de dados e layout
4. Lista suspensa de propriedades, em que você seleciona as propriedades às quais as fórmulas se aplicam
5. Barra de fórmulas, em que você adiciona 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

Etapa 1: criar telas

Com essa revisão feita, vamos começar a criar um aplicativo.

Criar o aplicativo

Crie um aplicativo de tela em branco com o layout Smartphone e o nome "Aplicativo Gerenciamento de Projetos".

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.

1. Na guia Página Inicial, clique ou toque em NewScreen e em Tela com rolagem.

   

2. Renomeie a tela como SelectTask.

   

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.

   

O aplicativo agora deve ser semelhante à imagem a seguir.

Etapa 2: conectar a uma lista criada usando as Listas da Microsoft

Nesta etapa, vamos nos conectar à lista Project Details. Usamos apenas uma lista neste aplicativo, mas você pode se conectar a ambas se desejar estendê-lo.

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.

   

3. Clique ou toque em Nova conexão.

   

4. Clique ou toque no SharePoint.

   

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

   

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

   

7. Selecione a lista Project Details e clique ou toque em Conectar.

   

   A guia Fontes de dados no painel direito agora mostra a conexão que você criou.

   

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

   

3. Na guia Inserir, clique ou toque em Rótulo e arraste o rótulo para baixo da faixa superior.

   

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

     

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.

   

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

   • Propriedade OnSelect = Navigate(AssignManager, Fade). Ao executar o aplicativo e clicar 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.

   

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

   • Propriedade OnSelect = Navigate(ViewProjects, Fade).

   • Propriedade Text = "Atualizar Detalhes"

     

     Observação

     O botão está rotulado como Atualizar Detalhes, mas navegamos primeiro até 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 preliminar no Power Apps Studio).

2. Clique ou toque no 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 no no canto superior direito para fechar o aplicativo.

Etapa 4: criar a tela 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.

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"

     

Adicionar uma seta para voltar a fim de retornar à 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.

   

3. Mova a seta para o lado esquerdo da barra azul e defina as seguintes propriedades:

   • Propriedade Color = White

   • Propriedade Height = 40

   • Propriedade OnSelect = Navigate(SelectTask, Fade)

   • Propriedade Width = 40

     

Adicionar e modificar uma galeria

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

   

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

   

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

   

3. Defina as seguintes propriedades para a galeria:

   • Propriedade BorderThickness = 1

   • Propriedade BorderStyle = Dotted

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

     

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

   • ApprovedDate

   • Status

   • Tratamento

     

5. Redimensione os rótulos na galeria conforme apropriado e remova a seta do primeiro item da galeria (não precisamos navegar para nenhum lugar desta galeria).

   

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

   

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.

   

Adicionar rótulo, entrada de texto e botão OK para enviar 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 para baixo da galeria, à esquerda. Defina as seguintes propriedades para o rótulo:

   • Propriedade Size = 20

   • Propriedade Text = "Gerente:"

   

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

   • Propriedade Default = ""

   • Propriedade Height = 60

   • Propriedade Size = 20

   • Propriedade Width = 250

   

4. Na guia Inserir, clique ou toque em Botão. Arraste o botão para baixo 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 Aprofundamento de fórmula.

   • Essa fórmula atualiza a lista Project Details, definindo um valor para o campo PMAssigned.

   • Propriedade Size = 20

   • Propriedade Text = "OK"

   • Propriedade Width = 80

   

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

Etapa 5: criar a tela ViewProjects

Nesta etapa, alteraremos as propriedades da galeria na tela ViewProjects. Esta galeria exibe itens da lista Project Details. Você seleciona um item nessa 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 no menu Layout no painel direito.

   

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

   

5. Selecione o botão de atualização e defina sua propriedade OnSelect como Refresh('Project Details').

6. Selecione o botão de novo item e defina sua propriedade OnSelect como NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Adicionar uma seta para voltar a fim de retornar à tela SelectTask

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

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

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

   

   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 como a lista Project Details e usa o campo Título para pesquisar e classificar.

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

   

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

   • Status

   • PMAssigned

   • Tratamento

     

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

     

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 = 'Project Details'

   • Propriedade Item = BrowseGallery1.Selected

5. Com o formulário ainda selecionado, no painel direito, clique ou toque na caixa de seleção dos campos a seguir, na ordem mostrada:

   • Título

   • PMAssigned

   • Status

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

6. Selecione o botão de cancelamento e defina sua propriedade OnSelect como ResetForm(EditForm1); Back().

7. Selecione o botão Salvar e verifique a fórmula OnSelect - SubmitForm(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, selecione um item na tela Exibir Projetos).

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 que outras pessoas possam executá-lo. Para obter mais informações, consulte Compartilhar seu aplicativo.

Adicionar um link para o aplicativo

1. No inicializador de aplicativos do Office 365, clique ou toque em Power Apps.

   

2. No Power Apps, clique ou toque nas reticências (. . .) do aplicativo Project Management e em Abrir.

   

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

   

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

   

5. Clique ou toque em (+) link.

   

6. Digite "aplicativo Project Management" e cole o endereço para o aplicativo.

   

7. Clique ou toque em OK e em Salvar.

   

Atribuir um gerente a um projeto

Agora que temos o aplicativo em nosso site do SharePoint, assumiremos a função do aprovador de projetos, ou seja, procuraremos por projetos que não tenham um gerente atribuído e atribuiremos um gerente a um deles. Em seguida, assumiremos a função do gerente de projetos e adicionaremos algumas informações sobre o projeto atribuído a nós.

1. Primeiro, vamos examinar a lista Project Details no SharePoint. Dois projetos têm um valor de Não Atribuído na coluna PMAssigned. Eles serão vistos no aplicativo.

   

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

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

   

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

   

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.

   

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

   

Atualizar os detalhes do projeto

1. Clique ou toque no para voltar à primeira tela, clique ou toque em Atualizar os detalhes.

   

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

   

3. Clique no para o item New BI software (Novo software de BI).

   

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

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

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

   • O campo ProjectedDays = "15"

   

5. Clique ou toque no para aplicar a alteração à lista.

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

   

Aprofundamento da fórmula

Esta é a segunda seção opcional sobre as fórmulas do Power Apps. No primeiro aprofundamento, analisamos uma das fórmulas que o Power Apps gera para a galeria de navegação em um aplicativo de três telas. Neste aprofundamento, analisaremos uma 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 Project Details, definindo a coluna PMAssigned como 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 corresponda a 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 Project Details.

2. Dentro da função Patch, a função LookUp identifica qual linha da lista Project Details atualizar. Ela faz isso comparando a ID do item da galeria selecionado à ID da lista. Por exemplo, uma ID de 12 significa que a entrada de 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.

Consulte também

• Cenários de integração do SharePoint