Criar do zero aplicativos de tela integrados do SharePoint para exibir, editar, adicionar e excluir itens em uma lista criada usando as Listas da Microsoft

Neste artigo, você verá como criar um aplicativo do zero com a funcionalidade de formulário do SharePoint. O aplicativo demonstrará como exibir, editar, adicionar e excluir itens de lista usando um aplicativo de tela sem visitar um site do SharePoint.

Pré-requisitos

• Você deve ter acesso a um site do SharePoint para criar uma lista e itens de lista.
• Você deve ter conhecimento sobre criação e configuração de listas.

Detalhes do cenário

A finalidade deste cenário é demonstrar como criar um aplicativo de tela do zero para trabalhar com uma lista. Ao final desta demonstração de exemplo, você será capaz de executar as seguintes tarefas de dentro do aplicativo de tela sem a necessidade de acessar a lista ou seu item:

• Exibir todos os itens da lista.
• Procurar itens em uma lista com base no valor de texto de uma coluna específica.
• Selecionar um item de lista.
• Editar um item de lista.
• Criar um novo item de lista.
• Excluir um item de lista.

O cenário é uma ilustração básica dos recursos do aplicativo de tela quando integrado ao SharePoint. Para melhorar o layout com design aprimorado ou telas adicionais, acesse os seguintes artigos:

• Adicionar e configurar controles
• Adicionar e configurar uma tela
• Entender formulários, layouts e cartões

Exemplo

Este exemplo de cenário mostra as etapas para criar um aplicativo e conectá-lo a uma lista a fim de exibir, editar, adicionar e excluir itens de lista.

Etapa 1 – Criar uma lista usando as Listas da Microsoft

Crie uma lista com colunas e itens de lista. Neste cenário, usamos uma lista com as seguintes colunas e itens de lista:

Etapa 2 – Criar um aplicativo de tela em branco

Criar um aplicativo de tela em branco.

Etapa 3 – Conectar o aplicativo ao SharePoint

1. Selecione Fontes de dados no painel esquerdo.

   

2. Selecione uma fonte de dados do SharePoint. Você também pode pesquisar o nome na caixa de pesquisa.

   

3. Selecione Adicionar uma conexão.

   

4. Selecione um tipo de conexão. Você pode se conectar ao SharePoint Online ou a um site local do SharePoint com um gateway de dados quando configurado. Este cenário se conecta a um site do SharePoint Online.

   

5. Selecione o site do SharePoint com a lista que você criou anteriormente.

   

6. Selecione a lista que você criou. Este cenário usa uma lista chamada Formas.

   

7. Selecione Conectar. A fonte de dados é adicionada ao aplicativo.

   

Etapa 4 – Adicionar tabela de dados para exibir itens de lista

1. Selecione + (inserir) no painel esquerdo.

   

2. Expanda Layout.

3. Selecione Tabela de dados.

   

4. Selecione a fonte de dados como sua conexão do SharePoint.

   

5. Mova a tabela de dados para o canto inferior direito dentro da tela a fim de liberar espaço para componentes adicionais.

   

Etapa 5 – Adicionar a capacidade de pesquisar e selecionar um item

1. Insira um controle Entrada de texto na tela e coloque-o abaixo da lista suspensa.

   

2. Atualize a propriedade Padrão da caixa de pesquisa para o valor Pesquisar por forma.

   

3. Insira um controle Caixa de listagem na tela e coloque-o abaixo do controle Entrada de texto adicionado na etapa anterior.

   

4. No lado direito da tela do Studio, defina a propriedade Items do controle de caixa de listagem como a lista Formas para este exemplo.

   

5. Defina a propriedade Valor do controle de caixa de listagem como Forma em vez de Cor para este exemplo.

   

6. Atualize a propriedade Itens da caixa de listagem adicionada na etapa anterior para a seguinte fórmula:

   Filter([@Shapes], StartsWith(Shape, TextInput1.Text))
   

   

   A fórmula contém as seguintes funções:

   • Filter() – usada nesta fórmula para filtrar itens na caixa de listagem com base nos parâmetros definidos. [@Shapes] nesta função define qual fonte de dados filtrar.
   • StartsWith() – Usada nesta fórmula para filtrar os itens de lista com base na coluna Forma que começam com os caracteres inseridos no controle TextInput1 adicionado anteriormente.

Etapa 6 – Adicionar a capacidade de editar um item

1. Insira o controle Editar formulário.

   

2. No lado direito da tela do Studio, defina a propriedade Fonte de dados do controle de edição de formulário como Formas.

   

3. Selecione Editar campos para o controle de edição de formulário e remova quaisquer outros campos, como Anexos, caso estejam presentes.

   

4. Verifique se os campos Forma e Cor estão presentes. Se não estiverem, adicione-os usando Adicionar campo.

   

5. Reorganize o layout da tela para garantir que o controle Editar formulário esteja visível e não se sobreponha a outros controles.

   

