[Power Apps] - Vídeo 1 - Criando Layout da tela inicial

Fala galera Daniel Alves aqui para mais um vídeo Espero que todos estejam bem Neste vídeo nós vamos fazer aqui do zero uma solução tá daquele suporte de sistemas que eu apresentei no vídeo passado teve aí alguns comentários o pessoal pedindo para para mostrar como é feito né então nós vamos replicar ele numa série de vídeos e nessa nessa primeira vídeo aula aqui neste primeiro vídeo nós vamos montar a nossa solução tá para desenvolvimento dessa aplicação e vamos montar aí o layout da tela principal tá teve alguns pedidos aí no canal também de como como eu

faço aí o layout né uma aplicação bacaninha diferenciada Então vou mostrar para vocês nós vamos criar do zero uma solução tá então vou vir aqui em soluções vou criar do zero aqui uma nova solução vai se chamar suporte sistemas diferenciar o fornecedor vou colocar eu poderia criar um novo fornecedor tá um novo editor aqui mas vou selecionar como o defu mesmo tá vou deixar como defu aqui tem mais opções a gente não vai utilizar a configuração de página nenhuma não vai utilizar essas opções tá vou criar ele vai criar para nós aqui uma nova solução

pronto criou a nossa solução suporte de sistemas YouTube e aqui a gente vai empacotar tudo que a gente vai utilizar É nesse caso aqui a gente vai utilizar vou fazer no sharpoint que é mais habitual o uso do sharpoint tá diferente do vídeo que eu mostrei que foi no datavers e inicialmente Por enquanto não vamos utilizar fluxos tá então futuramente talvez a gente implemente aí mais algumas coisas e aí a gente poderia empacotar tudo junto tá então por enquanto nós vamos em aplicativo novo aplicativo tá e nós vamos criar um aplicativo de tela o nome

desse aplicativo também vou deixar Como suporte e eu vou criar criar ele no modelo tablet tá então vou clicar em criar ele tá criando para gente o nosso aplicativo e o nosso aplicativo agora já está criado tá primeira coisa que eu vou que eu vou fazer aqui é nomear a página Então vou nomear essa página aqui como tela home né poderia ser tela inicial aí fica a critério de vocês e aí vamos começar aqui então a criar desenhar o nosso layout a primeira coisa que eu quero fazer que é colocar uma tela de fundo tá

pessoal E como que eu faço isso bom eu vou abrir aqui o meu PowerPoint vocês podem selecionar uma imagem que vocês queiram Tá mas eu vou abrir aqui o meu PowerPoint eu vou vir aqui em design e aqui eu posso escolher um design que eu acho bacana aqui para colocar como como fundo tá Eu gosto bastante desse aqui vou utilizar ele na cor azul vou vir aqui em arquivo salvar como vou procurar o local onde eu quero salvar isso tá eu vou salvar aqui em downloads vou clicar aqui em apresentação e vou selecionar a opção

png e vou salvar ele me pergunta se eu quero salvar todos os slides apenas este então é apenas este tá só quero essa tela ele já salvou eu vou fechar o PowerPoint não vou usar mais ele e agora nós temos já em downloads a imagem pronta só que eu gosto da imagem invertida tá então eu vou aqui no meus downloads downloads vão em editar eu vou simplesmente girar ela para 180 graus e vou dar um salvar então eu inverti a imagem bacana bom feito isso já posso fechar e aqui agora eu tenho duas opções de

inserção tá eu posso inserir aqui pelo mídia ou eu posso simplesmente aqui em preenchimento né Eu clico aqui nessa opção à direita perdão imagens de plano de fundo e vou adicionar uma imagem bom fundo adicionado no ajuste aqui também do lado direito eu vou em preenchimento então preencher toda a tela e o nosso fundo Já tá pronto tá bacana né então vamos inserir agora alguns elementos primeiro elemento que eu vou inserir aqui vai ser um container Então vou inserir um container Na verdade dois containers tá então vou dar um control c control V eu tenho

