Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
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.
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:
Para saber como adicionar colunas, consulte Trabalhar com as colunas da tabela.
Um novo formulário principal foi criado para adicionar dados de exemplo:
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.
No painel esquerdo, selecione Dados > Adicionar dados.
Selecione Selecionar todas as tabelas.
Selecione Tabelas editáveis ou a tabela que você criou anteriormente.
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.
Selecione + (Inserir) > Editar formulário.
No painel direito, escolha a tabela como a fonte de dados para o controle de edição de formulário.
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.
Escolha o Modo padrão do formulário como Novo.
Ajuste as propriedades Largura e Altura para o tamanho dos cartões de dados a fim de preencher a tela conforme apropriado.
No painel esquerdo, selecione + (Inserir) > Botão.
Atualize o texto do botão para Adicionar o produto.
Selecione a propriedade OnSelect para o controle de botão no lado superior esquerdo da tela.
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.
Etapa 4: Configurar a galeria como tabela editável
Esta etapa adiciona uma galeria vertical em branco para editar os itens como uma tabela editável.
No painel esquerdo, selecione + (Inserir)> Layout > Galeria vertical em branco.
Selecione a tabela do Dataverse como a fonte de dados.
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.
Selecione Editar galeria.
No painel esquerdo, selecione + (Inserir) > Entrada > Entrada de texto.
Alinhe a galeria com as seguintes ações:
- 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.
- 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.
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.
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.
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.
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.
No menu superior, selecione Inserir > Ícones e adicione dois ícones – Editar e Cancelar (notificação).
No painel à esquerda, selecione Exibição de árvore e, em seguida, Aplicativo.
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).
Selecione a galeria vertical em branco e, em seguida, selecione a propriedade DisplayMode.
Atualize o valor da propriedade de
Edit
paragalleryDisplayMode
. Essa mudança garante que o modo da galeria seja sempre definido usando o valor da variável "galleryDisplayMode" criada na etapa anterior.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.
Sobreponha ícones de edição e cancelamento, já que estamos gerenciando a visibilidade dos dois ícones dependendo do estado da 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.
Adicione um controle de entrada de texto no meio da tela, acima da galeria.
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.
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:
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).