6. Defina a propriedade OnSelect do controle de caixa de listagem como a seguinte função:

   Set(TextSelected,1)
   

   

   A função Set() define uma nova variável chamada TextSelected como 1 quando um valor na caixa de listagem é selecionado. A variável TextSelected é usada neste cenário como um sinalizador para controlar as ações e o comportamento dos recursos de adição, edição e exclusão, como você verá nas seções a seguir.

7. Defina a propriedade Item do controle de edição de formulário como a seguinte fórmula:

   If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)
   

   

   A função If() verifica primeiro se o valor da variável TextSelected é 1 ou não. Se for, o formulário de edição mostrará o item selecionado da caixa de listagem. Se não for, o formulário de edição mostrará o item selecionado da tabela de dados.

8. Insira um botão.

   

9. No lado direito da tela do Studio, defina a propriedade Texto do botão adicionado na etapa anterior como Salvar.

   

10. Defina a propriedade OnSelect do botão Salvar como a seguinte fórmula:

    SubmitForm(Form1);
    Set(TextSelected,0)
    

    

    A fórmula contém as seguintes funções:

    • SubmitForm() – Usada nesta fórmula para enviar o formulário de edição e salvar os valores na lista.
    • Set() – redefine a variável TextSelected como o para que um novo item possa ser selecionado na caixa de listagem.

11. Insira o controle Rótulo do texto.

    

12. Atualize a propriedade Texto do controle Rótulo do texto adicionado na etapa anterior para Editar os valores de um item, selecionar na tabela ou pesquisar.

    

13. Reorganize os controles na tela para organizar os controles de edição.

    

Etapa 7 – Adicionar a capacidade de adicionar um item

1. Insira um botão.

2. Reorganize os controles na tela para garantir que o botão esteja visível.

3. Atualize a propriedade Texto do botão adicionado na etapa anterior para Adicionar.

4. Defina a propriedade OnSelect do botão Adicionar como a seguinte função:

   NewForm(Form1)
   

   

   A função NewForm() limpa o controle de edição de formulário adicionado ao formulário denominado Form1 para que você possa adicionar um novo item de lista.

Etapa 8 – Adicionar a capacidade de excluir um item

1. Insira um botão.

2. Coloque o botão adicionado na etapa anterior abaixo do botão Salvar.

3. Atualize a propriedade Texto do botão adicionado na etapa anterior para Excluir.

4. Defina a propriedade OnSelect do botão Excluir como a seguinte fórmula:

   Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
   Set(TextSelected,0)
   

   

   A fórmula contém as seguintes funções:

   • Remove() – Usada nesta fórmula para excluir o item de lista selecionado.
   • If() – verifica primeiro se o valor da variável TextSelected é 1 ou não. Se for, o botão Excluir excluirá o item selecionado da caixa de listagem. Se não for, o botão Excluir excluirá o item selecionado do controle de tabela de dados.
   • Set() – redefine a variável TextSelected como o para que um novo item possa ser selecionado na caixa de listagem.

Agora que você configurou todos os componentes do aplicativo, verifique se a tela se parece com o seguinte exemplo:

Etapa 9 – Salvar o aplicativo

Agora que o aplicativo tem recursos de exibição, edição, adição e exclusão, salve-o.

1. Selecione o menu Arquivo.

2. Selecione Salvar.

3. Ao salvar pela primeira vez, a opção Salvar leva você para Salvar como. Selecione Salvar para salvar o aplicativo na nuvem.

   

4. Feche o Power Apps Studio.

Etapa 10 – Testar o aplicativo

1. Vá para Power Apps.

2. Selecione Apps.

3. Selecione o aplicativo criado.

   

4. Teste os componentes do aplicativo.

   

   Dica

   Você pode rapidamente obter uma versão preliminar do comportamento de um componente usando a tecla Alt do teclado e o clique com o botão esquerdo do mouse ao editar o aplicativo dentro do Power Apps Studio.

   Por exemplo, em vez de selecionar Executar versão preliminar do aplicativo no canto superior direito ou F5 no teclado que executa a versão preliminar do aplicativo, mantenha a tecla Alt pressionada no teclado e, em seguida, selecione uma linha da tabela de dados para alterar o controle de edição de formulário para a linha selecionada, como se o aplicativo estivesse executando uma versão preliminar.

   

   Além disso, mantenha a tecla Alt pressionada no teclado para continuar a executar a versão preliminar dentro do Power Apps Studio. Por exemplo, selecionar vários componentes para diferentes ações ou verificações.

Próximas etapas

Se você editar o aplicativo, deverá publicar as alterações para que outras pessoas possam vê-las.

Assim que o aplicativo estiver pronto para uso, compartilhe-o.

Confira também

• Adicionar e configurar controles
• Adicionar e configurar uma tela
• Entender formulários, layouts e cartões
• Referência de fórmula
• Referência de controle