[Aula 05] Power Apps - Personalizar a tela e os componentes do APP

[Música] Olá seja bem-vindo a mais uma aula do meu canal de vídeos no YouTube Meu nome é Alessandro trovato e essa é a quinta aula sobre o Power apps o Power apps como você tem visto é uma aplicação muito simples para criar apps para dispositivos móveis seja seu celular ou seja seu tablet nessa aula nós vamos falar sobre a adaptação do nosso aplicativo de três telas que utiliza o Excel como fonte de dados Você viu que a parte de criação dele é bem simples criar o aplicativo em si é um processo bem leve bem tranquilo

agora nós precisamos personalizá-lo O que nós vamos fazer com esse aplicativo é trabalhar nas três telas que foram criadas depois nós vamos criar uma tela principal para acesso e vamos fazer a publicação e o compartilhamento desse app Isso vai ser feito em várias aulas então esteja preparado aí para acompanhar pelas próximas semanas esse curso antes de mais mais nada não se esqueça se inscreva no canal curta e compartilhe esse vídeo em suas redes sociais quanto mais Pessoas souberem como utilizar o powerapps mais fácil será o uso dessa aplicação nos ambientes corporativos vamos lá já estou

com o ambiente do powerapps carregado para acessar o nosso aplicação a nossa aplicação você deve clicar em aplicativos e na lista que será exibida de todos os seus aplicativos você pode passar o mouse sobre o nome da sua aplicação para editar Você vai clicar nesse ícone a tela do Power apps vai mudar e a partir de agora podemos fazer a alteração do nosso app vamos aguardar a carga do aplicativo assim que ele for carregado clique em ignorar e agora vamos olhar a nossa primeira tela Vamos pensar primeiro nessa primeira tela onde eu vou passar algumas

informações importantes a você primeiro todo objeto que está dentro da página ou da tela é personalizável na parte de baixo da tela você tem tem um controle deslizante para o zoom onde você pode ver mais detalhes da página esse ícone específico ele Ajusta a página às vezes fica muito pequena para trabalharmos Então vamos aumentar um pouco e vamos observar alguns controles principais que nós temos inseridos aqui para saber a quantidade total de controles que nós temos nessa página basta olhar à esquerda no Nossa janela de exibição de árvore Aqui nós temos o browse screen que

é o nome da nossa tela é o nome padrão dela é a tela de listagem dos dados depois nós temos o brows Gallery quando você clica sobre um objeto à esquerda ele é selecionado na tela e você vai ver que o browser Gallery é todo esse controle que exibe os registros se expandirmos a lista do browser Gallery a cada item que você clicar você vai observar alguns objetos também colocados dentro da primeira área nós vamos falar do browser Gallery já já você você também tem retângulos veja só search icon text box então nós temos uma

série de controles que são colocados na nossa página que podem ser personalizados e a minha primeira dica é sempre mantenha atualizada a tela o nome dos seus componentes dentro das suas telas para facilitar a sua identificação Como nessa nossa aplicação nós temos três telas essa tela de listagem ou essa tela de de consulta você vai nomeá-la então recolhendo os itens da primeira tela clique nas reticências escolha o comando renomear e nós vamos chamá-la de TL abreviação para tela underline consulta enter não se preocupe pois todos os objetos que fazem referência a ele na sua aplicação

serão renomeados automaticamente você não precisa se preocupar em fazer isso manualmente a tela de detalhes você vai clicar sobre ela se clicar com o botão direito Também vai encontrar a opção renomear podemos renomear para TL underline essa tela aqui é a tela de detalhes então DD botão direito renomear TL detalhes e por fim a última botão direito renomear TL edição nós já temos os nossos nomes de telas aqui se você vai utilizar o Power apps em múltiplos idiomas então se você vai ter equipes trabalhando com múltiplos idiomas então você não precisa pra colocar os acentos

até onde eu fiz os testes não há nenhum problema de colocação dos acentos para aplicações que rodam no Android e rodam aqui na minha organização se você tiver qualquer problema lembre-se você tem a opção de tirar os assentos e trabalhar com todos os seus eh todos os seus controles sem esses assentos vamos voltar pra tela de consulta então anote aí como boa prática Inicial renomear os objetos que você vai utilizar Quando estamos na tela de de consulta nossaa tela principal temos alguns objetos que podemos trabalhar dentro do Power apps vamos começar pensando aqui no brows

