Compartilhar via

Criar um aplicativo para editar tabelas em aplicativos de tela

Projetar um aplicativo de produtividade para ter dados e funções relacionados em um só lugar permite que você obtenha mais recursos sem ter que alternar entre as telas. O Microsoft Excel é um exemplo que permite editar dados em tempo real de forma rápida e eficiente.

Usando o Power Apps, você pode aplicar o mesmo conceito fornecendo-o como um front-end para qualquer fonte de dados. Você também pode personalizá-lo ainda mais.

Gerenciamento de catálogo de administração – demonstração do aplicativo de exemplo.

Este tutorial usa os seguintes componentes para fazer um aplicativo de exemplo:

  • Uma fonte de dados (Microsoft Dataverse, você também pode usar o Excel)
  • Formulário — para novos itens
  • Galeria — para exibir itens existentes e
  • Controles de entrada de texto — para atualizar itens existentes

Pré-requisitos

Para seguir este tutorial, é necessário ter acesso a um ambiente do Power Platform e a capacidade de criar tabelas no Microsoft Dataverse.

O tutorial usa a seguinte estrutura para criar o aplicativo de exemplo:

Colunas do Dataverse para a tabela de exemplo.

Para saber como adicionar colunas, consulte Trabalhar com as colunas da tabela.

Um novo formulário principal foi criado para adicionar dados de exemplo:

Novo formulário principal para adicionar dados à tabela do Dataverse.

Para saber como criar um formulário principal com as colunas obrigatórias, consulte Criar um formulário. Use a ordem do formulário correta para adicionar registros usando o novo formulário.

Etapa 1: Criar aplicativo em branco

Crie um aplicativo de tela em branco com o nome "Aplicativo de gerenciamento de catálogo" e layout de Tablet.

Etapa 2: Adicionar uma fonte de dados

Esta seção mostra como adicionar um tabela do Dataverse como fonte de dados para o aplicativo de exemplo. Você também pode usar um arquivo Excel de um site do SharePoint ou o OneDrive como a fonte de dados; ou qualquer outro tipo de fonte de dados de sua escolha.

  1. No painel esquerdo, selecione Dados > Adicionar dados.

  2. Selecione Selecionar todas as tabelas.

  3. Selecione Tabelas editáveis ou a tabela que você criou anteriormente.

    Adicionar a tabela do Dataverse como a fonte de dados.

Para obter mais informações sobre como adicionar uma conexão a um aplicativo de tela, consulte Adicionar fonte de dados.

Etapa 3: Configurar um controle de formulário

Esta etapa adiciona um controle de formulário para adicionar novos itens.

  1. Selecione + (Inserir) > Editar formulário.

    Adicionar controle editar formulário.

  2. No painel direito, escolha a tabela como a fonte de dados para o controle de edição de formulário.

    Escolha a tabela como a fonte de dados para o controle de edição de formulário.

  3. Use a opção de propriedades Editar campos para selecionar as colunas a serem mostradas no controle de edição de formulário. Você também pode alterar a ordem das colunas conforme apropriado.

    Editar campos no controle de edição de formulário.

  4. Escolha o Modo padrão do formulário como Novo.

    Escolha o modo de controle de formulário como Novo.

  5. Ajuste as propriedades Largura e Altura para o tamanho dos cartões de dados a fim de preencher a tela conforme apropriado.

  6. No painel esquerdo, selecione + (Inserir) > Botão.

  7. Atualize o texto do botão para Adicionar o produto.

  8. Selecione a propriedade OnSelect para o controle de botão no lado superior esquerdo da tela.

  9. Na barra de fórmulas, insira a fórmula a seguir.

    SubmitForm(Form1);
NewForm(Form1);
    • A função SubmitForm envia os novos detalhes do produto para a tabela do Dataverse.
    • A função NewForm altera o modo do formulário de volta para novo formulário para adicionar novos produtos após o envio de novos detalhes do produto.
    • Nesta fórmula, Form1 é o nome do controle de edição de formulário adicionado anteriormente. Atualize o nome do formulário nesta fórmula se o nome do formulário for diferente.

    Botão OnSelect – novo formulário.

