Pasar un array generado en Google Apps Script a una página HTML y utilizar para navegación básica

Tengo una función simple que recupera datos de una hoja de cálculo y pasa esta matriz a una ventana modal.

var ui = SpreadsheetApp.getUi();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('sheet1'); 
var data = sheet.getRange(2,1,sheet.getLastRow()-1,sheet.getLastColumn()).getValues();
const htmlForModal = HtmlService.createTemplateFromFile("detailedView");
htmlForModal.DATA = data;
htmlForModal.rowIndex = 0; // starts with the first array

const htmlOutput = htmlForModal.evaluate();
return ui.showModalDialog(htmlOutput, "title");

Obviamente los datos son una serie de arrays.

Dentro del HTML puedo utilizar valores DATA a través de scriptlets como este:


                    = DATA[rowIndex][4] ?

y funciona. El problema es que necesito un sistema para navegar a través de la matriz. Un simple botón "NEXT" para actualizar el párrafo con una nueva filaIndex (rowIndex+1) cada vez que lo hago clic. Sé que puedo usar el documento. queryselector para cambiar el HTML interior de mi párrafo, pero ho puede cambiar = DATA[rowIndex][4] ? con = DATA[rowIndex+1][4] ? ?

Intenté una consola. registro al comienzo del HTML para registrar DAATA y se llena correctamente. Pero parece ser una cadena de texto, no un array. Si DATA renderiza sólo la primera vez, ¿hay un método para reconstruir el array al cargar HTML y hacerlo disponible para scripts dentro del HTML?

Posiblemente evitaría una llamada a google.script.run. Lo intenté y funciona pero cada vez que hago clic en el botón tiene que llamar script google, cargar la fila y devolverla... y es sooo lento :-( Mientras pasa toda la matriz en el html es rápido...

¿Puedes ayudarme? :-)

Pregunta hecha hace 3 años, 5 meses, 0 días - Por codesculptor3f6e

3 Respuestas:

  • Usted debe solicitar todos los datos del lado cliente una vez utilizando google.script.run ()ver docs), guardarlo, y cambiar el diseño de página usando JavaScript cuando el usuario cambie la página sin solicitar los datos de nuevo. Ver mejores prácticas sobre carga asincrónica vs añadir datos usando plantillas.

    // Code.gs snippet

function showDialog() {
  var htmlOutput = HtmlService.createTemplateFromFile('detailedView')
      .evaluate();
  var ui = SpreadsheetApp.getUi();
  return ui.showModalDialog(htmlOutput, 'Dialog title');
}

function getData() {
  // Example based on the question code
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('sheet1');
  var data = sheet.getRange(2,1,sheet.getLastRow()-1,sheet.getLastColumn()).getValues();
  return data.map(function (value) {
    return value[4];
  })
}

     detailedView.html snippet

    También te recomendaría tener un loading... mensaje por defecto, por lo que el usuario sabe que los datos están siendo procesados.

    Referencias

    Respondida el Dec 16, 2020 a las 11:01 - por daniel1

    Votos positivos: 0 | Votos negativos: 0

  • En lugar de intentar acceder directamente a los valores del array en el HTML, una solución más eficiente sería utilizar JavaScript para manejar la navegación a través de la matriz y actualizar la interfaz de usuario.

    Aquí te dejo un ejemplo de cómo podrías implementar un botón "NEXT" para navegar a través de las filas de la matriz en el HTML:

    • Dentro del archivo `detailedView.html`, puedes agregar el siguiente código JavaScript para manejar la navegación a través de la matriz y actualizar el contenido en el modal:
    html
    • Luego, en tu archivo `.gs`, asegúrate de pasar los datos y el índice de fila actual al HTML:
    javascript
const htmlForModal = HtmlService.createTemplateFromFile("detailedView");
htmlForModal.DATA = data;
htmlForModal.rowIndex = 0; // Comenzar con la primera fila

const htmlOutput = htmlForModal.evaluate();
return ui.showModalDialog(htmlOutput, "title");

    Con esta configuración, el botón "NEXT" te permitirá navegar por las filas de la matriz sin necesidad de hacer llamadas adicionales a google.script.run. Cada vez que hagas clic en el botón, se actualizará la información en el modal de manera rápida y eficiente. Espero que esta solución te ayude a lograr la funcionalidad que buscas. ¡Buena suerte!

    Respondida el Dec 17, 2020 a las 11:01 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    Necesitas navegar por una matriz de datos obtenida de una hoja de cálculo de Google Apps Script y utilizarla para la navegación básica en una ventana modal HTML. El objetivo es evitar llamadas lentas a google.script.run cada vez que se hace clic en un botón "Siguiente".

    Solución:

    1. Transforma la matriz en un objeto JSON:

    En la secuencia de comandos de Apps Script, convierte la matriz de datos en un objeto JSON antes de pasarlo al HTML:

    js
const dataObj = JSON.stringify(data);
htmlForModal.DATA_OBJ = dataObj;

    2. Extrae el objeto JSON en el HTML:

    En el HTML, extrae el objeto JSON de la variable pasada:

    html

    3. Actualiza rowIndex con un botón "Siguiente":

    Agrega un botón "Siguiente" al HTML:

    html

    Y agrega un controlador de eventos para actualizar rowIndex y mostrar los datos cuando se hace clic:

    js
document.getElementById("next-button").addEventListener("click", function() {
  rowIndex++;
  showData();
});

function showData() {
  document.getElementById("title").innerHTML = dataObj[rowIndex][4];
}

    4. Carga inicial de datos:

    Cuando se carga el HTML por primera vez, llama a showData() para mostrar los datos iniciales:

    js
showData();

    Beneficios:

    Todos los datos se cargan en el HTML una sola vez, lo que elimina la necesidad de llamadas lentas a google.script.run. La navegación por los datos es rápida y receptiva. El uso de un objeto JSON permite un acceso fácil a los datos dentro del HTML.

    Nota:*

    Asegúrate de escapar correctamente los datos de la hoja de cálculo antes de pasarlo al HTML para evitar vulnerabilidades de secuencias de comandos entre sitios.

    Respondida el Dec 17, 2020 a las 11:12 - por Gemini

    Votos positivos: 0 | Votos negativos: 0