aqui agora dois containers só que um entrou dentro do outro né na verdade eu não quero quero os dois contêineres na tela inicial então eu tenho aqui dois containers e eu vou ajustar esse container tá então primeiro container ele vai ficar aqui em cima vou ajustar ele mais ou menos na largura que eu quero e o segundo container vai ficar aqui na parte de baixo Então vou pegar o segundo container aqui e vou ajustar ele aqui na parte de baixo vocês podem colocar aí o espaçamento que vocês quiserem tá definida a forma que vocês quiserem

vou selecionar os dois containers aqui só para ganhar tempo vou aqui do lado direito na opção de cor vou colocar o fundo branco agora que nós já temos o fundo branco eu vou aqui em raio de borda vou colocar 15 e sombra Projetada A semi boat tá então nós já temos aqui ó uma carinha Inicial aí para nossa aplicação bom nessa aplicação eu utilizei quatro telas tá então para facilitar um pouquinho aqui e descer um pouquinho essa parte aqui então para facilitar como basicamente todas as telas ele segue meio que o mesmo padrão então já

vou duplicar essa tela quatro vezes Tá eu vou deixar essa tela aqui pronta já para receber os demais bom ainda que em tela de home aqui dentro desse container vou jogar esse container aqui para cima só para ele aqui né na sequência dentro desse container eu vou inserir uma imagem essa imagem eu vou deixar ela aqui na no tamanho Bacana aqui que vai ser a imagem do usuário tá então vou deixar ela aqui no tamanho bacana Ela tá aqui com 43 por 43 vou usar aqui 50 por 50 aqui em raio de borda eu vou

deixar ele como 255 para ficar arredondado e dentro dessa imagem eu vou usar a imagem do usuário então eu vou usar a função ponto image né que é a imagem do usuário logado então nós já temos aqui a imagem do usuário logado é outra coisa que eu vou colocar aqui dentro é uma Label eu vou colocar aqui um rótulo de texto onde vai estar o nome do usuário então aqui vai ser a função laser também e eu vou colocar mais uma Label que eu vou utilizar para pegar a função do usuário né o cargo do

usuário tá vou deixar esse aqui jogar ele um pouquinho mais para frente Vou duplicar essa leibo então control c control v e aqui embaixo eu vou usar um conector do Office 365 Então vamos conectar ele aqui então aqui do lado esquerdo adicionar conexão e eu vou procurar aqui Office 365 tá vamos achar ele aqui Office 365 user aqui estou conectando conectado Eu vou usar essa opção aqui ó é o job Titan se eu não me engano Ah tá pera aí que ele pegou usuários 365 então aqui ele vai pegar a função do usuário cargo do

usuário ali né aqui eu vou deixar como normal né vou deixar ela normal vou colocar ela aqui como 11 para ficar um pouquinho menor e na cor dela aqui embaixo eu vou utilizar ela um pouquinho mais clara tá para dar um pouco menos de destaque vou utilizar mais um rótulo de texto esse rótulo de texto agora eu vou preencher toda a tela centralizar e aqui vai ser o nome do nosso sistema tá então aqui em teste vou abrir aspas e vou colocar o nome suporte de sistemas Vamos aumentar o tamanho da fonte tá vou colocar

ela aqui como 35 e ficar muito grande vocês podem diminuir tá Ficou muito bacana eu quero ele um pouquinho mais para cima então aqui na parte inferior ao invés de cinco vou colocar 15 ainda um pouquinho mais vamos colocar 20 legal e eu posso colocar aqui também né E fica a critério de vocês a versão tá primeiro eu vou clicar aqui com direito vou reordernar e vou enviar para o fundo e agora eu vou copiar essa leibo control ctrl v vou centralizar ela aqui e aqui vocês podem colocar a versão tá então ao invés do

usuário 365 você pode colocar aqui por exemplo versão 1.0.0 E aí assim vai formando o nosso layout aqui dentro nós vamos inserir os botões né porque o usuário possa fazer a navegação entre as telas tá uma coisa que eu acho bem bacana é aqueles botões né são animações onde o botão ali ele vai se mexer e tal fica muito bacana e para a gente fazer isso eu vou inserir mais um container aqui dentro tá eu posso pegar esse próprio container que já tem control c control V ele jogou dentro desse outro container aqui né que

