Tela do Power Apps: como criar um aplicativo do zero

Neste tutorial, mostrarei como começar a partir de uma tela em branco do Power Apps e criar um aplicativo do zero.

Como este tutorial é destinado a usuários do Power Apps que estão no nível intermediário, presumo que você já saiba o que são telas, galerias e cartões de dados. Até agora, você também deve saber como alterar suas propriedades e quais são os gatilhos. Ter esse conhecimento ajudará você a trabalhar com este tutorial facilmente.

Nos tutoriais anteriores sobre Power Apps , sempre comecei com um modelo existente em que tudo foi bem definido. Desta vez, vamos começar do zero.

Índice

• Iniciando uma tela em branco do Power Apps
• Criando uma tela mestre na tela do Power Apps
• Trabalhando na Documentação
• Fazendo referência à tela de documentação
• Conclusão

Iniciando uma tela em branco do Power Apps

Para criar uma tela em branco, clique em Novo na faixa de opções Arquivo. Em seguida, vá para Aplicativo em branco. Vamos fazer um layout de tablet para este aplicativo.

A vantagem de um layout de tablet é que ele também fica bem nas telas do navegador da web e no seu computador. Nem todas as organizações usam telefones celulares ou tablets no trabalho que realizam. Em vez disso, eles apenas usam aplicativos da web. O layout do tablet seria mais conveniente para eles.

É assim que a tela em branco se parece.

Antes de começar a usar o aplicativo em si, salve-o primeiro para garantir que você não perca nada se algo der errado. Você pode fazer isso clicando em Salvar como na faixa de opções Arquivo. Para este aplicativo, vou salvá-lo na nuvem para não ter que me preocupar em recuperar meus arquivos se algo de errado acontecer com meu dispositivo.

Vou nomear este FirstCanvasApp. Clique em Salvar na parte inferior direita para salvar seu trabalho.

Criando uma tela mestre na tela do Power Apps

Se há uma maneira de tornar o trabalho com uma tela em branco do Power Apps mais eficiente, é começar com uma tela mestre.

Uma tela mestre serve como um modelo base no qual todas as telas do seu aplicativo serão baseadas. Isso permite que você crie um aplicativo que mantém uma aparência uniforme por toda parte.

Vamos usar a Screen1 aqui como nossa tela principal. Basta clicar no menu do lado direito para renomear a tela.

Chamaremos isso de MasterScreen.

Agora, vamos pensar sobre como queremos ser. Lembre-se de que, como esta é a tela principal, todas as outras páginas ficarão assim.

Podemos começar com um título no topo. Portanto, clique em Ícones na faixa de opções Inserir e escolha Retângulo.

Vamos usar este retângulo como um banner onde nosso título será colocado. Inicialmente, ele sairá como uma forma pequena.

Então é só arrastar os marcadores nas laterais e cantos até cobrir totalmente a parte superior da tela.

Em seguida, vamos adicionar o texto. Ainda na faixa de opções Inserir, clique em Texto e escolha Rótulo.

Isso abrirá uma pequena caixa de texto.

Assim como fizemos com o retângulo, vamos esticar esta caixa de texto até cobrir a área superior.

Em seguida, na barra de fórmulas, digitarei “Título da tela” e pressionarei Enter. Observe que o conteúdo da caixa de texto também muda quando faço isso.

Vamos torná-lo muito maior também, para torná-lo mais visível. Posso alterar o tamanho da fonte aqui na faixa de opções Início.

Deixe-me alterar o formato também e defini-lo como Negrito.

Em seguida, alterarei o alinhamento e o definirei como Centro.

Portanto, é assim que todas as telas do aplicativo serão exibidas.

Trabalhando na Documentação

Agora que temos uma tela mestra, vamos criar também uma tela de Documentação. A tela de documentação servirá como uma tela de referência onde poderão ser encontrados todos os elementos a serem utilizados ao longo do app.

Na faixa de opções Início, basta clicar em Nova tela e escolher Em branco.

Então, vamos renomear esta tela para Documentação.

Lembra como usamos um retângulo na tela principal? Vamos criar um igualzinho aqui na tela de documentação.

Desta vez, quero fazer uma cor diferente. Para fazer isso, preciso alterar a propriedade Preenchimento da forma. Isso pode ser encontrado aqui no menu suspenso no lado esquerdo.

Observe que na barra de fórmulas está mostrando as propriedades de cor RGBA para a cor azul, que é a cor atual do retângulo.

E se eu quiser mudar para amarelo? Eu realmente não preciso saber as propriedades RGBA para isso. Basta digitar a palavra Amarelo e automaticamente mostrará as diferentes opções de cores disponíveis.

Vamos escolher verde amarelo. Observe que, depois de escolher uma cor, ela também mostra as propriedades RGBA ao mesmo tempo em que altera a cor da forma.

Fazendo referência à tela de documentação

Aqui é onde vemos o valor da tela de documentação.

Como gostamos mais dessa cor, vamos voltar à tela principal e alterar a cor do retângulo sob o título. Assim que escolhermos o retângulo na tela direita, basta escolher Preencher no menu suspenso.

Observe que, em vez de digitar verde-amarelo como fizemos anteriormente, só precisei digitar Rectangle2. Preencher. Isso referencia automaticamente o que fizemos para o elemento Rectangle2, que se encontra na tela de documentação. Em seguida, copia o mesmo elemento que criamos na tela de documentação.

Então imagine ter até 8 telas ou mais em seu aplicativo. Isso significa que, se decidirmos alterar as propriedades de qualquer um dos elementos que aparecem em todas as telas, não precisamos alterá-los um por um. Só precisamos alterar a tela de documentação e todo o resto se seguirá.

Digamos que um gerente diga para você mudar a cor para vermelho porque não gosta de verde-amarelo. Agora, você só precisa voltar ao Rectangle e alterá-lo para vermelho.

Isso mudará automaticamente todos os outros retângulos que fazem referência a isso em seu aplicativo.

Introdução ao Power Apps: Definição, recursos, funções e importância
Ambientes do Power Apps: Configurando os elementos do aplicativo corretamente
Funções e fórmulas do PowerApps | Uma introdução

Conclusão

Trabalhar com uma tela em branco do Power Apps nos mostra ainda mais a flexibilidade dessa plataforma. A facilidade de uso realmente nos permite criar aplicativos poderosos que se alinham com nossos temas e marcas.

Contanto que você comece com essas duas telas principais - a tela mestre e a tela de documentação - você pode criar aplicativos com facilidade sem se preocupar com trabalho repetitivo ao pular de uma tela para outra.

Tudo de bom,

henrique