0

Estoy dando mis primeros pasos en programación, por lo que me di a la tarea de recopilar muchos programas de la web para intentar hacer una aplicación web en google a partir de un googlesheet como base de datos, estoy siguiendo los pasos para poder buscar, guardar y editar la información de los clientes a través de la aplicación.

El HTML me funciona en la parte de visualización, pero en funcionalidad no hace nada, o sea no guarda, busca o edita informacion alguna en el googlesheet. Por eso estoy pidiendo por favor me ayuden a ver que estoy haciendo errado.

Este es el código que hice:

Código Gs.

//********************************Llama HTML******************************
  function doGet(e) {
  Logger.log(Utilities.jsonStringify(e))
  if (!e.parameter.page){
  return HtmlService.createTemplateFromFile('Index').evaluate()
 }
  var template = HtmlService.createTemplateFromFile(e.parameter.page)
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}
  //********************************Busca en la hoja******************************************
   function buscaReturnRow(sId){

   var hojaCalculo = SpreadsheetApp.openById("12vFlDaG9ZGGa90EeyOLGyzO4xaxYs8lucgS-CdgJJsA");
   var hojaDatos = hojaCalculo.getSheetByName('Clientes');
   var numColumns = hojaDatos.getLastColumn();
   var ultimaFila = hojaDatos.getLastRow();
   var sw = 0;
   var row = hojaDatos.getRange(1, 1, ultimaFila, numColumns).getValues();

        for (var i = 1; i < row.length; i++) {   
           for (var col = 0; col < row[i].length; col++) {
                  var id = row[i][2].toString();
                  if (sId == id){                     
                     var indice = i+1;
                     sw = 1;
                  }
           }
        }  
  if (sw == 1){
     return indice;
  }
}
//*****************Busca informacion y retorna a columna especifica****************************
function buscaEnSheet(sId, columna){

   var hojaCalculo = SpreadsheetApp.openById("12vFlDaG9ZGGa90EeyOLGyzO4xaxYs8lucgS-CdgJJsA");
   var hojaDatos = hojaCalculo.getSheetByName('Clientes');
   var numColumns = hojaDatos.getLastColumn();
   var ultimaFila = hojaDatos.getLastRow();
   var sw = 0;
   var row = hojaDatos.getRange(1, 1, ultimaFila, numColumns).getValues();

        for (var i = 1; i < row.length; i++) {   
           for (var col = 0; col < row[i].length; col++) {
                  var id = row[i][2].toString();
                  if (sId == id){                     
                     var indice = i+1;
                     sw = 1;
                  }
           }
        }  
  if (sw == 1){
    var info = hojaDatos.getRange(indice, columna).getValue();
    return info;
  }
}

//**************************guarda datos en la hoja*****************************
function procesaFormClientes(e){

  var sEmpresa = e.empresa;
  var sContato1 = e.contato1;


  var hojaCalculo = SpreadsheetApp.openById("12vFlDaG9ZGGa90EeyOLGyzO4xaxYs8lucgS-CdgJJsA");
  var hojaDatos = hojaCalculo.getSheetByName('Clientes');
  var ultimaFila = hojaDatos.getLastRow();


  hojaDatos.getRange(ultimaFila+1, 1).setValue(sEmpresa);
  hojaDatos.getRange(ultimaFila+1, 2).setValue(sContato1);

}

//********************************Funcion devuelve datos*********************************

// Buscar y regresar el valor de Empresa

  function getEmpresaSS(e){
  var sId = e.id;
  return  buscaEnSheet(sId, 1);
}

// Buscar y regresar el valor de Contato1

  function getContato1SS(e){
  var sId = e.id;
  return  buscaEnSheet(sId, 2);
}

    //Editar informacao Empresa
  function SetEmpresaSS(e){
  var sEmpresa = e.empresa;
  var row =  buscaReturnRow(sId);
  var hojaCalculo = SpreadsheetApp.openById("12vFlDaG9ZGGa90EeyOLGyzO4xaxYs8lucgS-CdgJJsA");
  var hojaDatos = hojaCalculo.getSheetByName('Clientes');
  hojaDatos.getRange(row, 1).setValue(sEmpresa);
}

function SetContato1SS(e){
  var sContato1 = e.contato1;
  var row =  buscaReturnRow(sId);
  var hojaCalculo = SpreadsheetApp.openById("12vFlDaG9ZGGa90EeyOLGyzO4xaxYs8lucgS-CdgJJsA");
  var hojaDatos = hojaCalculo.getSheetByName('Clientes');
  hojaDatos.getRange(row, 2).setValue(sContato1);
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<script>
function cerrarVentanaModal(){
    google.script.host.close();
 } 
 function procesaFormulario(){
  google.script.run.procesaFormClientes(document.forms[0]);
  }
  function buscaInformacion(){
   google.script.run.withSuccessHandler(getEmpresa).getLEmpresaSS(document.forms[0]);
   google.script.run.withSuccessHandler(getContato1).getContato1SS(document.forms[0]);

 }
  }
  function editaInformacion(){
   google.script.run.setEmpresaSS(document.forms[0]);
   google.script.run.setContato1SS(document.forms[0]);

  }

   function getEmpresa(empresa){
   var txtEmpresa = document.getElementById('Empresa');
   txtEmpresa.value = empresa;
 }


   function getContato1(contato1){
   $( "#contato1" ).val(contato1);

 }


 $(function() {
    $( "#cancelar" ).click(cerrarVentanaModal);
    $( "#salvar" ).click(procesaFormulario);
    $( "#editar" ).click(editaInformacion);
    $( "#buscar" ).click(buscaInformacion);
 });

 google.setOnLoadCallback(mostrarAcceso);

 </script>

