Bruno R

Google Apps Script, parte 2: Cargar archivo HTML

x
portfolio-next-l5vb64p5k-bandikyu.vercel.app

Como vimos en la publicación anterior, podemos generar código HTML a través del método: createHtmlOutput():

function doGet() {
   return HtmlService.createHtmlOutput("Hola mundo.");
 }

Aunque esto podría llegar a servirnos en ciertas ocasiones, lo mejor sería crear un archivo .html. Para eso vamos al menú: Archivo / Nuevo / Archivo HTML.

nadaimage by fernando-gaitan.com.ar

Le ponemos un nombre al mismo, en mi caso: «layout»

nadaimage by fernando-gaitan.com.ar

Y ya podemos editar el contenido del mismo:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1> Hola. </h1>
  </body>
</html>

createTemplateFromFile()

Para poder incluirlo dentro de nuestro archivo GAS, vamos a modificar la función doGet() de la siguiente forma:

function doGet() {
  let layout = HtmlService.createTemplateFromFile("layout");
  return layout.evaluate();
}

Podemos ver los cambios, haciendo un deploy nuevo, o simplemente abriendo el enlace que nos genera los últimos cambios de DEV como vimos en la publicación pasada. Yendo al menú. Publicar / Implementar como aplicación web. Y haciendo click en el enlace: «latest code»

nadaimage by fernando-gaitan.com.ar

Incluyendo archivos css y js.

Si bien podemos importar hojas de estilo y javascript externos. Por ejemplo bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

No así crear .css y .js en nuestro proyecto, solamente .html. Para simular esto tenemos que hacer lo siguiente: Ir nuevamente al menú: Archivo / Nuevo / Archivo HTML.

En caso de crear un archivo que incluya código CSS, el mismo tendrá que tener un aspecto como el siguiente, con la etiqueta style:

<style>
	ul {
		list-style-type: circle;
	}
</style>

Y en caso de que sea JS, con la etiqueta script:

<script>
	alert('Incluido el código JAVASCRIPT.');
</script>

Y para incluirlo en nuestro layout, tenemos que hacer lo siguiente:

<?!= HtmlService.createHtmlOutputFromFile("NOMBRE-DE-TU-ARCHIVO-CSS-O-JS").getContent(); ?>

Por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
  </head>
  <body>
    <h1> Hola. </h1>
    <?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
  </body>
</html>

Pasar variables

Como vimos en el ejemplo anterior, podemos incluir tag en las plantillas, muy parecido a como hace PHP. Algo como esto:

<? var anio = new Date().getFullYear(); ?>

De esta forma declaramos una variable dentro de la plantilla. Ahora si quisiéramos imprimirla deberíamos hacerlo de la siguiente forma:

<?= anio ?>

Como se puede ver, tenemos que agregar el caracter «=» para imprimir variables.

También podríamos declarar las variables desde el código GAS y luego pasarla a nuestras vistas:

function doGet() {
  let layout = HtmlService.createTemplateFromFile("layout");
  layout.saludo = "Bienvenido/a a mi sitio web";
  return layout.evaluate();
}

Y luego mostrar la variable saludo en el html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1> <?= saludo ?> </h1>
  </body>
</html>