Aula 12 Power Apps -Criar tela inicial e funções do Power FX

Aula 12 Power Apps -Criar tela inicial e funções do Power FX Olá seja bem-vindo a mais uma aula do meu canal de vídeos no YouTube Meu nome é Alessandro trovato e na aula de hoje nós vamos dar sequência à criação do nosso App no power apps para utilizar os.

Aula 12 Power Apps -Criar tela inicial e funções do Power FX

Dados lá do sharepoint você viu na nossa última aula como fazer a criação do nosso app lendo os dados da nossa lista do sharepoint não sei se você se recorda mas eu comentei que eu ia mostrar também.

Como fazer para apagar um conector que está em desuso Então nós vamos trabalhar com esses dois conceitos hoje nessa aula vamos criar uma página inicial e na sequência vamos Verificar como apagar.

Esse conector que não é mais utilizado Vamos então clicar sobre o nosso aplicativo dois produtos nós vamos editar o nosso app nós vamos começar renomeando as.

Nossas telas você vai aguardar também um pouco até que o Power apps consiga carregar todo o aplicativo e a estrutura do aplicativo de três telas que nós cada vamos clicar em ignorar na mensagem de.

Boas-vindas e nós temos já três telas que foram criadas A primeira é chamada de browse screen nós vamos renomear clicando nas reticências e escolha renomear e chame-a de TL under consulta.

Enter depois nós temos ainda mais duas telas a de detalhes Então você vai clicar sobre essa segunda tela vamos renomear para TL underline detalhes a próxima tela é a tela de.

Edição clicando nas reticências vamos renomear essa tela para TL underline edição agora nós vamos criar a nossa nova tela na parte superior desta janela do modo de exibição de árvore há um.

Botão chamado nova tela clicando sobre ele podemos escolher uma Entre várias formas diferentes de ter a apresentação dos dados na tela nós vamos escolher em branco você vai ver que a screen 1 foi.

Criada com uma tela totalmente em branco nós vamos colocar essa tela na parte superior clicando nas reticências clicando em mover para cima uma duas três vezes até que ela fique no.

Topo agora podemos mudar a sua propriedade de nome para TL under Inicial essa tela inicial vai ter um diferencial então se você já viu a criação da tela e vai pular essa aula.

Espere um pouquinho pois nós vamos utilizar um contexto diferente de navegação entre telas ao Navegar da tela inicial para a tela de consulta eu vou criar uma variável que vai ser.