<html>
 <head>
    <base target="_top">
         </head>
   <br/>
  <a href='https://photos.google.com/share/AF1QipO6JWoPTfg9brMrEbg7JpQatE45rh_NDKBjrPFyJXv0wbsKrrLts_NeXdcW5JYfMw?key=YUhWVExtYlpJLVNHTHg4czRVQU51ZXBIY3VBTDRn&source=ctrlq.org'><img src='https://lh3.googleusercontent.com/Di9aP7ey0YLpV_HmoYR346MnhDmL41aIGexm0rTIJ6KZfcKZCZjDp4nCZfpCPpd0UzEo9DsbXQrT_QIXd-WeDAoH5rpr70SpNS8e6lHAPg8YSXgihR_pqe4curaIOuEHJhvA7qIGeNg=w200' /></a>
  <br/>
<div id="wb_Form1" style="position:absolute;width:1149px;height:651px;">
<form id="datoscliente" name="datosCliente">
<br>
<label for="Empresa" id="Label20" style="position:absolute;left:10px;top:15px;width:139px;height:16px;line-height:16px;z-index:0;">Empresa</label>
<input id="empresa" style="position:absolute;left:84px;top:15px;width:417px;height:26px;z-index:1;" name="empresa" >
<br>
<label for="Contato1" id="Label3" style="position:absolute;left:10px;top:63px;width:57px;height:16px;line-height:16px;z-index:2;">Contato1</label>
<input type="text" id="contato1" style="position:absolute;left:84px;top:62px;width:190px;height:30px;z-index:3;" name="contato1" >
<br>
<br><br><br>
<button id="salvar" Class="action">Salvar</button>
<button id="buscar" Class="action">Procurar</button>
<button id="editar" Class="action">Editar</button>
<button id="cancelar"class="create">Cancelar</button>
</form>
</div>
</html>
5
  • te sugiero revisar esto: developers.google.com/sheets Commented el 27 feb. 2019 a las 17:40
  • @DiegoAvila El enlace que refieres es sobre la API de Google Sheets pero la pregunta trata sobre Google Apps Script y el servicio básico de Hojas de Cálculo, por lo que sería importante que dieras un mayor contexto del enlace que compartes.
    – Rubén
    Commented el 28 feb. 2019 a las 22:00
  • Bienvenido Fredy. En este sitio las preguntas sobre depuración de código, como esta, deben incluir lo que llamamos un ejemplo mínimo verificable. Te lo menciono porque el código que has incluído es demasiado extenso para una pregunta típica. Para probar la comunicación entre el código del lado del cliente con el código del lado del servidor con que incluyas uno o dos ejemplos de elementos de cada tipo es más que suficiente.
    – Rubén
    Commented el 28 feb. 2019 a las 22:04
  • Veo que actualizaste la pregunta, lo cual es bueno, sin embargo, el código sigue siendo demasiado extenso. Te reitero la sugerencia de agregar un ejemplo mínimo verificable.
    – Rubén
    Commented el 1 mar. 2019 a las 1:49
  • Gracias de nuevo Rubén, intenté disminuir a máximo el código en la última edición. Commented el 1 mar. 2019 a las 14:31

1 respuesta 1

1

Sobre la revisión 5 De lo mencionado en la sección sobre la revisión 1 mas abajo, las etiquetas <script> y <meta> en la revisión 5 del código siguen fuera de la etiqueta <html> lo cual es incorrecto.

Referencia


Sobre la revisión 1 de la pregunta

El código del lado cliente tiene varios problemas, entre ellos saltan a la vista rápidamente que

  1. Se han colocad etiquetas script y meta fuera de la etiqueta html
  2. Estas llamando funciones usando la forma $(..) típica de jQuery, pero no se carga esta librería, ni ninguna otra.

Preguntas relacionadas

Referencias

3
  • Buenas noches Rubén muchas gracias por tu comentario, en realidad fue error mio en el momento de copiar el codigo HTML. Commented el 1 mar. 2019 a las 0:07
  • @FredyMauricioDiazVargas gracias por el comentario. Gracias a él me dí cuenta que editaste tu pregunta. Las etiquetas <script> y <meta> siguen fuera de las etiquetas <html> lo cual es incorrecto.
    – Rubén
    Commented el 1 mar. 2019 a las 1:47
  • De nuevo muchas gracias @Rubén, voy a trabajar en eso. Commented el 1 mar. 2019 a las 2:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.