Formulário Google Planilhas para Salvar Mais de Um Registro por Vez - Parte 01

Formulário Google Planilhas para Salvar Mais de Um Registro por Vez - Parte 01 Nesta aula Vamos fazer um formulário para salvar mais de um registro para a planilha Google primeiro nós vamos acrescentar os registros em uma tabela no formulário e depois salvar todos os registros da tabela para a planilha Google detalhe este formulário pode ser utilizado por muit usuários beleza pessoal.

Formulário Google Planilhas para Salvar Mais de Um Registro por Vez - Parte 01

Entendido o tema da nossa aula então vamos para outra planilha fazer o formulário Eu já coloquei uma guia menu e uma guia chamada dados na minha planilha Google prosseguindo acessem o menu ex funções apps script e aguarda abrir o editor de script editor aberto clic em sobre projeto sem título eu vou renomear.

Para macros renomear próximo passo é inserir os arquivos necessários para a programação do formulário então clica em sobre adicionar um arquivo arquivo HTML e este arquivo nós vamos chamar de forme e pressiona a tecla enter ou Tab novamente adicionar um arquivo arquivo HTML e este arquivo vai ser o arquivo.

Estilo for e pressiona a tecla enter ou Tab podem apagar estes códigos padrão e vocês vão colocar menor comando Style maior para fechar o Style menor barra Style e fecha com o maior novamente adicionar um arquivo.

Arquivo HTML e este vai ser o nosso arquivo for tro JS e pressiona a tecla enter ou Tab apaga os códigos padrão e vocês vão colocar menor script maior para fechar o script menor barra script e fecha com maior e o arquivo des.

Script nós já temos nós vamos mover este arquivo código PGS para o final então clica nos três pontos do lado direito Mover para baixo novamente Mover para baixo mais uma vez mover arquivo para baixo e eu vou renomear este arquivo para macros macros form e pressiona a.

Tecla enter ou Tab e este my function eu vou trocar por um nome mais familiar eu vou chamar Esta função de forme e dentro desta function vai os códigos responsáveis pela exibição do formulário bar form vai ser igual HTML service ponto Create template from.

File abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e fecha a linha de código com ponto e vírgula e dentro das aspas duplas vai o nome do arquivo HTML primeiro arquivo que nós inserimos arquivo for. HTML renomear copia o nome do arquivo e cola.

Dentro das aspas duplas prosseguindo Precisamos de uma variável para mostrar o formulário bar eu vou chamar esta variável de mostrar forme vai ser igual a variável form P evaluate abre e fecha parênteses e fora dos parênteses pon set sandbox mode abre e fecha parênteses e dentro dos.

Parênteses HTML Service sandbox mode pon eame e fecha a linha de código com ponto e vírgula podem copiar a variável mostrar forme e agora nós vamos colocar um título no nosso formulário e também definir a altura e a largura variável mostrar forme pon set.

Title abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai o texto do título eu vou colocar formulário fora dos parênteses ponto set rate para definir a altura abre e fecha parênteses e dentro dos pares 500.

Pi fora dos pares set wid para definir a largura abre e fecha parênteses e dentro dos parênteses 1000 piels e fecha a linha de código com ponto e vírgula próximo passo é exibir o formulário utilizando o comando spreed app pgy abre e fecha parênteses e fora dos parênteses ponto show mod.