Gallery browse Gallery é um componente chamado de galeria que faz a leitura e faz a visualização dos registros a browser Gallery ela tem uma característica muito importante esse primeiro controle ou esse primeiro Card que aparece aqui na parte superior ele é o principal as alterações que fazemos aqui neste it repercutem em todos os outros da lista tanto que você não consegue clicar no segundo elemento você só consegue fazer as adaptações a partir do primeiro elemento como nós estamos ainda fazendo o processo de renomear nós não vamos nos preocupar com isso agora você vai clicar sobre

o brows Gallery botão direito renomear vamos chamar de galeria uma dica podemos ter Galerias em outras telas também normalmente eu faço a identificação de que tela que ela está está então TL underline consulta dessa forma se eu tiver browsers galleries ou Galerias em outras páginas eu sei que cada uma delas vai ter um nome diferente se nós chamarmos apenas de galeria e numa outra tela chamarmos de galeria também nós vamos ter problema dois componentes não pode ter o mesmo nome no power apps Isso é uma regra esse retângulo Ele está aqui do lado esquerdo ele

está fazendo a divisão do registro veja só quando clicamos aqui do lado é essa marca azul que aparece então eu posso simplesmente renomear esse objeto clicando sobre ele e pressionando a tecla F2 também eu vou colocar as iniciais R de retângulo underline e vou colocar aqui o nome lateral se você sabe que tem retângulos em outras páginas você também coloca o complemento para facilitar Eu sempre deixo essa terminação na memória comtrol C deixo ela colada na minha área de transferência pois assim eu posso nomear tranquilamente e colar essa terminação dos meus controles separador é esse

elemento que separam os meus registros veja que ele está dentro da minha primeira opção então ele é um separador como é um objeto de forma também veja só é outro retângulo eu vou colocar aqui Hat under separador E aí vou colar o nome da tela next Arrow é até a seta que mostra o próximo registro ou abrir o registro PR edição ele é do tipo ícone então sempre consulte do lado direito da sua tela que tipo de objeto que você está trabalhando aqui eu vou renomar para icon que é um ícone e vou colocar aqui

detalhe da minha tela de consulta bar é esse controle que está exibindo o meu nome ele é um rótulo de texto ele serve para exibir textos cuja propriedade pode ser alterada para exibição dos dados que vem do nosso banco de dados então o bu nada mais é do que um rótulo ou um Label em inglês eu gosto de usar a sigla lbl para demonstrar um rótulo de texto lbl under nome só que nós vamos fazer algumas alterações aqui nesse nosso registro por enquanto nós vamos deixar esses controles sem sem renomear retângulo veja que ele tem

aqui uma propriedade na parte superior da tela que é um retângulo é outro objeto gráfico então retângulo under superior da minha tela de search ion É um ícone de busca Então vou renomear para I busca e vou colocar o nome da tela text search é a caixa de texto veja só entrada de texto eu vou renome para Tex under filtro da tela de consulta o ícone na parte superior para adicionar o novo registro vou renomear para Ico adicionar da tela de consult outro Icone da classificação vou renomear para Ico underline classifica da tela de consulta

refresh para atualizar os registros vai ser também o meu ícone então F2 I underline atualiza da tela de consulta lbl app name Então veja que ele já tem aqui o nome lbl para o meu rótulo do nome da tela eu vou trocar para lbl under nome tela da tela de consulta e por fim esse retângulo de fundo que faz a parte de cabeçário eu vou renomeável de consulta fica mais fácil por exemplo referenciar esses objetos caso precisemos usando seus nomes começando com o tipo dele o nome dele e a tela que ele faz parte a

antes de continuarmos um detalhe importante quando nós estamos trabalhando com uma galeria ao adicionar os campos do nosso do nosso controle Observe que nós temos um layout para ele título subtítulo e corpo você pode alterar à vontade esse layout quando você faz a escolha de um layout a lista de Campos ela pode ser manipulada então nós temos aqui o título subtítulo e o corpo dos dados Você pode trocar os campos clicando na caixa de controle escolhendo Qual é o elemento que você quer exibir nós temos alguns layouts nós temos algumas coisas que você pode alterar

