Pegar Valor do input HTML com Google App Script

Michel_Hazuky · Setembro 15, 2020, 6:05pm

Bom dia !

Estou desenvolvendo um webApp com google app script, preciso pesquisar o valor digitado em um input e retornar a escala do funcionario, os dados vem de uma planilha google, ja consigo subir os dados para a pagina, mas consigo exibir os dados de acordo com o registro digitado no input.

Usando o ArrayLib 2d, consegui fazer o filtro funcionar, quando coloco o valor manual direto na função, ele puxa apenas a escala do registro que eu coloquei na função, agora a pergunta é, como pego o valor do input da pagina HTML e como ele como uma variavel dentro da minha função google script ?

ou se tiver um jeito melhor de pesquisar na base de dados sem precisar fazer essa gambiarra, ainda estou aprendendo programação e não sei muita coisa, mas gostaria de terminar este projeto, se alguem puder ajudar agradeço muito

PAGINA HTML

<!doctype html>
<html lang="pt-BR">

<head>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Escala</title>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body class="w-auto p-3">

<br>

<div class="text-center">
<h3>ESCALA PROVISÓRIA</h3>
<h5 class="text-danger">Somente para motoristas da base 3</h5>
</div>

<br>

<form class="form-inline row d-flex justify-content-center" >

<div >
<input  type="number" class="form-control input-lg border-primary" id="inputChapa" placeholder="Digite a sua chapa">
</div>

<div style="padding-left: 5px;">
<button id="btnConsultar" type="button" class="btn btn-primary" >Consultar</button>
</div>
</form>

<br>

<div class="container">

<table class="table table-hover border" id="tableEscala1"  >

<thead>
<tr>
<th class="bg-primary text-white text-center" scope="col" colspan="2">1ª TABELA DA ESCALA</th>
</tr>
</thead>

<tbody id ="tab1">
<tr>
<th scope="row">CHAPA</th>
<td id="chapa1">123</td>
</tr>
<tr>
<th scope="row">LINHA</th>
<td id="linha1"></td>
</tr>

<tr>
<th scope="row">CARRO</th>
<td id="prefixo1"></td>
</tr>

<tr>
<th scope="row">TABELA</th>
<td id="tabela1"></td>
</tr>

<tr>
<th scope="row">ENTRADA</th>
<td id="entrada1"></td>
</tr>

<tr>
<th scope="row">SAÍDA</th>
<td id="saida1"></td>
</tr>

<tr>
<th scope="row">LOCAL</th>
<td id="local1"></td>
</tr>

<tr>
<th scope="row">JORNADA</th>
<td id="jornada1"></td>
</tr>

</tbody>

</table>
</div>


<div class="container">

<table style="display: none;" class="table table-hover border" id="tableEscala2"  >

<thead>
<tr>
<th class="bg-primary text-white text-center" scope="col" colspan="2">2ª TABELA DA ESCALA</th>
</tr>
</thead>

<tbody id ="tab2">
<tr>
<th scope="row">CHAPA</th>
<td id="chapa2">123</td>
</tr>
<tr>
<th scope="row">LINHA</th>
<td id="linha2"></td>
</tr>

<tr>
<th scope="row">CARRO</th>
<td id="prefixo2"></td>
</tr>

<tr>
<th scope="row">TABELA</th>
<td id="tabela2"></td>
</tr>

<tr>
<th scope="row">ENTRADA</th>
<td id="entrada2"></td>
</tr>

<tr>
<th scope="row">SAÍDA</th>
<td id="saida2"></td>
</tr>

<tr>
<th scope="row">LOCAL</th>
<td id="local2"></td>
</tr>

<tr>
<th scope="row">JORNADA</th>
<td id="jornada2"></td>
</tr>

</tbody>

</table>
</div>


<div class="container">

<table style="display: none;" class="table table-hover border" id="tableEscala3"  >

<thead>
<tr>
<th class="bg-primary text-white text-center" scope="col" colspan="2">1ª TABELA DA ESCALA</th>
</tr>
</thead>

<tbody id ="tab3">
<tr>
<th scope="row">CHAPA</th>
<td id="chapa3">123</td>
</tr>
<tr>
<th scope="row">LINHA</th>
<td id="linha3"></td>
</tr>

<tr>
<th scope="row">CARRO</th>
<td id="prefixo3"></td>
</tr>

<tr>
<th scope="row">TABELA</th>
<td id="tabela3"></td>
</tr>

<tr>
<th scope="row">ENTRADA</th>
<td id="entrada3"></td>
</tr>

<tr>
<th scope="row">SAÍDA</th>
<td id="saida3"></td>
</tr>

<tr>
<th scope="row">LOCAL</th>
<td id="local3"></td>
</tr>

<tr>
<th scope="row">JORNADA</th>
<td id="jornada3"></td>
</tr>

</tbody>

</table>
</div>

<?!= chamar("javascript")?>

<script>


function tabela1(){
google.script.run.withSuccessHandler(gerarTabela1).dadosTabela1();
};

