Curso Google Sheets com HTML e JS - Aula-04 Colocando Barra de progresso
Caso esse conteúdo serviu pra vc e queira me ajudar meu pix sorteagora12@gmail.com
caso você queira também pode me ajudar a criar mais conteúdo assinando meu blog com uma contribuição mensal de qualquer valor.
Fala Pessoal.
Segue abaixo scripts usados na Aula 04
como colocar barra de progresso
Script para abrir HTML
Script Para Cadastrar
Script Para Buscar Clientes
E o HTML com seus scripts.
var Plan = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1rIKZc_977MJoNDPrVVB_Jbz32mzeCOTJQx5JDvPCZCc/edit#gid=0").getSheetByName("clientes");
var Linha = Plan.getLastRow();
//Script para abrir HTML
function Abrir_Form_Curso() {
var Form =HtmlService.createTemplateFromFile("FORM_CURSO");
var mostrarform = Form.evaluate();
mostrarform.setTitle("Clientes").setHeight(1400).setWidth(1400);
SpreadsheetApp.getUi().showModalDialog(mostrarform,"Clientes")
//SpreadsheetApp.getUi().showSidebar(mostrarform)
//SpreadsheetApp.getUi().showModelessDialog(mostrarform,"Clientes")
}
//Script Para Cadastrar
function CadastrarClientes(Dados){
var Plan = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1rIKZc_977MJoNDPrVVB_Jbz32mzeCOTJQx5JDvPCZCc/edit#gid=0").getSheetByName("clientes");
var Linha = Plan.getLastRow()+1;
Plan.getRange(Linha,1).setValue(Linha);
Plan.getRange(Linha,2).setValue([Dados.Nome]);
Plan.getRange(Linha,3).setValue([Dados.CPF]);
Plan.getRange(Linha,4).setValue([Dados.Telefone]);
Plan.getRange(Linha,5).setValue([Dados.CEP]);
return [Dados.Nome]
}e seus
//Script Para Buscar Clientes
function PegarClientes(){
var Matriz = []
Matriz= Plan.getRange("A2:E"+Linha).getValues();
var Str = Matriz.join("#");
return Str
}
HTML e SEUS scripts
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="PrencherTabela()">
<div class="progress" style="visibility:hidden" id="progresso">
<div class="indeterminate"></div>
</div>
<div class="row">
<div class="input-field col s3">
<input id="nome" type="text" class="validate">
<label for="nome">Nome</label>
</div>
<div class="input-field col s3">
<input id="cpf" type="text" class="validate">
<label for="cpf">CPF</label>
</div>
<div class="input-field col s3">
<input id="telefone" type="text" class="validate">
<label for="telefone">Telefone</label>
</div>
<div class="input-field col s3">
<input id="cep" type="text" class="validate">
<label for="cep">CEP</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" name="action" onclick="Cadastrar()">Salvar
<i class="material-icons right">send</i>
</button>
</div>
<div class="row">
<table id="tb01">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>CPF</th>
<th>Telefone</th>
<th>CEP</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// CADASTRO
function Cadastrar(){
MostraProgresso();
var Nome = document.getElementById("nome").value;
var CPF = document.getElementById("cpf").value;
var Telefone=document.getElementById("telefone").value;
var CEP =document.getElementById("cep").value;
var Dados ={
Nome:Nome,
CPF:CPF,
Telefone:Telefone,
CEP:CEP
}
google.script.run.withSuccessHandler(Retorno).CadastrarClientes(Dados);
}
function Retorno(R){
PrencherTabela();
alert(R + " Cadastrado com sucesso");
LimparCampos();
EsconderProgresso();
}
// PREENCHIMENTO DE TABELA
function PrencherTabela(){
MostraProgresso()
LimparTabela();
google.script.run.withSuccessHandler(RetornoTabela).PegarClientes();
}
function RetornoTabela(R){
var Matriz = R.split("#");
Matriz = Matriz.map(function(r){ return r.split(",")});
console.table(Matriz);
var Tabela = document.getElementById("tb01")
for(var i = 0; i< Matriz.length;i++){
var Linha = Tabela.insertRow(Tabela.rows.length);
for(var j = 0; j < Matriz[i].length;j++){
var Cell = Linha.insertCell(j);
Cell.innerHTML = Matriz[i][j];
}
}
EsconderProgresso()
}
// LIMPAR TABELA
function LimparTabela(){
var Tabela = document.getElementById("tb01");
while(Tabela.rows.length>1){
Tabela.deleteRow(1);
}
}
function MostraProgresso(){
var Barprogress = document.getElementById("progresso")
Barprogress.style="visibility:visible";
}
function EsconderProgresso(){
var Barprogress = document.getElementById("progresso")
Barprogress.style="visibility:hidden";
}
// limpar campos
function LimparCampos(){
var Nome = document.getElementById("nome")
var CPF = document.getElementById("cpf")
var Telefone=document.getElementById("telefone")
var CEP =document.getElementById("cep")
Nome.value=""
CPF.value=""
Telefone.value=""
CEP.value=""
}
</script>
</body>
</html>
Comentários
Postar um comentário