Curso de Google Formulários - #08 Formulário Interno (Web Template)
01/10/2020Nessa vídeoaula vamos iniciar o desenvolvimento de um formulário interno a nossa Planilha utilizando um web template com html, css e js.
Web Template com Google Apps Script
Para trabalhar com código na planilha do Google, devemos acessar Ferramentas >> Editor de Scripts
No nosso projeto teremos 03 arquivos:
- server.gs
- form.html
- javascript.html
Para facilitar a estilização do nosso projeto, utilizaremos o framework frontend Bootstrap.
form.html
Abrigará o formulário do nosso sistema.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id='output'></div>
<form id='myForm' onsubmit='process(this)'>
<input type='text' id='name' name='name' placeholder='Nome:'><br>
<input type='text' class='mt-4 mb-4' id='age' name='age' placeholder='Idade:'><br>
<input type='text' id='cpf' name='cpf' placeholder='Cpf:'><br>
<input type='submit' class='btn btn-success' value='Salvar'>
</form>
<?!= include('javascript'); ?>
</body>
</html>server.gs
O arquivo server funcionará como uma espécie de backend embutido no Google Planilhas. As funções do sistema serão inclusas nele.
let app=SpreadsheetApp;
let ui=app.getUi();
let spreadsheet=app.getActiveSpreadsheet();
let sheet=spreadsheet.getSheetByName("Users");
function onOpen(e)
{
ui.createMenu("Operações").addItem("Cadastrar Usuários", "viewUsers").addToUi();
}
//Inclui os arquivos separados
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
//Mostra o formulário para o usuário
function viewUsers(request)
{
var form = HtmlService.createTemplateFromFile('form').evaluate();
ui.showModalDialog(form, "Cadastro de Usuários");
}javascript.html
O arquivo javascript.html recebe os códigos javascript que rodam no frontend.
<script>
console.log('Meu javascript está funcionando!');
</script>Por hoje é só! Sucesso nos códigos e na vida!
Dúvidas? Suporte Premium: webdesignemfoco@gmail.com
Posts Relacionados
