Caixa de diálogo estilizada de página personalizada do Power Apps para aplicativos -Custom Page Modal Dialog
Pablo Luiz Mazorovicz
Líder Técnico Analista de Negócios | Microsoft Power Platform | Low-Code | Metodologias Agile e Processos.
As páginas personalizadas do Power Apps podem ser usadas para criar uma caixa de diálogo modal em aplicativos baseados em modelo.
Uma caixa de diálogo modal é um menu pop-up que permite ao usuário preencher algumas informações e clicar em OK ou cancelar.
Essa técnica requer um pouco de código JavaScript.
Mas não se preocupe.
Se você é iniciante em JavaScript, tenho um código que pode copiar e colar em seu próprio aplicativo baseado em modelo para fazê-lo funcionar.
Neste artigo, ensinarei como criar uma caixa de diálogo modal de página personalizada do Power Apps.
Introdução: a caixa de diálogo de comentários de revisão
O departamento de TI usa o aplicativo Asset Checkout para gerenciar os dispositivos de empréstimo para os usuários. A tabela Comentários armazena comentários de usuários sobre o dispositivo emprestado. Os comentários podem ser editados usando um diálogo modal criado usando uma página personalizada.
Criar um novo aplicativo baseado em modelo do Power Apps
Abra o Power Apps Studio e navegue até a página Criar. Selecione o modelo de aplicativo baseado em modelo de check-out de ativos.
Clique no botão Criar .
O aplicativo Asset Checkout será aberto no editor de aplicativo baseado em modelo.
Adicionar uma nova página personalizada ao aplicativo baseado em modelo
Pressione o botão Adicionar página no editor de aplicativo baseado em modelo
Selecione Página personalizada .
Escolha Criar uma nova página personalizada chamada Revisão Modal e clique no botão Adicionar. Isso abrirá uma nova página personalizada no designer de aplicativo de tela.
Defina as configurações de exibição do aplicativo
No Power Apps Studio, a página personalizada aparecerá na tela como uma página em tamanho real. Para tornar a caixa de diálogo modal menor, abra o menu Configurações avançadas e vá para Exibir . Altere a largura e a altura para 600 x 300 pixels.
Além disso, desative a opção Dimensionar para caber.
Isso permitirá que o diálogo modal se torne responsivo e dimensionado adequadamente em dispositivos móveis, tablets e PCs.
Configurar o objeto e a tela do aplicativo de página personalizada
Começaremos a criar a caixa de diálogo modal da página personalizada atualizando o objeto do aplicativo.
Escreva este código na propriedade OnStart do objeto app. Ele obtém o recordId do Dataverse e o armazena em uma variável chamada gblReviewId .
O GUID está no formato “{725851A0-B573-4A33-B609-DA0F2E202EFA}”, portanto, devemos remover as chaves e alterar o tipo de dados de string para GUID.
Mais adiante neste tutorial, aprenderemos como passar um GUID para o diálogo modal usando parâmetros de URL. Nada deve aparecer na página personalizada neste momento. Em seguida, usamos a variável gblReviewId para obter o registro Review da tabela de comentários e armazená-lo em uma variável chamada gblReview .
Set(
gblReviewId,
GUID(Mid(Param("recordId"),2, Len(Param("recordId"))-2))
);
Set(
gblReview,
LookUp(
Reviews,
Review = gblReviewId
)
)
Para usar a tabela Reviews no código de propriedade OnStart , certifique-se de que ela foi adicionada ao menu Data.
Além disso, altere a largura e a altura mínimas da tela para 200 x 200.
MinScreenHeight: 200
MinScreenWidth: 200
Em seguida, defina a largura e a altura da tela chamada Review Modal.
Defina as seguintes propriedades para alterar a largura e a altura da tela. A propriedade height usa uma fórmula para verificar se o aplicativo está sendo executado no modo de estúdio ou no modo de reprodução.
No modo de reprodução, a caixa de diálogo modal vem com um cabeçalho de 53 pixels de altura.
Portanto, quando estamos no modo estúdio, devemos diminuir a altura do diálogo modal da página personalizada em 53 pixels.
Definiremos o parâmetro de URL do tipo de página posteriormente no tutorial.
Por enquanto, digite o código mostrado abaixo e confie em mim que funcionará.
Height: App.Height - If(IsBlank(Param("pagetype")), 53)
Width: Max(App.Width, App.MinScreenWidth)
Criar o contêiner principal da caixa de diálogo modal da página personalizada
Adicione um contêiner vertical à tela para conter todos os controles da caixa de diálogo.
Posicione o contêiner nas coordenadas X e Y (0, 0) e defina a largura e a altura para corresponder ao tamanho da tela.
Height: Parent.Height
Width: Parent.Width
X: 0
Y: 0
Queremos que os controles colocados dentro do contêiner principal fluam de cima para baixo e estiquem para preencher o tamanho do contêiner.
Use esses valores para definir as propriedades LayoutJustifyContent e LayoutAlignItems do contêiner.
LayoutJustifyContent: LayoutJustifyContent.Start
LayoutAlignItems: LayoutAlignItems.Stretch
Inserir uma caixa de comentários na caixa de diálogo modal
O principal recurso do diálogo modal é a caixa de texto para exibir comentários e permitir que o usuário faça edições.
Insira uma entrada de texto no contêiner principal.
Recomendados pelo LinkedIn
Use este código na propriedade Value da entrada de texto (controle moderno).
Ele exibirá os comentários do registro atual quando o aplicativo baseado em modelo estiver no modo de reprodução, mas não no estúdio.
gblReview.Comments
Assegure-se de que a propriedade Align In Container da entrada de texto seja “Set by Container”. Isso fará com que ele se estique para preencher o espaço disponível.
Criar botões OK e Cancelar para a caixa de diálogo modal
Os botões OK e Cancel do diálogo modal serão colocados abaixo da caixa de comentários.
Crie um novo contêiner horizontal para mantê-los.
Defina a propriedade Justify do contêiner como End e a propriedade Align como Top .
Insira um botão no contêiner horizontal com o texto “OK”.
Use este código na propriedade OnSelect do botão.
Ele salva o texto da caixa de comentários no registro atual e fecha a caixa de diálogo modal usando a função voltar.
Patch(
Reviews,
gblReview,
{Comments: txt_Modal_Description.Value}
);
Back()
Insira outro botão no contêiner horizontal com a palavra “Cancel”.
Use este código na propriedade OnSelect do formulário para fechar a caixa de diálogo modal sem salvar.
Back();
Agora terminamos de criar o aplicativo de tela. Salve e publique o aplicativo. Em seguida, feche o editor de aplicativo de tela.
Adicionar um botão à barra de comandos do formulário principal
Agora que a página customizada do Modal de revisão está concluída, adicionaremos um botão ao formulário orientado a modelo para que um usuário possa abri-lo.
Volte para o editor de aplicativo baseado em modelo e clique nos três pontos ao lado da Tabela de revisão . Escolha Editar Barra de Comandos .
Selecione Formulário principal .
Na edição da barra de comandos, vá para o menu da faixa de opções e escolha Novo > Comando.
Adicionar código JavaScript ao botão para abrir a caixa de diálogo modal
Selecione o botão recém-adicionado no menu central da tela. Dê ao ícone um rótulo chamado “Open Dialog” e escolha um ícone para ele. Em seguida, atualize o menu suspenso Ação para Executar JavaScript e selecione Adicionar biblioteca.
No menu Adicionar biblioteca JavaScript, clique em Novo recurso da web .
Em seguida, o Power Apps navegará para esta tela.
Escreva o código JavaScript para abrir a caixa de diálogo modal
Agora precisamos escrever algum código JavaScript para abrir a página personalizada como um diálogo modal.
Se você ainda não escreveu nenhum código JavaScript, não se preocupe.
Fornecerei a você o código necessário que você pode copiar e colar em um arquivo de texto enquanto faz apenas algumas pequenas alterações.
Copie e cole este código no bloco de notas do Windows e salve-o como um arquivo Javascript (extensão .js).
Você precisará atualizar os parâmetros de nome com o nome lógico de sua própria página personalizada.
function openCustomPageDialog(primaryControl, firstSelectedItemId, selectedEntityTypeName)
{
// Centered Dialog
var pageInput = {
pageType: "custom",
name: "cr5b0_reviewmodal_57388",
entityName: selectedEntityTypeName, // "sample_review"
recordId: firstSelectedItemId // "{087AA308-B321-E811-A845-000D3A33A3AC}"
};
var navigationOptions = {
target: 2,
position: 1,
height: {
value: 260,
unit: "px"
},
width: {
value: 50,
unit: "%"
},
title: "Edit Comments"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function () {
// Refresh the main form when the dialog is closed
primaryControl.data.refresh();
}
).catch (
function (error) {
// Handle error
}
);
}
Obtenha o nome lógico acessando o menu Solutions em make.powerapps.com, vá para Default Solution, escolha a categoria Pages e procure a página. O nome lógico é exibido na coluna Nome.
Salve o arquivo JavaScript e carregue-o no editor da barra de comandos. Clique em salvar e publicar .
Como etapa final, defina os parâmetros do botão de comando conforme mostrado abaixo. Esses valores são passados para a função JavaScript quando o botão Open Dialog é pressionado.
Salve e publique o comando ruim e pressione Play .
Testar a caixa de diálogo modal da página personalizada
É hora de testar nossa caixa de diálogo modal de página personalizada. Abra o aplicativo baseado em modelo no modo de jogo e selecione Comentários. Abra o primeiro registro no aplicativo.
Clique no botão Abrir Caixa de Diálogo .
A caixa de diálogo modal da página personalizada do Power Apps aparece na tela!
Dica:
Você pode também inserir imagens. ate mesmo alterar o formato de sua tela pop-up, assim criando um estilo único para mensagens no seu aplicativo.
Espero que tenham curtido o conteúdo e se gostou mesmo compartilha em sua rede.
(Isso me ajuda a criar mais soluções e conteúdo na plataforma)