Veja Mais Aqui:

    $ads={1}

    Transferida entre essas telas Um item

    Que você ainda não viu agora que nós já temos essas informações podemos clicar sobre a tela inicial clicando sobre o balde de.

    Preenchimento à direita nós vamos escolher um tom escuro da cor eu vou escolher por exemplo esse tom de azul ou até um pouco mais escuro aqui na parte de baixo nós temos.

    Diversos outros tons então eu vou escolher esse do meu modelo que é o mais escuro nós vamos começar inserindo os nossos controles na parte superior da tela na barra de ferramentas clique em.

    Inserir vamos começar inserindo um rótulo de texto e esse rótulo de texto vai mostrar o nome do usuário como fizemos anteriormente você vai redimensioná-la para ocupar toda a.

    Largura da sua tela do app na parte superior nós vamos trocar esse nome para lbl under texto ou melhor nome usuário under TL under ini pois esse é uma Label né um.

    Label para a tela inicial nas propriedades esse campo vai apresentar um texto nós vamos a cor desse texto para que ele Apresente a cor em branco para dar contraste com o.

    Fundo vamos reduzir um pouco altura dessa caixa de texto e aqui na propriedade text nós vamos mudar essa propriedade vamos escrever Olá vírgula e vamos concatenar esse texto com user P.

    Full name a propriedade que exibe o nome do usuário vamos concatenar isso também com uma exclamação no final do nome podemos colocar esse texto em Itálico e agora podemos Inserir a nossa.

    Imagem vamos puxar um pouco mais para baixo vou clicar em inserir e usando a categoria mídia nós vamos adicionar uma imagem primeira coisa que vamos fazer é redefinir o raio da borda para 180 para.

    Que ela fique

    Redonda e podemos agora adicionar a nossa imagem na parte superior da tela você está vendo a palavra sample image para a propriedade image nós vamos então.

    Trocar isso vamos escrever user abrir e fechar parênteses pon image que é a propriedade de imagem do usuário mantendo a tecla shift pressionada vou.

    Reduzir e agora nós vamos fazer então o uso dessa imagem junto da nossa borda detalhe vamos inverter a cor do texto vamos o texto na cor azul da tela de fundo e o preenchimento na cor branca.

    Assim haverá um destaque na nossa imagem nós vamos definir a nossa borda como sendo de quatro pontos na cor branca Você já fez essa propriedade.

    Essas mudanças em outros aplicativos então fica mais fácil de fazer isso nós vamos mudar aquela propriedade pading left dessa caixa de texto.

    O nosso controle a propriedade para pad left você vai perceber que ele está com tamanho fixo de C nós vamos utilizar como propriedade a nossa imagem como nós não trocamos o nome da imagem ainda você.

    Vai clicar sobre ela e ela vai se chamar IMG usuário TL ini que é tela inicial agora eu consigo fazer o uso deste texto vou até copiar esse texto do nome da.

    Imagem por padrão a imagem some não deveria mas nesse caso você pode alternar para a próxima tela e quando fizermos atualização da tela inicial a imagem vai aparecer.

    Novamente agora você pode clicar na sua caixa de texto e na propriedade pading left nós vamos trocar esse número cinco colocando o nome da imagem ponto e vamos usar a sua propriedade.

    Winded Observe que o texto já foi deslocado para a direita mas não suficiente por isso nós vamos somar a esse valor a propriedade x que é a distância da margem esquerda até onde.

    Começa a imagem Você está vendo que agora o texto começa exatamente no alinhamento da margem vou colocar uma margem de segurança aqui de cinco pontos e o meu texto vai se vai se descolar da.

    Imagem clicando em qualquer ponto da tela você pode agora arrastar a imagem tranquilamente que o texto não vai sobre poola vamos subir um pouco mais nós vamos colocar uma caixa de.

    Texto aqui no centro inserir um rótulo de texto esse rótulo de texto vai ser na cor branca que vai ser o nome da nossa aplicação mude a propriedade de cor para branco e já podemos também mudar o.

    Alinhamento para Centralizado e o tamanho da fonte vamos usar um tamanho maior 35 por exemplo 40 vamos Vamos ver como vai ficar depois que nós digitarmos.

    Controle com tudo maiúsculo de produtos Vamos aumentar a altura e você está vendo que eu posso aumentar mais eu vou trazer aqui como 45 o tamanho da fonte e vou mudar a fonte para uma fonte.

    Mais light vou selecionar lato Light se você quiser aumentar o distanciamento entre as palavras há uma que podemos alterar que é justamente a altura da Linha que está como.

    1,2 Se colocarmos como 2 você vai ver que ele vai aumentar bastante o espaçamento entre elas eu acredito que dois esteja bom vamos colocar um ícone aqui no nosso aplicativo esse ícone está.

    Na nossa biblioteca de ícone se chama fabricar Você vai clicar em inserir na sequência nós vamos selecionar o campo ícones a categoria ícones ele se chama fabricar então.

    Rolando um pouco a tela nós vamos encontrar esse ícone é um braço robótico nós vamos arrastar esse braço robótico para a tela e para facilitar a sua visualização vamos converter a sua.

    Cor que é a mesma cor da fonte para branco agora eu posso ajustar o meu espaçamento correto do título e o ícone faltando apenas o botão para adicionar o botão nós vamos.

    Ccar aqui em inserir nós vamos trazer também na lista um botão e o botão ele já está aqui como Popular clicando em botão vamos.

    Arrastá-lo para a parte de baixo da tela vamos centralizar no grupo no texto você vai colocar iniciar e quando alteramos a propriedade no painel também influenciamos a.

    Propriedade que está aqui são os mesmos e não importa o local você pode alterar ou na barra de fórmulas ou ainda no painel lateral com o botão selecionado podemos.

    Agora digitar a propriedade on select e Aqui vai um comando totalmente novo eu só vou preencher esse botão com a cor branca então clicando sobre ele ao invés de azul vou preencher com a cor.

    Branca e o texto do botão com o tom de azul da tela padronizando agora vem a parte que eu comentei no começo da aula nós Vamos padronizar esse nome de um jeito que nós.

    Não fizemos ainda anteriormente ao clicar sobre iniciar e selecionar a propriedade on select nós vamos digitar o comando navegate até aqui nenhuma.

    Novidade no comando navegate nó precisamos passar como primeiro argumentoa que nós vamos que vai cons ponto e víg e nós vamos usar uma transição de tela com o screen.

    Transition do tipo Fade ponto e vírgula nós temos um terceiro argumento chamado de contexto quando você estiver trabalhando com telas no seu aplicativo do Power apps é.

    Possível passar valores de uma tela para outra e eu vou fazer isso utilizando a instrução notify lá na tela de destino pressionando shift enter eu vou para a.

    AVISO LEGAL: Toda a responsabilidade do conteúdo deste vídeo transcrito é do produtor do canal.
    CLique no Link do Vídeo: https://www.youtube.com/watch?v=RENUoErC8lc

Wesdigital

Postar um comentário

Postagem Anterior Próxima Postagem