e algumas propriedades que você pode adaptar nesse caso específico O que nós vamos fazer nós vamos adaptar os controles manualmente alterando as suas propriedades eu gostaria que no primeiro elemento desta minha caixa da galeria aparecesse o nome da pessoa então vou aumentar o zoom ótimo com o controle selecionado Note que a propriedade text dele está com a palavra dis item dis item refere-se a uma ao registro que está sendo lido atualmente do nosso banco de dados então Aqui nós temos o registro e ele está trazendo o campo de e-mail quando Na verdade eu queria o

campo nome completo clicando neste campo de e-mail você vai apagar esse ponto meio vai digitar um ponto novamente ele vai mostrar os campos que nós temos lá no Nosa fonte de dados eu quero o nome completo você vai ver que ele já vai alterar agora podemos aumentar o tamanho colocando 16 18 para dar um destaque no nome da pessoa que está sendo trazida do meu banco de dados depois na parte de baixo a idade veja que o campo está certinho eu vou trazer o e-mail na parte de baixo da tela então no campo idade eu

gostaria de colocar uma observação antes da idade você vai colocar aspas vai digitar idade dois pontos e vai concatenar com o campo item né ponto idade se você observar nós conseguimos mudar a propriedade a palavra idade exibida por fim na parte de baixo nós vamos fazer o mesmo só para eil propriedade Tex nós vamos digitar eil dois pontos e vamos concatenar com item que é o nosso registro que está vindo da fonte de dados P nome completo não não ponto e meio que é o campo que eu quero quando nós terminarmos já é possível visualizar

a mudança da nossa tela e a mudança que nós fazemos na parte superior se reflete as outras partes também um exemplo nós vamos pegar aqui o campo de meio e vamos arrastar um pouco mais para baixo você vai ver que ele vai afastar também a idade ao invés de colocar na linha de baixo podemos fazer uma alteração Veja só eu vou reduzir o tamanho dessa caixa pois ela não vai aumentar muito mais de tamanho e eu posso arrastar esse campo pela minha tela usando o mesmo alinhamento do nome Vou colocar aqui no final à direita

as linhas que aparecem de guia servem para que eu possa ter um limite dos controles se eu clicar nesta seta você vai ver a borda dela e a idade está Justamente na borda você pode alinhar o texto a direita no painel de propriedades escolhendo alinhamento de texto ao clicar no nome alinhamento de texto do seu painel você verá a propriedade align então nós temos uma propriedade aline. write que permite que você faça ou a escolha do componente no painel ou você pode vir até aqui e digitar Aline ponto e fazer por exemplo left para ir

para a esquerda você pode usar o Center para centralizar ou ainda o right para a direita você pode mudar as propriedades também por aqui consegu mudar então vou fechar um pouquinho mais o tamanho ou altura dessa nossa caixa agora quando nós olharmos para o campo de nome você vai ver que ele está se sobrepondo à idade eu não quero que isso aconteça então eu vou reduzir o campo do nome dessa forma nossos controles não vão se sobrepor e o e-mail está aqui se você quiser utilizar um ícone alguma coisa alguma representação dentro da sua caixa

você pode também se precisar fazer ajustes finos na altura lembre-se uma as propriedades é altura você pode definir manualmente a propriedade aqui no painel lateral para inserir um ícone aqui dentro lembre-se selecione primeiro objeto clique em inserir vamos escolher agora na parte de baixo ícones e podemos visualizar os ícones que nós queremos se você quiser pesquisar por exemplo vamos lá meil ele vai mostrar o ícone de um e-mail clicando sobre ele esse ícone vai vai ser adicionado dentro da caixa se você tentar arrastar para fora não vai conseguir porque esse objeto foi incorporado à sua

galeria e Conforme você faz as alterações ele também faz isso na parte de baixo ao invés de escrever e-mail por exemplo poderíamos utilizar essa propriedade esse ícone para isso vamos fazer alguns ajustes Primeiro vamos puxar o e-mail pra direita vamos reduzir o desenho do e-mail Você vai arrastá-lo para a tela para o inferior esquerdo e vai trazer o e-mail e a linha de E essas linhas de auxílio linhas de grade vão ajudar você a fazer o alinhamento vou deixar alinhado o centro e pressionando uma setinha pra direita eu consigo afastá-la Então eu já tenho veja