é o container principal Então é isso mesmo que a gente precisa vou diminuir ele no tamanho que eu quero deixar ali o meu meu botão né então esse aqui bem dizer seria o nosso botão e aqui dentro dele nós vamos inserir uma imagem tá então vou inserir aqui uma imagem essa imagem vai ser a imagem do nosso botão tá vai ser aquela aquela imagem animada ali que vai dar aí a vida ao nosso botão e como que eu insiro essa imagem bom tem um site bem bacana que chama que ele tem alguns ícones animados então

a gente pode utilizar esses ícones animados tá então eu vou pegar aqui ó só tirar a busca aqui para ver se ele traz tudo deixou só abrir ele novamente aqui Abril ícones animados e aqui tem vários ícones animados tá isso vocês podem encontrar também em outros sites aí de ícones Eu gosto bastante desses daqui Mas de repente vocês querem aí eu tenho algum outro site que vocês gostam também não tem problema tá suporte de sistemas a gente vai utilizar que vai ser o nosso primeiro Vou colocar aqui para visualizar todos e aqui vocês vão achar

o ícone que melhor se adequo aí para o que vocês precisam tá E aí vocês podem escolher aqui o que vocês acharem mais adequado que ficar melhor aí encaixar melhor na aplicação de vocês tá vou utilizar esse aqui vou colocar em baixar ele tá abrindo tá carregando mas eu já vou clicar em baixar aqui e vou escolher a opção gif tá então esse aqui é gratuito eu consigo baixar ele ó ele tá baixando e ele acabando de fazer o nosso download aqui ó fazendo o nosso download ave inglesa eu já consigo utilizar ele aqui tá

então aquelas duas opções posso inserir ele por aqui tá carregar dois cliques ele carregou e eu posso arrastar ele aqui para dentro tá ele já traz a imagem vou excluir aquela que a gente utilizou E aí aqui vocês escolhem aí o tamanho que vocês querem Tá bom então a gente já tem aqui o nosso ícone animado vou inserir agora um rótulo de texto e aqui vai ser uma Nossa o nosso botão para novo chamado vou colocar ele aqui como vou ajustar ele aqui para ele ficar num tamanho legal O Chamado e Aqui nós temos o

nosso botão tá bom Agora que nós já temos aqui o nosso ícone animado o nosso a nossa lable né Nós vamos criar aqui então o botão que vai fazer esse direcionamento tá então a primeira coisa que eu vou fazer aqui um botão né claro esse botão eu vou preencher a tela toda e vou limpar todos os componentes tá então aqui em texto eu já tiro o texto aqui eu vou tirar o fundo então aqui nas propriedades do lado direito a gente vai tirando aqui tá vou zerar essas três opções aqui também para ficar transparente então

transparente a de baixo vou tirar essa selfie vamos limpar aqui todos tá então vou deixar tudo aquilo que não tiver eu vou deixar como transparente eu vou retirar a função retirado transparente retirado e transparente bom então agora pessoal se eu der o play aqui em cima a gente já tem aqui ó o nosso botão tá vendo eu posso clicar ele não vai mudar de cor não vai fazer nada nós já temos aqui o nosso primeiro botão só que nós vamos ter além desse primeiro botão nós temos mais dois botões né que são para tela de

chamados e a tela já vamos reaproveitar todo esse contêiner aqui ó a gente pode nomear ele aqui como chamado E aí aqui eu vou dar um control c né vou copiar ele controla c control V ele acabou caindo dentro tá tem que tomar esse cuidado quando tá com container Então vou dar um Ctrl x aqui eu quero dentro deste container então control v e control V novamente então eu já tenho aqui Opa novamente ó caiu dentro tá pessoal dentro deste contém então eu tenho aqui agora três botões Então vou colocar eles aqui clicar no container

isto trouxe para cá vou alinhar aqui mais ou menos onde eu quero primeiro e o último para ficar mais ou menos assim não precisa ser perfeito mas mais ou menos com o mesmo espaçamento E aí eu posso vir aqui clicar nos três containers clico com direito e aqui eu distribuo horizontalmente tá então agora aqui ó eu preciso mudar esse aqui não vai ser o btn chamado né ele vai ser não vai ser na verdade um novo chamado né deixou colocar novamente aqui ó esse aqui seria novo chamado chamado esse aqui seria o de chamados tá

