1

Tengo unas script que lee la información de una spreadsheet, y la muestran en HTML. Trato de adaptarle un botón que active la actualización de la información cuando se ejecuten cambios en la hoja de cálculo. Sólo logro se ejecute la parte de window.location.reload(true);. Pero la data no se actualiza.

Éstos son los códigos:

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function getData() {
  return SpreadsheetApp
      .openById('IDdelaspreadsheet')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

function onSubmit(e){

  doGet();
  getData();
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

  </head>
  <body>
    <? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>

    // no es del código original. Aquí trato de incluir el botón
     <form>
    <input onclick="MostrarResultados()" type="button" value="Mostrar" />
    </form>
    <script type="text/javascript">
    function MostrarResultados() {
    google.script.run.onSubmit();
    window.location.reload(true);
    }
    </script>
    // hasta aquí la parte que inserto, no es del código original
 </body>
</html>

1 respuesta 1

2

El código tiene varios problemas.

  1. google.script.run.onSubmit(); Del lado del cliente, llama una función del lado del servidor, pero no hay una función "callback" que espere por la respuesta del servidor.
  2. onSubmit(e) del lado del servidor llama doGet(e), pero esta es una función que reservada para ser llamada por medio de la URL de la aplicación.
  3. window.location.reload(true); En respuesta de Erick Koleda con fecha del 2013, a una pregunta sobre el uso de este código, HTMLService restringe el acceso al objeto window. No estoy del todo seguro como afecta cuando se usa HtmlService.SandboxMode.IFRAME. Para lograr lo mismo yo utilizo otro enfoque el cual describo en el punto siguiente.
  4. Considerando que en el documento de mejores prácticas (en inglés) se indica no usar plantillas para obtener datos, que es lo que el código del OP hace, sino que se obtengan de forma asíncrona a continuación se incluye un ejemplo de una aplicación web que obtiene los datos de una hoja de cálculo y los actualiza al hacer clic en un botón.

Ejemplo de aplicación web

Cuando se carga la aplicación web, los datos se cargan usando window.onload llamando la función actualizarTabla() que a su vez llama a google.script.run usando withSuccessHandler para que una vez que el servidor responda con los datos de la hoja de cálculo en formato de tabla HTML, se pasen dichos datos al elemento de la página en la que los deseamos mostrar. Para actualizar los datos, el botón llama la misma función.

Código.gs

/*
 * Devuelve página web.
 */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
/*
 * Obtiene los datos de la hoja de cálculo especificada por ID.
 */
function getData() {
  return SpreadsheetApp
      .openById('IdDeLaHojaDeCalculo')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}
/*
 * Convierte los datos en una tabla HTML
 */
function crearTabla(){
  var data = getData();
  var tabla = '<table>\n';
  for(var i = 0; i < data.length; i++){
    tabla += '<tr>';
    for(var j = 0; j < data[0].length; j++){
      tabla += '<td>' + data[i][j] + '</td>'
    }
    tabla += '</tr>\n';
  }
  tabla += '</table>';
  return tabla;
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript">
    window.onload = actualizarTabla();
    
    function actualizarTabla(){
      google.script.run
        .withSuccessHandler(mostrarTabla)
        .crearTabla();
    }
    function mostrarTabla(tabla){
      document.getElementById("tabla").innerHTML = tabla;
    }
    </script>
    
  </head>
  <body>
    <button onclick="actualizarTabla();">Actualizar</button>
    <div id="tabla">Cargando...</div>
  </body>
</html>

Referencias:

0

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.