só uma linha para o meu nome um e-mail e o desenho um ícone de e-mail e a idade como é um campo descritivo vai aparecer aqui cuja altura vou mover também para 20 toda alteração feita na primeira caixa reflete nas anteriores então no nome eu posso ainda aumentar um pouco mais vamos colocar aqui para 18 e você pode colocar em você pode mudar as suas características também no painel aqui à direita se você observar quando eu cliquei no nome a palavra espessura da fonte está bloqueada pois ela tem uma fórmula clicando nessa fórmula você vai

ver uma instrução if e aqui está uma característica do Power Apps quando nós trabalhamos com o Power FX as instruções são colocadas nos componentes para poder fazer o tratamento então aqui por que que ele está em na propriedade fonte White e aqui ele está dizendo se esse item estiver selecionado ou seja se nós clicarmos nesse controle ele vai deixar semibold senão ele volta ao normal na linha de baixo Você está vendo que não estamos selecionando esse registro por isso ele não está em então ele sempre vai colocar em aquele item que está selecionado se você

quiser que ele fique em somente o nome nenhum outro componente é só você alterar essa propriedade apagando essa fórmula você pode colocar aqui false e ele vai tirar opa ele colocou aqui problemas então false ele não aceita Então vamos deixar em branco pronto tiramos o a mesma coisa com a idade vou clicar no campo eu não quero que a a fonte fique em Então nós vamos colocar aqui fonte White normal ao invés de deixar em branco podemos usar a propriedade fonte White né Não sei a pronúncia correta como normal somente o nome vai ficar em

então eu poderia trocar isso também e ao invés de deixar com if simplesmente escolher a fonte semibold ou se você quiser a fonte bold é só digitar o ponto e você vai ver as quatro propriedades da fonte nesse caso bold para então todos os nomes aparecerão com destaque legal então fizemos a alteração do nosso Card eu posso agora fechar um pouquinho mais selecionando os dois controles com a tecla shift posso fechar a altura desse meu cartão clicando sobre ele posso diminuir para caber mais registros na minha tela se você quiser um divisor uma linha divisão

de registros você pode usá-la usar técnica também lembra que nós tínhamos um retângulo o retângulo da parte superior quando você clica na janela esquerda você seleciona esse objeto se você procurar a propriedade Y dele vai ver que a propriedade Y é uma fórmula Você poderia por exemplo apagar tudo isso e colocar a propriedade 100 ele vai deixar esse controle sem pontos e para baixo veja só ele deslocou na nossa caixa Ok então eu posso pegar esse controle vamos dar aqui um control Z vamos trazer a nossa caixa eu acabei acho que mudando também o nosso

item de busca vamos lá Pronto ele tá lá em cima o y dele está lá no topo agora veio para a posição normal esse retângulo ele está fora da nossa galeria Então veja que ele é um objeto da tela o que eu poderia fazer seria duplicá-lo comtrol ctrl v e arrastá-lo para fazer a divisão só que como ele está fora da tela ele não replicar automaticamente o jeito mais fácil então seria Criar e inserir um novo retângulo só que lembre-se clique sempre no objeto para você selecionar a primeira galeria inserir nós vamos inserir agora um

retângulo e esse retângulo ele está dentro da minha galeria nós vamos mudar a sua propriedade por exemplo a altura um ele vai virar apenas uma linha você pode agora arrastá-lo para baixo e fazer a divisão arrastando ele até o final Vamos colocar aqui a altura dele é um posição você pode aumentar X é a distância à esquerda Y é a distância do Topo eu vou aumentar aqui para 90 e vamos ver se ele vai ficar bem sim ficou na divisão e a posição eu vou colocar zer para que ele comece do início aumentando diminuindo a

