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.

Agora que as listas do SharePoint estão em vigor, podemos criar e personalizar o nosso primeiro aplicativo. O PowerApps é integrado ao SharePoint, portanto, é fácil de gerar um aplicativo de três telas básico diretamente de uma lista. 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. Se você criar um aplicativo diretamente de uma lista, o aplicativo será exibido como um exibição para essa lista. Você pode executar esse aplicativo em um navegador, bem como em um telefone celular.

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

Etapa 1: gerar um aplicativo de uma lista do SharePoint

  1. Na lista Solicitações de Projeto que você criou, clique ou toque em PowerApps e em Criar um aplicativo.

    Criar um aplicativo

  2. Atribua um nome ao aplicativo, como "Aplicativo de Solicitações de Projeto" e clique ou toque em Criar. Quando o aplicativo estiver pronto, ele será aberto no PowerApps Studio para Web.

    Especificar um nome para o aplicativo

Etapa 2: examinar o aplicativo no 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.

    PowerApps Studio com exibição hierárquica

  2. Clique ou toque no ícone de miniatura para alternar entre as exibições.

    Seletor da exibição do PowerApps Studio

  3. Clique ou toque em cada tela para exibi-la no painel central. Há três telas:

    1. A tela de navegação, em que você navega, classifica e filtra os dados extraídos da lista.
    2. A tela de detalhes, na qual são exibidos mais detalhes sobre um item.
    3. A tela de edição/criação, em que você edita um item existente ou criar um novo.

    PowerApps Studio com exibição de miniatura

Etapa 3: personalizar a tela de navegação do aplicativo

  1. Clique ou toque na tela de navegação.

    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.

  2. Selecione a galeria BrowseGallery1 clicando ou tocando em qualquer registro, exceto o primeiro.

    Galeria de navegação

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

    • RequestDate
    • Descrição
    • Título
    • Solicitante

    Campos de galeria

  4. Com BrowseGallery1 ainda selecionada, selecione a propriedade Items.

    Propriedade Itens

  5. Altere a fórmula para 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. Consulte Aprofundar fórmula para obter mais informações.

  6. Clique ou toque em Arquivo e em Salvar. Clique ou toque em Ícone de Voltar para o aplicativo para voltar para o aplicativo.

Etapa 4: personalizar a tela de detalhes e a tela de edição do aplicativo

  1. Clique ou toque na tela de detalhes.

    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. Ela tem controles para editar e excluir itens e voltar para a tela de navegação.

  2. Selecione o formulário de exibição DetailForm1.

    Formulário de exibição de detalhes

  3. No painel direito, arraste o campo Título para a parte superior.

    Campo do título

  4. Clique ou toque na tela de edição.

    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). Ela tem controles para salvar ou descartar as alterações.

  5. Selecione o formulário de edição EditForm1.

    Formulário de edição

  6. Como acima, arraste o campo Título para a parte superior.

    Campo do título

Etapa 5: executar o aplicativo da lista

  1. Na lista Solicitações de Projeto, clique ou toque em Todos os Itens e em Aplicativo de Solicitações de Projeto.

    Exibir o aplicativo de Solicitações de Projeto

  2. Clique em Abrir, que abre o aplicativo em uma nova guia do navegador.

    Abrir o aplicativo de Solicitações de Projeto

  3. No aplicativo, clique ou toque em Ícone Ir para detalhes para o primeiro item na galeria de navegação.

    Primeiro item da galeria

  4. Clique ou toque na Ícone de edição de lápis para editar o 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ção

    Atualizar o campo Descrição

  6. Feche a guia do navegador.

  7. Volte para a lista Solicitações de Projeto, clique ou toque em Aplicativo de Solicitações de Projeto e em Todos os Itens.

    Exibir todos os itens

  8. Verifique a alteração feita no aplicativo.

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

Aprofundar fórmula

Esta seção é opcional, mas ela ajudará você a entender melhor como as fórmulas funcionam. Na etapa 3 dessa tarefa, modificamos a fórmula para a propriedade Items de BrowseGallery1. Especificamente, alteramos a classificação e a pesquisa para usar o campo Título, em vez do campo que o PowerApps escolheu. Aqui está a fórmula modificada:

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

Mas o que essa fórmula faz? 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. A fórmula usa funções para fazer seu trabalho. As funções usam parâmetros (ou seja, entrada), executam uma operação (como filtragem) e retornam um valor (ou seja, saída):

  • A função SortByColumns classifica uma tabela com base em uma ou mais colunas.

  • A função Filter localiza os registros em uma tabela que atende à fórmula especificada.

  • A função StartsWith testa se uma cadeia de caracteres de texto começa com outra.

  • A função If retornará um valor se uma condição for verdadeira e retornará outro valor se a mesma condição for falsa.

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

  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.

    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”. Você não verá todos os itens "Mobile devices", porque eles não começam com “de”.

  2. A função Filter retorna linhas da tabela Solicitações de Projeto. Se não houver nenhum texto na caixa de pesquisa para comparar, Filter retornará todas as linhas.

    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). A função retorna um valor de Descending ou Ascending.

    If ( SortDescending1, Descending, Ascending )

  4. Agora a função SortByColumns função pode classificar a galeria. Nesse caso, ela classifica com base no campo Título, mas esse pode ser um campo diferente daquele em que fez a pesquisa.

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. Para obter mais informações, consulte Referência de fórmula para PowerApps.

Próximas etapas

A próxima etapa nesta série de tutoriais é criar um fluxo para gerenciar aprovações de projeto.