então onde a gente vai acompanhar os chamados e esse aqui seria o de Dash e aqui Pessoal vocês podem ordenar eles aqui e deixar eles né na ordem para facilitar até para vocês então Agora ele fica na ordem O primeiro é o chamado o segundo vai ser o de chamados né novo chamado aqui é novo chamado chamados e Dash então nós temos aqui agora os três containers organizados e agora vamos mudar aqui o ícone né E A nomenclatura desses botões Então a primeira coisa que eu vou fazer é achar um novo ícone né para os

chamados poderia colocar aqui ver um livro ver se tem alguma coisa bacana bom eu gosto desse aqui tá já utilizei ele inclusive naquele outro Então vou utilizar ele também e aqui já vou aproveitar e achar um de Dash tá então vou colocar aqui 10 Então já vou aproveitar e também já vou baixar então nós já temos aqui os nossos dois ícones né animados Então vou ver aqui em inserir então novamente carregar vou selecionar estes dois já vou subir os dois abrir e ele já vai carregar para gente aqui os dois tá dessa vez eu não

vou arrastar aqui que ele já tá lá então vou vir aqui em imagem vou substituir tá então esse caso aqui seria o caderno e neste outro aqui seria o nosso gráfico vamos lá então mudar aqui o nome né novo chamado esse aqui passaria ser chamados E este aqui ele vai passar a ser um dashboard então agora já está pronta a nossa tela inicial eu vou fazer o teste renomeando aqui né então vou renomear essa tela aqui para tela de novo vou renomear essa próxima tela de baixo aqui para tela de chamados e essa última tela

aqui para tela de décimos tá então vou colocar aqui como então nós já temos aqui a nossas três telas tá E só para a gente testar eu vou colocar uma Label aqui tá vou inserir uma lei boa aqui só para a gente poder garantir que tá funcionando certinho tá então dentro desse container eu vou inserir no rótulo de texto nesse rótulo de texto eu vou colocar aqui como novo chamado vou aumentar aqui para 25 vou centralizar Vou colocar aqui como semi-neghetto bom então aqui nós já temos um novo chamado vou dar um control c vou

na tela de chamados vou clicar no container então aqui ele seria chamados Então vou colocar chamados já nomeamos novamente tela de 10 por clico no container control v e aqui eu vou colocar o dashboard bom temos as telas prontas e agora vamos colocar o navigate no nosso botão Estamos aqui na tela de home novo chamado no nosso botão na propriedade um célebre ele vai receber um navigates ou seja ele vai navegar para Qual tela que eu quero que ele navegue eu quero que ele navegue aqui para tela de novo chamado certo então vou colocar aqui

que ele vai para tela de novo chamado eu quero que ele tenha uma transição né ele tem um efeito na hora de Navegar que vai ser o efeito eu posso para facilitar vou dar um control c vou vir aqui em chamados na propriedade um select control V só que esse aqui vai para tela de chamados novamente próximo botão tela vamos testar Então vou segurar o áudio aqui tá para ele simular o modo play então quando eu seguro o out ele simula o modo Play cliquei foi para tela de novo chamado vou retornar aqui para home

clico novamente tela de chamados volto para home clico novamente tela de legal então nessa aula que nós vimos aí como montar o nosso layout da tela inicial no próximo vídeo nós vamos fazer aqui algumas funções para para verificar se esse usuário ele pode ir para tela de chamados ele pode ir para tela de dashboard ou não só que para isso nós vamos montar uma estrutura né Nós vamos começar a montar as nossas listas do sharpoint E aí vou trazer para vocês aqui qual vai ser a estrutura que nós vamos montar E aí nós vamos começar

a parte para fórmulas dentro dessa tela Bacana Então espero que vocês tenham gostado se chegou até aqui não esquece aquele like para fortalecer o canal se ainda não for inscrito se inscreve para não perder as novidades do canal e ser avisado quando entrar as novas