Esta etapa adiciona uma galeria vertical em branco para editar os itens como uma tabela editável.

  1. No painel esquerdo, selecione + (Inserir)> Layout > Galeria vertical em branco.

  2. Selecione a tabela do Dataverse como a fonte de dados.

  3. Redimensione a galeria para ocupar a metade restante de toda a tela, pois esta galeria conterá todas as colunas editáveis da fonte de dados.

  4. Selecione Editar galeria.

    Editar galeria vertical em branco.

  5. No painel esquerdo, selecione + (Inserir) > Entrada > Entrada de texto.

  6. Alinhe a galeria com as seguintes ações:

    Alinhar galeria vertical em branco.

    1. Mova a linha superior do controle de entrada de texto para o canto superior esquerdo da galeria. Mover esta linha superior move automaticamente as linhas restantes para a mesma coluna.
    2. Redimensione a altura da primeira linha dentro da galeria para ocupar o tamanho da primeira linha que você acabou de mover para o canto superior esquerdo.

    No final, é necessário ver todas as linhas empilhadas no lado esquerdo da galeria.

  7. Atualize a fórmula de propriedade Padrão para a primeira linha de entrada de texto na galeria:

    ThisItem.Product
    • Nesta fórmula, ThisItem se refere ao item na fonte de dados selecionada; que é a tabela do Dataverse neste exemplo.
    • "Produto" é o nome da coluna da tabela.
    • Quando esta fórmula é atualizada para a primeira linha da galeria, ela atualiza automaticamente toda a coluna com os nomes dos produtos. Se você vir um erro, verifique se conectou a galeria à tabela do Dataverse.

    Produto conforme visto na galeria com a fórmula.

  8. Repita as etapas anteriores para adicionar um controle de entrada de texto para cada coluna que deseja mostrar dentro do aplicativo como campo editável. Certifique-se de escolher as colunas corretas na fórmula, substituindo "Produto" pelos nomes de coluna apropriados.

    Dica

    Para redimensionar a largura, use a propriedade Largura ou arraste usando os botões ao redor da primeira linha em cada coluna.

  9. Selecione a primeira linha da primeira coluna dentro da galeria e adicione a fórmula a seguir à propriedade OnChange com alterações nos nomes de coluna e controle conforme apropriado:

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • Nesta fórmula, a função Patch atualiza a tabela selecionada como fonte de dados com os valores, quando alterados.
    • "Tabelas editáveis" é o nome da fonte de dados de exemplo.
    • ThisItem refere-se ao item dentro da fonte de dados selecionada para esta coluna.
    • "Produto" é o nome da coluna na fonte de dados selecionada.
    • "TextInput8" é o nome do controle de entrada de texto adicionado à galeria anexada à coluna "Produto" para a fonte de dados selecionada.
    • "Texto" para "TextInput8" é o texto inserido na célula selecionada dentro da tabela editável na tela.

    Fórmula OnChange para a galeria.

  10. Repita a etapa anterior para cada controle de entrada de texto adicionado para o restante das colunas da fonte de dados conectada. Certifique-se de que a fórmula seja atualizada para usar os nomes de coluna e controle corretos.

Etapa 5: Configurar as opções de edição e cancelamento

Esta etapa adiciona as opções para editar e cancelar o andamento da edição. A galeria com controles de entrada de texto editáveis por padrão pode estar sujeita a atualizações não intencionais. Ter uma opção de edição explícita e, em seguida, interromper a capacidade de edição garante que as edições sejam sempre esperadas.

  1. No menu superior, selecione Inserir > Ícones e adicione dois ícones – Editar e Cancelar (notificação).

    Capacidade de editar ou cancelar.

  2. No painel à esquerda, selecione Exibição de árvore e, em seguida, Aplicativo.

  3. Selecione a propriedade do aplicativo OnStart e adicione a seguinte fórmula com alterações no nome da galeria, conforme apropriado:

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • Nesta fórmula, "Gallery2" é o nome da galeria.
    • DisplayMode é a propriedade DisplayMode da galeria selecionada.
    • "galleryDisplayMode" é a nova variável que esta fórmula cria para armazenar o valor do modo de exibição da galeria.
    • A função Set define a variável "galleryDisplayMode" definida na linha anterior com o valor "Desabilitado" usando "DisplayMode.Disabled". Com o modo de exibição desabilitado, a galeria não pode ser editada por padrão quando o aplicativo é iniciado (aplicativo OnStart).

  4. Selecione a galeria vertical em branco e, em seguida, selecione a propriedade DisplayMode.

  5. Atualize o valor da propriedade de Edit para galleryDisplayMode. Essa mudança garante que o modo da galeria seja sempre definido usando o valor da variável "galleryDisplayMode" criada na etapa anterior.

  6. Atualize as propriedades e fórmulas para os ícones conforme abaixo:

    Ícone Propriedade Fórmula
    Editar OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    Editar Visível galleryDisplayMode = DisplayMode.Disabled
    Cancelar OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    Cancelar Visível galleryDisplayMode = DisplayMode.Edit
    • A função Set define o modo de exibição da galeria dependendo de qual ícone é selecionado.
    • A variável "galleryDisplayMode" controla a visibilidade dos ícones de edição ou cancelamento. Quando a galeria é editável, apenas o botão Cancelar aparece. Apenas o botão de edição aparece quando a galeria está desabilitada.

  7. Sobreponha ícones de edição e cancelamento, já que estamos gerenciando a visibilidade dos dois ícones dependendo do estado da galeria.

    Editar ou cancelar com a mudança para a galeria.

    Dica

    Você pode usar o botão Versão preliminar do lado superior direito da tela para visualizar o aplicativo ou usar a tecla F5 no teclado. Outra alternativa rápida para o teste é pressionar a tecla Alt no teclado e selecionar o botão enquanto mantém a tecla pressionada. Este método também simula a funcionalidade de versão preliminar do aplicativo para a seleção específica enquanto a tecla permanece pressionada.