function gerarTabela1(carregar){

carregar.forEach(function(r){
var col2 = document.getElementById("linha1");
col2.textContent = r [1];
var col3 = document.getElementById("prefixo1");
col3.textContent = r [2];
var col4 = document.getElementById("tabela1");
col4.textContent = r [3];
var col5 = document.getElementById("entrada1");
col5.textContent = r [4];
var col6 = document.getElementById("saida1");
col6.textContent = r [5];
var col7 = document.getElementById("local1");
col7.textContent = r [6];
var col8 = document.getElementById("jornada1");
col8.textContent = r [7];

});
};


function tabela2(){
google.script.run.withSuccessHandler(gerarTabela2).dadosTabela2();
};

function gerarTabela2(carregar){

carregar.forEach(function(r){
var col2 = document.getElementById("linha2");
col2.textContent = r [1];
var col3 = document.getElementById("prefixo2");
col3.textContent = r [2];
var col4 = document.getElementById("tabela2");
col4.textContent = r [3];
var col5 = document.getElementById("entrada2");
col5.textContent = r [4];
var col6 = document.getElementById("saida2");
col6.textContent = r [5];
var col7 = document.getElementById("local2");
col7.textContent = r [6];
var col8 = document.getElementById("jornada2");
col8.textContent = r [7];

});
};

function tabela3(){
google.script.run.withSuccessHandler(gerarTabela3).dadosTabela3();
};

function gerarTabela3(carregar){

carregar.forEach(function(r){
var col2 = document.getElementById("linha3");
col2.textContent = r [1];
var col3 = document.getElementById("prefixo3");
col3.textContent = r [2];
var col4 = document.getElementById("tabela3");
col4.textContent = r [3];
var col5 = document.getElementById("entrada3");
col5.textContent = r [4];
var col6 = document.getElementById("saida3");
col6.textContent = r [5];
var col7 = document.getElementById("local3");
col7.textContent = r [6];
var col8 = document.getElementById("jornada3");
col8.textContent = r [7];

});
};


document.getElementById("btnConsultar").addEventListener("click",consultou);
document.getElementById("btnConsultar").addEventListener("click",tabela1);
document.getElementById("btnConsultar").addEventListener("click",tabela2);
document.getElementById("btnConsultar").addEventListener("click",tabela3);


function consultou(){

var chapa = document.getElementById("inputChapa").value;
if (chapa.trim().length == 0) {

swal("POR FAVOR DIGITE A SUA CHAPA","","warning")

}else if (chapa.trim().length <= 4) {

swal("CHAPA INVÁLIDA","VERIFIQUE A CHAPA E TENTE NOVAMENTE","error")

}else{

google.script.run.consultouEscala(chapa);
google.script.run.dadosTabela1(chapa);
document.getElementById("inputChapa").value = "";
document.getElementById('tableEscala1').style.display = '';
document.getElementById('tableEscala2').style.display = '';



if (document.getElementById('linha3').value != undefined){
document.getElementById('tableEscala3').style.display = '';

};
};
};


</script>

</body>

</html>

CÓDIGOS GOOGLE SCRIPT

// LINK DA PLANILHA AQUI
var url = "https://docs.google.com/spreadsheets/d/1ndlVPCOB_3aQOCTcXEhqMsBa7OHgGTGPnE6YqXjK9rs/edit#gid=238126249"

function doGet() {
  return HtmlService.createTemplateFromFile('pagina').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setTitle('Escala Web App')
  .setFaviconUrl("https://i.imgur.com/cHW3Fpa.png")
};


function chamar(arquivo){
  return HtmlService.createHtmlOutputFromFile(arquivo).getContent();
};

function dadosTabela1() {
  
  var planilha = SpreadsheetApp.openByUrl(url);
  var guia = planilha.getSheetByName("DADOS");
  
  guia.getRange('A:I').activate();
  guia.getActiveRangeList().setNumberFormat('@');
  
 
  var dados = guia.getRange(2,1,guia.getLastRow()-1,9).getValues();

//var valor do input da pagina HTML aqui = " valor do input"

  var dados2 = ArrayLib.filterByValue(dados,0,"valor do input aqui dentro");


  return dados2;
  
};


function dadosTabela2() {
  
  var planilha = SpreadsheetApp.openByUrl(url);
  var guia = planilha.getSheetByName("DADOS");
  
  guia.getRange('K:R').activate();
  guia.getActiveRangeList().setNumberFormat('@');
  
  var dados = guia.getRange(2,11,guia.getLastRow()-1,18).getValues();
  
  return dados;
  Logger.log(dados)
};

function dadosTabela3() {
  
  var planilha = SpreadsheetApp.openByUrl(url);
  var guia = planilha.getSheetByName("DADOS");
  
  guia.getRange('T:AA').activate();
  guia.getActiveRangeList().setNumberFormat('@');
  
  var dados = guia.getRange(2,20,guia.getLastRow()-1,27).getValues();
  
  return dados;
 
};


function consultouEscala(chapaConfirmada){
  
  var ss = SpreadsheetApp.openByUrl(url);
  var ws2 = ss.getSheetByName("CONFIRMOU").getRange('A1').activate()
  .getNextDataCell(SpreadsheetApp.Direction.DOWN).offset(1,0)
  .setValue(chapaConfirmada).offset(0,1).setValue([new Date()]);
  
};

Pegar Valor do input HTML com Google App Script

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI