Estoy creando un formulario de inicio de sesión, que pasa los datos de inicio de sesión a una hoja de cálculo de Google. El formulario usa CSS y Jquery para construir la interfaz de usuario y la interactividad de los elementos. El archivo CSS usa variables CSS, pero aún están codificadas en el propio archivo style.html . Me gustaría extraer la información de estilo de una hoja de Configuración en la propia hoja de cálculo de Google.
Para hacer esto, estoy probando un archivo llamado customcss.html que, en lugar de un archivo de estilo, es un archivo de secuencia de comandos que escribe una etiqueta <style> para que jquery la agregue al elemento principal una vez que se carga la página. El archivo customcss.html se ve así:
<script> var sL = "<style>"; sL += ":root { --body-bg-color: " + google.script.run.withSuccessHandler(returnVal).getNamedRangeVal("body.bg.color") + "; "; sL += "--num-text-color: " + google.script.run.withSuccessHandler(returnVal).getNamedRangeVal("num.text.color") + "; "; sL += "--num-bg-color: " + google.script.run.withSuccessHandler(returnVal).getNamedRangeVal("num.bg.color") + "; "; . . . sL += "} </style>"; $("head").append(sL); </script> Para extraer datos de la hoja, se llama a la función getNamedRangeVal , que encuentra el rango de nombres definido pasado a la función y lee el valor apropiado en la celda:
function getNamedRangeVal(nR) { var ss = SpreadsheetApp.openByUrl(sheetURL); var ws = ss.getRangeByName(nR).getValue(); return ws; } Dado que lo que devuelve getNamedRangeVal son los datos que necesito, necesito el controlador de éxito returnVal para poder devolver un valor (ya que una función llamada a través google.script.run. devuelve void ); returnVal es bastante básico: simplemente da la vuelta y devuelve lo que sea que haya pasado:
function returnVal(v) { return v; } El problema es que cuando se ejecuta el script, agrega la etiqueta <style> adecuada, pero todos los valores de las variables no están undefined , lo que, según mi investigación inicial, parece deberse a la naturaleza asíncrona de la llamada google.script.run .
Entonces, ¿qué puedo hacer para obtener los datos de la hoja en la función de devolución de llamada para crear el script CSS?
Llamar a google.script.run en el código del lado del cliente (es decir, el navegador web) inicia la función Apps Script del lado del servidor especificada. La función del lado del cliente continúa la ejecución inmediatamente sin esperar a que se complete la función del lado del servidor. A menudo, la función del lado del cliente simplemente terminará en este punto.
Cuando finalmente se completa la función del lado del servidor, la función especificada por withSuccessHandler o withFailureHandler se inicia automáticamente, dependiendo de si la función del lado del servidor se completó correctamente o generó un error.
Por lo tanto, como dijo Kos , debe mover el edificio CSS a la función llamada withSuccessHandler .
Otra forma de construir dinámicamente el CSS sería usarHTML con plantilla , que permite ejecutar código del lado del servidor directamente, sin usar google.script.run , pero a través de scriptlets . Esa es una opción válida si desea llevar una pequeña cantidad de datos estáticos al lado del cliente cuando se carga la página (consulte Cargar datos de forma asíncrona, no en plantillas ).
Vea un ejemplo simplificado en el que el color de los elementos div se obtiene del servidor con los scriplets de impresión ( <?= ?> ):
índice.html:
<!DOCTYPE html> <html> <head> <style> div { color: <?= myColor("color") ?>; background-color: <?= myColor("background-color") ?>; } </style> </head> <body> <div>THIS SHOULD BE COLORED</div> </body> </html>Código.gs:
function doGet() { const output = HtmlService.createTemplateFromFile("index").evaluate(); return output; } function myColor(prop) { switch (prop) { case "color": return "blue"; case "background-color": return "red"; } }