Veja Também:

    Dialog abre e fecha parênteses e dentro dos parênteses vai a nossa variável

    Mostrar for copia e cola vírgula precisamos repetir o texto do título podem copiar o título do formulário e colar depois da vírgula e fecha a linha de código com ponto e vírgula e agora nós precisamos fazer uma.

    Função para conectar os arquivos de programação function eu vou chamar Esta função de chamar abre e fecha parênteses e dentro dos parênteses nós vamos ter uma variável que eu vou chamar de arquivo fora dos parênteses abre e fecha Chaves e pressiona enter e dentro desta função return HTML.

    Service P create HTML outp F abre e fecha parênteses e dentro dos parênteses vai a variável arquivo podem copiar e colar fora dos parênteses pon get content abre e fecha parênteses e fecha a linha de código com ponto e vírgula.

    Fizemos a função chamar agora nós precisamos conectar os arquivos for. HTML estilo for. HTML e o arquivo forme JS HTML Então agora vocês vão acessar o arquivo forme P html e depois da linha de código base target top vocês vão fazer o.

    Seguinte menor ponto de interrogação ponto de exclamação igual e aí vem o nome da função chamar para não restar dúvida eu vou copiar o nome da função copia volta no código e cola depois do sinal de igual abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai.

    O nome do arquivo de estilo renomear copia o nome o arquivo e cola dentro das aspas duplas fora dos parênteses ponto de interrogação e fecha com o maior para o arquivo forme traço JS podemos reaproveitar esta linha de código copia e vocês vão colar antes de fechar o BO que é o corpo do formulário arquivo forme traço JS.

    Renomear copia o nome do arquivo e cola dentro das aspas duplas desta forma nós conectamos estes três arquivos de programação para o arquivo macros.gs nós vamos utilizar uma API do Google salva as alterações e agora nós vamos colocar um botão de comando na planilha para exibir o formulário então acessem a planilha.

    Google menu inserir opção desenho e aguarda abrir a janela de desenho na sequência menu forma formas eu gosto de pegar o retângulo redimensiona para o tamanho que você deseja Clica com o botão direito do mouse sobre o objeto editar texto eu vou.

    Colocar o título como sendo formulário vou aumentar um pouco a largura objeto selecionado cor de preenchimento pode ser este Roxo mas eu quero em cor do texto em branco e Centralizado coloquei o botão de comando salvar e fechar coloca Onde você deseja na.

    Planilha volta no editor arquivo macros for PG

    E vocês vão copiar o nome da primeira função função for somente o nome sem copiar os parênteses copia o nome da função volta na planilha Google e bem do lado direito do botão de comando clica nos três pontos transferir script Cola a função e.

    Ok próximo passo é permitir os scripts clica no botão de comando que vai aparecer uma mensagem de autorização Ok detalhe pessoal estejam logados somente em uma conta do Google Drive seleciona a conta a avançado e clica sobre acessar macros.

    Que é o nome que eu coloquei no projeto permitir e aguarda concluir a autorização liberado os scripts clicando no botão de comando precisa exibir o formulário show de bola pessoal a parte estrutural do nosso formulário já está OK agora galera nós vamos fazer o seguinte colocar um cabeçalho no nosso formulário podem fechar o formulário.

    Volta no editor vocês vão acessar o arquivo for. HTML e dentro das tags B nós vamos inserir uma div Deixa eu subir um pouco para facilitar a visualização dentro do B para colocar um objeto div menor div ID igual e abre e fecha aspas duplas eu vou.

    Chamar esta div de div C cáo fora das aspas duplas maior abrimos a div precisamos fechar então menor barra div e fecha com o maior colocamos a div próximo passo é definir o estilo desta div podem copiar o ID da div E agora vocês vão acessar o arquivo estiloe P html.

    E dentro das tags Style jogo da velha e cola o ID da div e abre e fecha Chaves e pressiona enter e dentro das chaves comando position dois pontos Absolute e fecha a linha de código com ponto e vírgula na sequência eu vou colocar uma cor de preenchimento então comando back.

    Background background traço color dois pontos espaço e aí vocês vão colocar jogo da velha número 8 b8b esta ição da cor roxa em HTML e fecha a linha de código com ponto e.

    Vírgula próximo passo é definir a largura desta dif então comando widt w dth dois pontos eu vou colocar 100% da largura do formulário e fecho a linha de código com ponto e vírgula eu preciso definir também a altura da div cabeçal Comando re cuidem pessoal que agora no final é.

    HT dois pontos espaço 70 piels ponto e vírgula distância do topo dois pontos zero Pixel ponto e vírgula distância da esquerda comando left dois pontos também Zero Pixel ponto e vírgula propriedade Z traço index dois pontos 100 isto significa que.

    Esta div vai ficar na frente de até sem objetos no meu formulário e fecho a linha de código com ponto e vírgula definido o estilo da div cabecalho agora pessoal nós vamos colocar uma cor de preenchimento no corpo do formulário então na tag Body vocês vão.

    Colocar um ID ID igual e abre e fecha as as duplas eu vou chamar de corpo podem copiar o ID do corpo do formulário e acessar o arquivo estiloe P HTML coloca um jogo da velha contra v e abre e fecha as chaves e dentro das chaves cor de preenchimento background.

    Traço Color dois pontos espaço jogo da velha e vocês vão colocar vai ser add add 8 e 6 e fecha a linha de código com ponto e vírgula Isto é pessoal uma variação da cor azul salva as alterações e e vamos.

    Testar colocamos alguns objetos e já testamos para ver se está tudo ok show de bola pessoal cabeçalho do formulário já tem a div agora eu vou colocar dentro do cabeçalho alguns objetos vai ser objetos Label e objeto input que são objetos de Tex fecha o formulário volta no editor arquivo for..

    HTML dentro da div cabecalho agora eu vou inserir um objeto Label então menor objeto Label ID igual e abre e fecha aspas duplas eu vou chamar esta Label de Lab linha fora das aspas duplas maior e aí vem o capt da Label no meu caso vai ser linha para fechar a Label menor barra la e fecha com maior próximo passo é definir o estilo.

    Desta Label podem copiar o ID e acessar o arquivo estilo forme Deixa eu subir para facilitar a visualização coloca um jogo da velha contra v e abre e fecha Chaves e pressiona enter e dentro das chaves comando position dois pontos Absolute ponto e vírgula cor do texto comando do color.

    Dois pontos espaço jogo da velha e vocês vão colocar seis FS 1 2 3 4 5 6 Esta é a definição da cor branca e fecho a linha de código com ponto e vírgula e eu quero o texto em então comando fonte traço w e i g HT w dois pontos espaço comando BOL e fecha.

    A linha de código com ponto e vírgula distância do Topo 2 pontos 5 pi ponto e vírgula distância da esquerda comando left dois pontos e pon e vírgula definido o estilo da Label linha agora nós vamos inserir um objeto input então acessem o arquivo for..

    HTML depois da leinha menor objeto input ID iG e abre e fecha aspas duplas eu vou chamar este objeto de linha fora das aspas duplas comando Type igual e abre e fecha aspas duplas e este vai ser um campo de texto comando.

    Tex fora das aspas duplas fecha com maior colocamos o objeto precisamos definir o estilo podem copiar o ID copia o id e acessa o arquivo de estilo coloca o jogo da velha contol v e abre e fecha Chaves Deixa eu subir um pouco mais que melhora a visualização e dentro das chaves comando.

    Position dois pontos Absolute e ponto e vírgula largura comando wid 2 pont 200 piels ponto e vírgula altura comando he dois pontos 19 piels ponto e vírgula distância do topo 2 pontos 25 pixels ponto e vírgula distância da esquerda comando.

    Left 2is pontos C pixels ponto e vírgula definimos o estilo do campo de texto salva as alterações e vamos testar para ver se está tudo ok formulário executado show de bola já tenho os dois primeiros objetos eu vou inserir mais dois Campos de texto e duas.

    Label podem fechar o formulário volta no editor arquivo for. HTML para facilitar podem copiar estas duas linhas de código copia e cola e no meu caso esta Label eu vou chamar de Label marca e o capton vai ser marca e o objeto input eu vou chamar de marca podem copiar o ID da Label e agora.

    Precisamos definir o estilo da Lab copia o id e acessa o arquivo estilo forme coloca o jogo da velha cont control v e abre e fecha chaves para facilitar nós podemos reaproveitar os códigos da lainha copia os códigos e cola na Label Marc position Ok cor do texto Ok em.

    Distância do Topo também ok mas a distância da esquerda agora vai ser 300 pixels arquivo for. HTML objeto input marca copia o ID volta no estilo coloca o jogo da velha contra o v e a abre e fecha Chaves e também podemos reaproveitar códigos mas agora do objeto.

    Linha copia os códigos e cola no objeto marca Absolute Ok largura continua igual altura também distância do Topo também distância da esquerda agora vai ser 220 pixels beleza colocamos mais dois objetos eu vou colocar mais uma Label e mais um campo de texto no meu.

    Formulário copia as linhas de córtico da Label Marc e do objeto input marca e cola e agora vai ser Label Label produto e o capt da Label vai ser produto e o objeto input eu vou chamar de produto coloquei os objetos Agora eu preciso definir o estilo de cada.

    Objeto copia o ID da Lab e acessa o arquivo forme coloca o jogo da velha contol v e abre e fecha Chaves e para facilitar podem copiar os códigos da Label mar copia e cola dentro da Label produto position Ok cor do texto em branco e distância do Topo iG Mas a distância da esquerda agora vai ser 520.

    Piels volta no arquivo form e pega o ID do objeto input arquivo estilo coloca o jogo da velha cont v e abre e fecha Chaves e pressiona enter e podem copiar os os códigos do objeto marca copia e cola no objeto produto position Ok largura vou deixar a mesma altura também distância do Topo.

    Está certo distância da esquerda agora vai ser 435 pixels salva as e vamos testar para ver se todos os objetos estão posicionados corretamente show de bola pessoal já tenho três Label e três Campos de texto.

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

Postar um comentário

Postagem Anterior Próxima Postagem