Planilhas Google - Formulário HTML de Cadastro de Vendedores - Apps Script - Aula 02

o Olá turma neste vídeo vamos continuar o desenvolvimento do nosso projeto planilhas Google planilha para cadastro de clientes e pedidos se você não acompanhou A aula anterior link na descrição do vídeo beleza pessoal então vamos trabalhar neste vídeo nós vamos colocar os links de referência à biblioteca da materialize que é uma biblioteca que nós vamos utilizar para personalizar o estilo nos nossos formulários pessoal como pode ser um pouco confuso pegar os links diretamente no site da materializem eu vou disponibilizar os links em um arquivo de texto e voz E aí na descrição nós links para

vocês baixar o arquivo de texto no link um vocês vão ser direcionados para esta página onde vocês vão procurar do lado direito na parte superior pelo botão fazer download clica no botão fazer download e aguarda baixar o arquivo de texto Se você não conseguir pelo link um pode tentar o link dois quando você pode copiar os links diretamente na página ou procurar pelo botão fazer download para baixar o arquivo de texto no meu caso deu certo pelo link um Então vamos abrir o arquivo de texto e no arquivo de texto vocês vão encontrar três links

os dois primeiros links vocês vão inserir dentro do ritmo do arquivo forme vendedor e o terceiro link dentro do Bori também do arquivo forme vendedor então selecione em os dois primeiros links Clica com o botão direito copiar e agora vamos para a nossa planilha Google o menu extensões apps script e aguarda abrir o editor de script editor aberto clique no arquivo forme vendedor. HTML e aí dentro do Rio após a função chamar vocês vão colar os dois links uma ajustada estou aqui E aí a beleza colocamos os dois primeiros links mas nós temos mais um

link então selecione o terceiro link botão direito copiar volta no editor e dentro do Body antes da função chamar contra o ver Collen o terceiro link em alteração e já temos os links de referência à biblioteca da materiais este link vai ser utilizado para trabalhar com os ícones imagens ícones no nosso formulário Ok mas eu quero saber de onde que veio estes links eu vou deixar também na descrição do vídeo o link do site da materialize é e se vocês ir no menu começando vocês vão encontrar e os seguintes links nós utilizamos esse link no

hit e este link dentro do Bori e dentro do hit nós utilizamos também um link referente aos ícones que é este link aqui se você tiver curiosidade pode dar uma estudada no site da materialize é Tô voltando para o editor de script agora nós vamos fazer o seguinte renomear este arquivo para macro vendedor renomear macron vendedor não dar confusão quando nós inserir mais arquivos de script tecla Tab ou enter a beleza arquivo renomeado agora no arquivo forma e vendedor. HTML dentro do Body nós vamos colocar uma div que vai conter todos os objetos do nosso

formulário div pessoal são áreas uma área que nós definimos dentro do nosso formulário então menor div e eu vou colocar um e de que é a identificação desta div e de vai ser igual abre e" duplas eu vou chamar essa tarde VIP de divi o objetos e fora das aspas duplas Clécia Clécia já colocou o pessoal igual e as aspas duplas automaticamente mas eu vou digitar para não passar muito rápido no vídeo igual e abre e" duplas e dentro das "duplas vocês vão colocar voo que é uma classe na biblioteca materiais e ó fechei com

maior e agora é preciso fechar essa div antes do link que nós colocamos no final do Bori então menor fora fecho a div com maior Beleza agora para ficar visível nós vamos fazer o seguinte colocar um acordo preenchimento nesta difícil peguem o idade vem de Ver objetos contra você e vamos no arquivo estilo forme vendedor e dentro Style vocês vão colocar o jogo da velha tecla shift e o número 3 está ali o jogo da velha a cola o idade vem e abre e fecha Chaves vamos com calma pessoal um vídeo bem light e dentro

das chaves vocês vão fazer o seguinte comando posición position: positivos vai ser Absolut abson deixa eu ver como é que se digita bem certinho a BS Absolut Absolution; E aí eu vou colocar uma cor de preenchimento nesta difícil que é o black background background background traço color: eu vou colocar em amarelo que é o Yellow hein em que; um e se não ficar pessoal em azul o comando que vocês colocaram é porque digitaram errado e aí eu vou definir a largura deve tá difícil comando Edit abril e de TH: eu vou colocar 485 pixels peixes;

e a altura desta div vai ser o comando regedit ght Reis ght: eu vou colocar 260 pixels; o e uma distância do Topo comando top nós pontos zero pixels; e da esquerda left: 15 pixels e; Beleza definimos o estilo da div objetos só vem alteração e vamos testar executando nosso formulário E olha que jogo já temos uma área definida dentro do nosso formulário Então dentro desta área desta caixa que é Advil objetos nós vamos colocar todos os objetos do nosso formulário de cadastro de vendedores é um objeto lista e dois Campos de texto e prosseguindo

vamos fazer o seguinte ainda brincar um pouco mais com o estilo desta div depois pessoal que estiver tudo ok nós vamos retirar a cor de preenchimento nós colocamos esta cor em amarelo apenas para ficar visível no formulário agora eu vou colocar uma linha ao redor desta div então depois do background vocês vão colocar o comando border border: um pixel de largura para linha e vai ser uma linha só Leite só Leite #e aí vocês vão colocar 80 80 80 e é; Coelho em pessoal que não pode esquecer os ponto e, após cada comando um salve

a alteração e vamos ver como que ficou a nossa div objetos e olha que show pessoal já tenho uma linha ao redor da dif a beleza Este comando border podem comentar com duas baixo agora dentro da div objetos nós vamos criar outra div que é outra área uma div para fazer o nosso objeto lista suspensa então menor menor diver e de vai ser igual abre e" duplas e eu vou chamar essa tá difícil pedir vi lista o Fashion com maior e precisamos fechar esta div menor/gif e fecha com maior e pegue o ID da cidade

ver contra você e vai no arquivo estilo após a nossa div objetos nós vamos fazer o seguinte da velha contra o guede lista e abre e fecha Chaves e aí dentro da div lista nós vamos colocar os seguintes comandos podemos fazer o seguinte copiar estas duas linhas contra você contra ao ver até vou deixar assim trocar a cor de preenchimento agora eu vou colocar Blue é que é azul pessoal Este comando Absolut ele especifica que eu quero que a div seja posicionada é exatamente onde eu defini depois do Bacurau Onde vocês vão colocar top: zero

pixels; left: também Zero pixels., Deixa eu subir para facilitar a visualização E aí podemos copiar Este comando Switch que já largura vai ser a mesma largura da div principal o comando regedit podemos copiar também mas alterar a largura altura no caso o rei que altura Witch largura pode Violeta eu vou colocar 40 pixels de altura salve salve a alteração e vamos ver vamos brincando com as divs E olha que show pessoal dentro da div objetos eu criei mais uma área mais uma caixa que é Advil lista e dentro desta de Violetta na próxima aula nós

vamos inserir um objeto select que é utilizado para criar listas suspensas em HTML select contendo as options que são as opções de seleção pessoal para não ficar um vídeo muito extenso vamos finalizar essa vídeo-aula por aqui galera estão gostando do projeto deixem o like no vídeo se inscreva no canal comenta aí no e compartilhem E ajudem na divulgação do projeto que vai ser um projeto que vai demandar muito trabalho para fazer o passo a passo isso aí galera e até uma próxima aula