altura novamente Nós criamos uma divisão entre os nossos registros já que estamos fazendo alteração na tela nós vamos clicar na parte superior e ao invés do nome da nossa tabela a propriedade texto dela será alterada aqui é a nossa tela de consulta Então vamos lá consulta participantes ou podemos simplesmente chamar de participantes pois como nós vamos fazer uma lista dos participantes aqui de um evento de uma palestra Essa é a tela que permite que eu consulte todos eles vou deixar como participantes se nós adicionarmos mais registros na nossa aplicação então eu vou clicar para visualizar

o meu aplicativo você vai ver que nós já temos dois eu vou adicionar agora mais um aplicativo chamado de Márcia Rodrigues 51 e-mail Marcia provato @gmail.com agora que que nós vamos fazer é gravar esse registro e você vai perceber que ela vai ser adicionada a minha lista de participantes também seguindo as mesmas características da minha estrutura Toda vez que você fizer uma adição de registros ele vai fazer parte da sua galeria e eu posso dizer a você que ainda tem muitas coisas que podemos mudar por exemplo colocar uma cor de preen colocar uma cor de

preenchimento do fundo da caixa do rótulo então tem muita coisa que você pode utilizar e agora sim como nós já estamos com os controles certos Você vai clicar à esquerda na exibição de árvore o bar aqui nesse caso é um rótulo eu vou renome para lbl under eil da tela de consulta depois a idade V renomear para idade da tela de consulta e por fim o nome completo vai ser lbl nome TL consulta com isso você já tem subsídios para fazer a alteração da próxima tela Então faça um teste antes da próxima aula você vai

clicar na sua tela de detalhes e você vai fazer alguns algumas mudanças vai renomear os controles da tela de detalhes e da tela de edição farei isso na próxima aula porque nós vamos fazer a alteração da nossa tela de detalhes para que possamos mudar um pouco as suas características na tela de consulta você já tem então subsídios suficientes para poder fazer a adaptação do seu código mesmo esse ícone se você quiser puxá-lo para direita fazer a diminuição dele qualquer outra opção que você quiser é possível simplesmente manipulando o objeto na tela CRL Z funciona nesta

área e você vai perceber que é fácil fazer essas alterações retângulo veja como nós lançamos um retângulo novo você deve também renome não se esqueça retângulo inferior da tela de consulta repasse sempre os seus objetos não deixe nenhum sem renomear ícone de e-mail da tela de consulta como boa prática isso com certeza vai ser muito útil para você no futuro próxima fase apenas uma dica para nós podermos concluir salve a sua dela sempre que você fizer as alterações Para Não perdê-las e você tem aqui Um item na parte superior da barra de ferramentas em que

você pode mudar o tema sem ter que ficar se preocupando manualmente com a mudança das cores nas reticências da barra de ferramentas Você vai clicar em tema e aqui você tem vários temas diferentes Observe que o tema Azul está selecionado você pode por exemplo escolher o tema aço onde ele vai colocar uma cor de preenchimento de fundo ele vai mudar as cores as cores dos seus componentes depois você pode mudar algumas características caso deseje você tem temas bem discretos você tem temas bem e fortes como por exemplo esse Floresta veja que a tela fica escura

e na parte superior na cor verde e os seus objetos você pode mudar cor e pode ajustar de acordo com o tema também para voltar ao padrão só clicar e mudar novamente que ele adapta todo o seu sistema para o padrão que você escolheu faça esses testes mude o tema e você vai ver como sua aplicação já vai começar a ficar melhor Apesar de querer já fazer a aplicação completa com você para ganharmos tempo é muito difícil fazer uma aula de 1 hora de duração por exemplo e manter a sua audiência e também a sua

atenção nesse caso eu vou fazer as aulas separadas para que você possa incorporar alguns dos recursos do Power apps gradativamente essa aula vai ficar com quase 25 minutos é o suficiente para você entender como fazer a adaptação de uma tela nós não vamos voltar com tantos detalhes assim nem aulas futuras porque você já vai ter esse conhecimento então na próxima aula nós vamos fazer a adaptação das outras duas telas renomear os seus controles e você vai aprender também como adaptar a nossa tela de consulta Espero que tenha gostado dessa aula não se esqueça curta esse

vídeo compartilhe esse vídeo e deixe nos comentários O que você achou E o que você está achando do curso nas próximas aulas tem muito mais grande abraço os estudos e a gente se vê nas próximas aulas tchau [Risadas] [Música] tchau