Etapa 6: Adicionar capacidade de pesquisa

Conforme os dados aumentam na fonte de dados conectada, fica difícil encontrar uma linha específica. Esta etapa adiciona capacidade de pesquisa ao aplicativo para filtrar a galeria com palavras-chave pesquisadas, facilitando a localização de dados relevantes.

  1. Adicione um controle de entrada de texto no meio da tela, acima da galeria.

  2. Atualize a propriedade Itens para a galeria com a fórmula a seguir em vez do nome da tabela, substituindo a tabela e os nomes de controle, conforme apropriado.

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • A função If verifica se os termos de pesquisa estão especificados ou em branco. A galeria é preenchida dependendo dos itens listados.
    • A função IsBlank verifica se o texto da pesquisa está especificado ou não.
    • "Tabelas editáveis" é o nome da fonte de dados de exemplo conectada neste exemplo. Este valor é definido como padrão se nenhum termo de pesquisa for especificado.
    • A função Filter filtra os itens na galeria de acordo com os critérios de texto definidos nesta função. Esta função serve para filtrar a galeria de acordo com o termo pesquisado.
    • "TextInput15" é o nome do controle de entrada de texto usado como caixa de pesquisa para filtrar a galeria.
    • "Produto" e "Segmento" são os nomes das colunas que são pesquisadas usando o texto definido no controle "TextInput15" usando a sintaxe .Text.
    • "In" verifica o valor do controle de entrada de texto para a coluna especificada na fonte de dados conectada.
    • "||" é a condição "OU", significando que a pesquisa deve ser realizada para as colunas Produto ou Segmento. Da mesma forma, você pode atualizar a fórmula para atender às suas necessidades de negócios específicas.

    Galeria de filtros com base nos critérios definidos.

    Dica

    Você pode reter funções mais antigas ou adicionar comentários, usando "//" dentro da barra de fórmulas. Este método pode ser mais útil para fórmulas mais complexas ou para manter a funcionalidade mais antiga, caso você queira reverter mais tarde.

Etapa 7: Alterações diversas, como marca, informações de perfil e redefinição

O aplicativo de exemplo está completo com a funcionalidade esperada neste tutorial. No entanto, considerações extras podem ser adicionadas, como a capacidade de redefinir o controle de entrada de texto do filtro, a marca, como o título da galeria e do aplicativo, e os detalhes do perfil do usuário. Você também pode fazer mais, comece com Adicionar e configurar controles em aplicativos de tela.

A tabela a seguir resume todas as informações de marca, perfil e redefinição adicionadas ao aplicativo de exemplo. Use o método descrito anteriormente neste artigo para trabalhar com diferentes controles e propriedades. Certifique-se de substituir a tabela, o conector e os nomes de controle conforme apropriado.

Recurso Control Propriedades Informações adicionais
Banner/rótulo do aplicativo na parte superior da tela Rótulo de texto Texto – "Gerenciamento de catálogo de administração"
Tamanho da fonte – 28
Cor de preenchimento – Azul
Alinhamento de texto – Centralizar		 Altere todos os valores conforme apropriado.
Adicionar o nome de exibição do usuário no lado superior direito da tela Rótulo de texto Text - Office365Users.MyProfileV2().displayName Conecte-se ao Microsoft 365 primeiro adicionando uma conexão para Usuários do Office 365.
Adicionar a foto do perfil do usuário no lado esquerdo do nome de exibição do usuário, no lado superior direito da tela Imagem Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) Conecte-se ao Microsoft 365 primeiro adicionando uma conexão para Usuários do Office 365.
Redefinir a caixa de texto de pesquisa no canto superior esquerdo da tela Ícone do tipo "Recarregar" OnSelect - Reset(TextInput15) em que "TextInput15" é o controle de entrada de texto usado como a caixa de pesquisa. Quando selecionado, ele redefinirá a caixa de texto de pesquisa resultando na galeria para exibir todos os dados por padrão.
Atualizar o texto do botão Adicionar o produto Adicionar botão do produto Texto – "Adicionar novo produto" Altere conforme apropriado.
Adicionar um rótulo acima da galeria, no lado esquerdo da caixa de entrada de pesquisa para indicar os produtos atuais Rótulo de texto Texto – "Produtos atuais"
Tamanho da fonte – 16
Espessura da fonte – Negrito		 Altere conforme apropriado.
Adicionar texto de dica para a caixa de entrada de texto de pesquisa Entrada de texto Texto de dica – "Pesquisar produtos ou segmentos" Altere conforme apropriado e certifique-se de que a lista de campos (como Produtos e Segmentos) esteja alinhada com os nomes das colunas na fonte de dados.

Por exemplo, a tela preenchida se parece com isto, com os controles e propriedades configurados acima:

Versão final do aplicativo com todos os controles e propriedades configurados.

Etapa 8: Salvar, publicar e compartilhar

Agora que você concluiu o aplicativo de exemplo, salve, publique e compartilhe o aplicativo na organização ou com os convidados.

Confira também

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).