1
I’m kind of new at programming in HTML, CSS and scripts in general. I understand almost the basics of the operation and I am trying to organize the receipt of documents in my Department, had done everything in Access but unfortunately not all machines have Office package and the deployment was totally a disaster, trying to get around this, I switched to Google Sheets as it has a good market rating.
The initial idea was to fill out a form and insert everything in a spreadsheet so that later I could work with the data inserted in this spreadsheet.
Therefore, I created an HTML form that allows to be applied inside the google sheets by means of script and buttons, clicking on the button we have the activation of the function Formdpgt:
function FormDPGT() {
// Declaração de vars
var Form = HtmlService.createTemplateFromFile("cadprocesso");
var MostrarForm = Form.evaluate();
// Cria e exibe o formulário de Cad. Processo (620x850)
MostrarForm.setTitle("Cadastro de Tramite Processual").setHeight(620).setWidth(850);
SpreadsheetApp.getUi().showModalDialog(MostrarForm, "Cadastro de Tramite Processual");
}And the responsible party for the HTML form is this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script> $(document).ready(function() {$('select').material_select();}); </script>
<script language="JavaScript">
function mascara(t, mask){
var i = t.value.length;
var saida = mask.substring(1,0);
var texto = mask.substring(i);
if (texto.substring(0,1) != saida){ t.value += texto.substring(0,1); }
}
</script>
<subtitle>Inserção de tramite de processos analisados pelos técnicos do DPGT.</subtitle><br><br>
</head>
<body>
<style type="text/css">
html{overflow-y:auto; overflow-x:hidden;}
</style>
<div class="conteiner">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="nprocesso" type="text" autocomplete="off" required>
<label for="nprocesso">Nº do Processo</label>
</div>
<div class="input-field col s6">
<input id="interessado" type="text" required>
<label for="interessado">Interessado</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input onkeypress="mascara(this, '##/##/####')" id="data_recebimento" type="text" placeholder="Ex.: dd/mm/aaaa" maxlength="10" autocomplete="off" required>
<label for="data_recebimento">Data de recebimento</label>
<span class="helper-text" data-error="wrong" data-success="right">Data de recebimento do processo no DMOP</span>
</div>
<div class="input-field col s6">
<input onkeypress="mascara(this, '##/##/####')" id="data_analise" type="text" placeholder="Ex.: dd/mm/aaaa" maxlength="10" autocomplete="off" required>
<label for="data_analise">Data de início da pré-análise</label>
<span class="helper-text" data-error="wrong" data-success="right">Data de início da pré-análise pelo técn.</span>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select id="analista" required>
<option value="" disabled selected>Responsável pela análise</option>
<option value="1">Décio Henrique</option>
<option value="2">Fernanda Moreira</option>
<option value="3">José Liberato</option>
<option value="4">Joseleno dos Santos</option>
</select>
</div>
<div class="input-field col s6">
<select id="status" required>
<option value="" disabled selected>Status</option>
<option value="1">Em Análise</option>
<option value="2">Fora de Enquadramento</option>
<option value="3">Deferido</option>
<option value="4">Indeferido</option>
</select>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="situacao" class="materialize-textarea" data-length="120" autocomplete="off" required></textarea>
<label for="situacao">Situação</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="infoauxiliar" class="materialize-textarea" data-length="120" autocomplete="off"></textarea>
<label for="infoauxiliar">Informações Auxiliares</label>
</div>
</div>
<div class="input-field col s12">
<button id="salvar" class="btn waves-effect waves-light">Salvar<i class="material-icons right">send</i></button>
<button id="limpar" type="reset" class="btn waves-effect waves-light">Limpar<i class="material-icons right">clear_all</i></button>
<button id="cancelar" type="button" onclick="self.close()" class="btn waves-effect waves-light">Cancelar<i class="material-icons right">cancel</i></button>
</div>
</form>
</div>
<script>
var CampoProcesso = document.getElementByID("nprocesso");
var CampoInteressado = document.getElementByID("interessado");
var CampoDataReceb = document.getElementByID("data_recebimento");
var CampoDataInic = document.getElementByID("data_analise");
var CampoAnalista = document.getElementByID("analista");
var CampoStatus = document.getElementByID("status");
var CampoSituacao = document.getElementByID("situacao");
var CampoInfoAux = document.getElementByID("infoauxiliar");
document.getElementByID("salvar").addEventListener("click", Salvar);
function Salvar(){
var processo = CampoProcesso.value;
var interessado = CampoInteressado.value;
var datareceb = CampoDataReceb.value;
var datainic = CampoDataInic.value;
var analista = CampoAnalista.value;
var status = CampoStatus.value;
var situacao = CampoSituacao.value;
var infoaux = CampoInfoAux.value;
var dados = { processo: CampoProcesso.value, interessado: CampoInteressado.value, datareceb: CampoDataReceb.value, datainic: CampoDataInic.value, analista: CampoAnalista.value, status: CampoStatus.value, situacao: CampoSituacao.value, infoaux: CampoInfoAux.value};
google.script.run.RegistrarProcesso(dados);
CampoProcesso.value = "";
CampoInteressado.value = "";
CampoDataReceb.value = "";
CampoDataInic.value = "";
CampoAnalista.value = "";
CampoStatus.value = "";
CampoSituacao.value = "";
CampoInfoAux.value = "";
M.toast({html: 'Novo tramite cadastrado com sucesso!'});
}
</script>
</body>
</html>The idea was to click the Save button to run the script declared at the end of the code body and later call this function here:
function RegistrarEntrada(dados) {
// Declaração de vars
var Plan = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("CAD. DPGT 2019");
var Home = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("INÍCIO");
// Procura a linha para inserir os dados
Plan.getActiveCell();
Plan.getRange('A1').activate();
Plan.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
Plan.getActiveCell().offset(1, 0).activate();
// Insere os dados na linha
var Linha = Plan.getCurrentCell().getRow();
Plan.getRange(Linha, 1).setValue([dados.datareceb]);
Plan.getRange(Linha, 2).setValue([dados.processo]);
Plan.getRange(Linha, 3).setValue([dados.interessado]);
Plan.getRange(Linha, 4).setValue([dados.datainic]);
Plan.getRange(Linha, 5).setValue([dados.analista]);
Plan.getRange(Linha, 6).setValue([dados.status]);
Plan.getRange(Linha, 7).setValue([dados.situacao]);
Plan.getRange(Linha, 8).setValue([dados.infoaux]);
//Plan.getRange(Linha, 9).setValue([dados.processo]);
//Plan.getRange(Linha, 10).setValue([dados.processo]);
Home.getRange('A1').activate();
}MAAAAAAAAAAAAS... Unfortunately when you click the button, the form is empty and nothing happens, it saves nothing or nothing, only the title appears, like this:
Help me, please, this will improve and much the work of many.
Att,